Merge branch 'master' of http://192.168.1.136:82/monitor_v3/hg-monitor-web

@@ -671,7 +671,7 @@ layui.define(['xmSelect', 'md5'], function (exports) {
                 resType = 'X86SERVER_BMC';
                 resType = 'X86SERVER_BMC';
             }
             }
             //如果是HOST_X86SERVER服务器并且协议为snmp，或共享存储则根据厂商和型号判断类型
             //如果是HOST_X86SERVER服务器并且协议为snmp，或共享存储则根据厂商和型号判断类型
-            if (resType.indexOf("HOST_X86SERVER") !== -1 || resType.indexOf("STORAGE_SHARE") != -1) {
+            if ((resType.indexOf("HOST_X86SERVER") !== -1 && protocol =='SNMP')  || resType.indexOf("STORAGE_SHARE") != -1) {
                 resType = this.detailPathByProviderAndModel(resType,resId);
                 resType = this.detailPathByProviderAndModel(resType,resId);
             }
             }
             //如果是虚拟化相关资源类型，则根据采集协议判断去那个页面
             //如果是虚拟化相关资源类型，则根据采集协议判断去那个页面

@@ -2517,6 +2517,58 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
                 {field: 'lastColTime', title: '最近采集时间', minWidth: x_170, align: 'center', sort: true},
                 {field: 'lastColTime', title: '最近采集时间', minWidth: x_170, align: 'center', sort: true},
                 {field: 'linkState', title: '连接状态', align: 'center', minWidth: x_120, templet: '#linkStateTpl', sort: true}
                 {field: 'linkState', title: '连接状态', align: 'center', minWidth: x_120, templet: '#linkStateTpl', sort: true}
             ],
             ],
+            "HUAWEI_CLOUD_PLAT":[
+                {field: 'ip', title: 'IP地址', minWidth: x_130, align: 'center', sort: true},
+                {
+                    field: 'resName', title: '资源名称', minWidth: x_300, sort: true,
+                    templet: '#resindex_resName'
+                },
+                {field: 'health', title: '健康状态', minWidth: x_110, align: 'center', sort: true, templet: '#healthTpl'},
+                // {field: 'diskSize', title: '磁盘总大小', minWidth: 120, align: 'center'},
+                {field: 'fileSysUseRate', title: '文件系统使用率(最大)', align: 'center', minWidth: x_185, templet: '#fileUseRateTpl', sort: true},
+                {field: 'diskBusyRate', title: '磁盘繁忙率(最大)', minWidth: x_160, align: 'center', sort: true, templet: '<div>{{d.diskBusyRate}}%</div>'},
+                {field: 'cpuCores', title: '单个CPU核数', align: 'center', minWidth: x_140, sort: true, templet: '#cpuCoresTpl'},
+                {field: 'cpuNum', title: '主机CPU总核数', align: 'center', minWidth: x_150, sort: true, templet: '#cpuNumTpl'},
+                {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_120, templet: '#cpuRateTpl', sort: true},
+                {field: 'memorySize', title: '内存大小', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.memorySize}} GB</div>'},
+                {field: 'cacheUsed', title: '缓存总大小', align: 'center', minWidth: x_120, sort: true, templet: '<div>{{d.cacheUsed}} GB</div>'},
+                {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_120, templet: '#memoryRateTpl', sort: true},
+                {field: 'vmmemoryUseRate', title: '虚拟内存使用率', align: 'center', minWidth: x_165, templet: '#vmmemoryRateTpl', sort: true},
+                {field: 'maxNetCardUpRate', title: '上行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardUpRate}} kb/s</div>'},
+                {field: 'maxNetCardDownRate', title: '下行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardDownRate}} kb/s</div>'},
+                {field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', minWidth: x_110, templet: '#linkStateTpl', sort: true},
+                {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
+                {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
+                {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
+                {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'}
+            ],
+            "ALI_CLOUD_PLAT":[
+                {field: 'ip', title: 'IP地址', minWidth: x_130, align: 'center', sort: true},
+                {
+                    field: 'resName', title: '资源名称', minWidth: x_300, sort: true,
+                    templet: '#resindex_resName'
+                },
+                {field: 'health', title: '健康状态', minWidth: x_110, align: 'center', sort: true, templet: '#healthTpl'},
+                // {field: 'diskSize', title: '磁盘总大小', minWidth: 120, align: 'center'},
+                {field: 'fileSysUseRate', title: '文件系统使用率(最大)', align: 'center', minWidth: x_185, templet: '#fileUseRateTpl', sort: true},
+                {field: 'diskBusyRate', title: '磁盘繁忙率(最大)', minWidth: x_160, align: 'center', sort: true, templet: '<div>{{d.diskBusyRate}}%</div>'},
+                {field: 'cpuCores', title: '单个CPU核数', align: 'center', minWidth: x_140, sort: true, templet: '#cpuCoresTpl'},
+                {field: 'cpuNum', title: '主机CPU总核数', align: 'center', minWidth: x_150, sort: true, templet: '#cpuNumTpl'},
+                {field: 'cpuRate', title: 'CPU使用率', align: 'center', minWidth: x_120, templet: '#cpuRateTpl', sort: true},
+                {field: 'memorySize', title: '内存大小', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.memorySize}} GB</div>'},
+                {field: 'cacheUsed', title: '缓存总大小', align: 'center', minWidth: x_120, sort: true, templet: '<div>{{d.cacheUsed}} GB</div>'},
+                {field: 'memoryRate', title: '内存使用率', align: 'center', minWidth: x_120, templet: '#memoryRateTpl', sort: true},
+                {field: 'vmmemoryUseRate', title: '虚拟内存使用率', align: 'center', minWidth: x_165, templet: '#vmmemoryRateTpl', sort: true},
+                {field: 'maxNetCardUpRate', title: '上行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardUpRate}} kb/s</div>'},
+                {field: 'maxNetCardDownRate', title: '下行速率', align: 'center', minWidth: x_110, sort: true, templet: '<div>{{d.maxNetCardDownRate}} kb/s</div>'},
+                {field: 'lastColTime', title: '最近采集时间', minWidth: x_160, align: 'center', sort: true},
+                {field: 'linkState', title: '连接状态', align: 'center', minWidth: x_110, templet: '#linkStateTpl', sort: true},
+                {field: 'adminName', title: '负责人', minWidth: x_120, align: 'center', sort: true},
+                {field: 'adminPhone', title: '负责人电话', minWidth: x_130, align: 'center', sort: true},
+                {field: 'resTypeName', title: '资源类型', minWidth: x_110, align: 'center'},
+                {field: 'state', title: '资源状态', minWidth: x_110, align: 'center', sort: true, templet: '#resStateTpl'}
+            ],
         },
         },
         //列点击事件
         //列点击事件
         colsClickEvent: function (editFlag) {
         colsClickEvent: function (editFlag) {

 <title>浙江大屏</title>
 <title>浙江大屏</title>
-<iframe src="/vue3/index.html#/zj/dp" class="layadmin-iframe"/>
+<iframe src="/vue3/index.html#/bigscreen" class="layadmin-iframe"/>

@@ -5,3 +5,16 @@
 
 
 /*乙方运维*/
 /*乙方运维*/
 @import "../css/operationMaintenance.css";
 @import "../css/operationMaintenance.css";
+
+/*电子大屏*/
+@import "../css/bigscreen.css";
+
+@import "../css/topfive.css";
+
+@import "../css/global.css";
+
+@import "../css/deduction.css";
+
+@import "../css/businessVolume.css";
+
+@import "../css/digitalboard.css";

+/* 大屏配置 ---start */
+.com-page {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.com-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.com-chart {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+/* 大屏配置 ---end */
+
+.screen-container {
+    width: 100%;
+    height: 100%;
+    padding: 0 0.2%;
+    background: url(bg_backgroud.png);
+    background-size: 100% 100%;
+    color: #fff;
+    box-sizing: border-box;
+}
+
+.screen-header {
+    width: 100%;
+    position: relative;
+}
+.screen-header .title{
+    position: absolute;
+    left: 50%;
+    top: 56%;
+    transform: translate(-50%, -50%);
+}
+.screen-header .title-left{
+    display: flex;
+    align-items: center;
+    position:absolute;
+    transform: translateY(-80%);
+    left: 1%;
+    top: 55%;
+}
+.screen-header .timelog{
+    cursor: pointer;
+}
+
+.screen-body {
+    width: 100%;
+    height: 60%;
+    display: flex;
+    margin-bottom: 0.2%;
+}
+.screen-left {
+    height: 100%;
+    width: 30%;
+}
+.screen-left #left-top {
+    height: 56%;
+    position: relative;
+}
+.screen-left #left-bottom {
+    height: 43.8%;
+    position: relative;
+}
+.screen-middle {
+    height: 100%;
+    width: 40%;
+    margin-top: 0.5%;
+    margin-left: 0.2%;
+    margin-right: 0.2%;
+}
+.screen-middle #middle-top {
+    width: 100%;
+    height: 32.4%;
+    position: relative;
+}
+.screen-middle #middle-center {
+    width: 100%;
+    height: 32.4%;
+    position: relative;
+}
+.screen-middle #middle-bottom {
+    width: 100%;
+    height: 34%;
+    position: relative;
+}
+
+.screen-right {
+    height: 100%;
+    width: 30%;
+}
+
+.screen-right #right-top {
+    height: 26%;
+    position: relative;
+}
+.screen-right #right-center {
+    height: 37%;
+    position: relative;
+}
+.screen-right #right-bottom {
+    height: 37%;
+    position: relative;
+}
+
+.screen-bottom {
+    width: 100%;
+    height: 34%;
+    display: flex;
+}
+.screen-bottom #bottom-one {
+    height: 100%;
+    width: 25%;
+    position: relative;
+}
+.screen-bottom #bottom-two {
+    height: 100%;
+    width: 25%;
+    position: relative;
+}
+.screen-bottom #bottom-three {
+    height: 100%;
+    width: 25%;
+    position: relative;
+}
+.screen-bottom #bottom-four {
+    height: 100%;
+    width: 25%;
+    position: relative;
+}

+.busniess-title-size {
+    position: absolute;
+    left: 13%;
+    top: 3%;
+}
+.busniess-title-img {
+    position: absolute;
+    left: 5%;
+    top: 2%;
+}
+.busniess-box-title {
+    margin-left: 8%;
+}
+.busniess-circle-left {
+    position: absolute;
+    left: 19%;
+    top: 59%;
+}
+.busniess-circle-right {
+    position: absolute;
+    left: 63%;
+    top: 59%;
+}
+.busniess-circle-text {
+    text-align: center;
+}

+.com-box {
+    text-align: center;
+}
+.deduction-box-title {
+    position: absolute;
+    left: 2%;
+    top: 1%;
+}
+.deduction-title-size {
+    position: absolute;
+    left: 9%;
+    top: 20%;
+}
+.deduction-box-text-left {
+    position: absolute;
+    left: 12%;
+    top: 45%;
+}
+.deduction-box-text-right {
+    position: absolute;
+    left: 60%;
+    top: 45%;
+}
+.deduction-text-number {
+    color: #01E6E6;
+}

+.com-box {
+    text-align: center;
+}
+.com-box-right {
+    text-align: right;
+}
+.span-box-title {
+    position: absolute;
+    color: #FEFEFE;
+    top: 1%;
+    left: 6%;
+}
+
+@font-face{
+    font-family: yjsz;
+    /*src: url('../assets/font/DS-DIGIT.TTF');*/
+    src: url(DS-DIGIT.TTF);
+}

+html, body, #app {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.com-page {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.com-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.com-chart {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+canvas {
+    border-radius: 20px;
+}

+.topfive-title-size {
+    position: absolute;
+    left: 16%;
+    top: 7%;
+}
+.topfive-title-img {
+    position: absolute;
+    left: 5%;
+    top: 5%;
+}

+@charset "utf-8";
+/* CSS Document */
+*{
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box}
+*,body{padding:0px;	margin:0px;color: #222;font-family: "微软雅黑";}
+@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
+body{ background:#000d4a url(../images/bg.jpg) center top; background-size:cover;color:#666;font-size: .1rem;}
+li{ list-style-type:none;}
+table{}
+i{ margin:0px; padding:0px; text-indent:0px;}
+img{ border:none; max-width: 100%;}
+a{ text-decoration:none; color:#399bff;}
+a.active,a:focus{ outline:none!important; text-decoration:none;}
+ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
+a:hover{ color:#06c; text-decoration: none!important}
+
+
+.clearfix:after, .clearfix:before {
+	display: table;
+	content: " "
+}
+ .clearfix:after {
+	clear: both
+}
+.pulll_left{float:left;}
+.pulll_right{float:right;}
+/*谷哥滚动条样式*/
+
+  ::-webkit-scrollbar {width:5px;height:5px;position:absolute}
+  ::-webkit-scrollbar-thumb {background-color:#5bc0de}
+  ::-webkit-scrollbar-track {background-color:#ddd}
+
+/***/
+.canvas{position: absolute; width:100%; left: 0; top: 0; height: 99%; z-index: 1;}
+
+.allnav{height: calc(100% - 30px);}
+.loading{position:fixed; left:0; top:0; font-size:18px; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
+.loadbox{position:absolute; width:160px;height:150px; color: #aaa; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
+.loadbox img{ margin:10px auto; display:block; width:40px;}
+
+.copyright{ background:rgba(19,31,64,.32); border: 1px solid rgba(255,255,255,.05); line-height:.5rem; text-align: center; padding-right: 15px; bottom: 0; color:rgba(255,255,255,.7); font-size: .16rem; }
+
+.head{ height:1.05rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative; z-index: 100;}
+.head h1{ color:#fff; text-align: center; font-size: .4rem; line-height:.8rem;}
+.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem}
+.weather{ position:absolute; right:.3rem; top:0; line-height: .75rem;}
+.weather img{ width:.37rem; display: inline-block; vertical-align: middle;}
+.weather span{color:rgba(255,255,255,.7); font-size: .18rem; padding-right: .1rem;}
+.mainbox{ padding:.1rem .1rem 0rem .1rem;}
+.mainbox>ul{}
+.mainbox>ul>li{ float: left; padding: 0 .1rem}
+
+.mainbox>ul>li{ width: 30%}
+.mainbox>ul>li:nth-child(2){ width: 40%;padding: 0}
+
+.boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .2rem .4rem .15rem;  background: rgba(255,255,255,.04) url(../images/line.png); background-size: 100% auto; position: relative; margin-bottom: .15rem; z-index: 10;}
+.boxall:before,
+.boxall:after{ position:absolute; width: .1rem; height: .1rem; content: "";  border-top: 2px solid #02a6b5; top: 0;}
+.boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
+.boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
+.alltitle{ font-size:.2rem; color:#fff; text-align: center; line-height: .5rem;}
+
+.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
+.boxfoot:before,
+.boxfoot:after{ position:absolute; width: .1rem; height: .1rem;  content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}
+
+.bar{background:rgba(101,132,226,.1); padding: .15rem;}
+.barbox li,.barbox2 li{ width:50%; text-align: center; position: relative; z-index: 100;}
+.barbox:before,
+.barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
+.barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
+.barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }
+
+.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}
+
+.barbox{  border: 1px solid rgba(25,186,139,.17); position: relative;}
+.barbox li{ font-size: .7rem; color: #ffeb7b; padding: .05rem 0;  font-family:electronicFont; font-weight: bold;}
+.barbox2 li{ font-size: .19rem; color:rgba(255,255,255,.7); padding-top: .1rem;}
+
+.map{  position:relative; height: 7.2rem; z-index: 9;}
+.map4{ width: 200%; height:7rem;  position: relative; left: -50%; top: 4%; margin-top: .2rem; z-index: 5;}
+.map1,.map2,.map3{ position:absolute; opacity: .5}
+.map1{ width:6.43rem; z-index: 2;top:.45rem; left: .7rem;  animation: myfirst2 15s infinite linear;}
+.map2{ width:5.66rem; top:.85rem; left:1.2rem; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
+.map3{ width:5.18rem; top:1.07rem; left: 1.4rem; z-index: 1;}
+
+
+
+
+
+.tabs { text-align: center; padding: .1rem 0 0 0;}
+.tabs a {
+    position: relative;
+    display: inline-block;
+    margin-left: 1px;
+    padding:.05rem .2rem;
+    color: #898989;
+    transition: all .3s ease-out 0s;
+    font-size: 14px;
+}
+.tabs li{ display:inline-block;}
+.tabs a:after {
+    position: absolute;
+    width: 1px;
+    height: 10px;
+    background-color: rgba(255,255,255,.1);
+    content: '';
+	 margin-left:0; right:-1px;    margin-top: 7px;
+	
+	
+}
+.tabs li a.active {border: 1px solid rgba(25,186,139,.17); background: rgba(255,255,255,.05); color:#fff;}
+
+.tit02{ text-align:center; margin: .1rem 0; position: relative}
+.tit02 span{border: 1px solid rgba(25,186,139,.17); letter-spacing: 2px; padding: .01rem .2rem; background: rgba(255,255,255,.05);  font-size: .18rem;  color: #49bcf7;}
+.tit02:before,.tit02:after{ position:absolute; width:26%; height: 1px;background: rgba(25,186,139,.2);  content: ""; top: .12rem;}
+.tit02:after{ right:0;}
+.tit02:before{ left:0;}
+
+.wrap{ height:2.54rem; overflow: hidden;}
+.wrap li{  line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
+.wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }
+.sy{ float:left; width: 33%; height:95%; margin-top: .25rem;}
+
+
+.adduser{ height:1.5rem; overflow: hidden;}
+.adduser li{height:.5rem;}
+.adduser img{ width: .40rem; border-radius: .5rem; margin-right: .1rem; display: inline-block; vertical-align: middle;}
+.adduser span{  line-height:.5rem; font-size: .18rem;color: rgba(255,255,255,.6); }
+
+.sycm ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
+.sycm li{ float: left; width: 33.33%; text-align: center; position: relative}
+.sycm li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
+.sycm li:last-child:before{ width: 0;}
+
+.sycm li h2{ font-size:.3rem; color: #c5ccff;}
+.sycm li span{ font-size:.18rem; color: #fff; opacity: .5;}
+
+@keyframes myfirst2
+{
+from {transform: rotate(0deg);}
+to {transform: rotate(359deg);}
+}
+
+@keyframes myfirst
+{
+from {transform: rotate(0deg);}
+to {transform: rotate(-359deg);}
+}
+
+/*Plugin CSS*/
+.str_wrap {
+	overflow:hidden;
+	width:100%;
+	position:relative;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	user-select: none;  
+	white-space:nowrap;
+}
+
+
+.str_move { 
+	white-space:nowrap;
+	position:absolute; 
+	top:0; 
+	left:0;
+	cursor:move;
+}
+.str_move_clone {
+	display:inline-block;
+	vertical-align:top;
+	position:absolute; 
+	left:100%;
+	top:0;
+}
+.str_vertical .str_move_clone {
+	left:0;
+	top:100%;
+}
+.str_down .str_move_clone {
+	left:0;
+	bottom:100%;
+}
+.str_vertical .str_move,
+.str_down .str_move {
+	white-space:normal;
+	width:100%;
+}
+.str_static .str_move,
+.no_drag .str_move,
+.noStop .str_move{
+	cursor:inherit;
+}
+.str_wrap img {
+	max-width:none !important;	
+}

+html, body, #app {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+.com-page {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.com-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.com-chart {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+canvas {
+    border-radius: 20px;
+}

+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1525688" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe825;</span>
+                <div class="name">compress-alt</div>
+                <div class="code-name">&amp;#xe825;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe826;</span>
+                <div class="name">expand-alt</div>
+                <div class="code-name">&amp;#xe826;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe836;</span>
+                <div class="name">sort-line</div>
+                <div class="code-name">&amp;#xe836;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe837;</span>
+                <div class="name">switch</div>
+                <div class="code-name">&amp;#xe837;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6eb;</span>
+                <div class="name">arrow-down</div>
+                <div class="code-name">&amp;#xe6eb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ed;</span>
+                <div class="name">arrow-right</div>
+                <div class="code-name">&amp;#xe6ed;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ee;</span>
+                <div class="name">arrow-up</div>
+                <div class="code-name">&amp;#xe6ee;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ef;</span>
+                <div class="name">arrow-lift</div>
+                <div class="code-name">&amp;#xe6ef;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6fc;</span>
+                <div class="name">move</div>
+                <div class="code-name">&amp;#xe6fc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe708;</span>
+                <div class="name">sorting</div>
+                <div class="code-name">&amp;#xe708;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe715;</span>
+                <div class="name">exchange rate</div>
+                <div class="code-name">&amp;#xe715;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-compress-alt"></span>
+            <div class="name">
+              compress-alt
+            </div>
+            <div class="code-name">.icon-compress-alt
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-expand-alt"></span>
+            <div class="name">
+              expand-alt
+            </div>
+            <div class="code-name">.icon-expand-alt
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sort-line"></span>
+            <div class="name">
+              sort-line
+            </div>
+            <div class="code-name">.icon-sort-line
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-switch"></span>
+            <div class="name">
+              switch
+            </div>
+            <div class="code-name">.icon-switch
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrow-down"></span>
+            <div class="name">
+              arrow-down
+            </div>
+            <div class="code-name">.icon-arrow-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrow-right"></span>
+            <div class="name">
+              arrow-right
+            </div>
+            <div class="code-name">.icon-arrow-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrow-up"></span>
+            <div class="name">
+              arrow-up
+            </div>
+            <div class="code-name">.icon-arrow-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-arrow-lift"></span>
+            <div class="name">
+              arrow-lift
+            </div>
+            <div class="code-name">.icon-arrow-lift
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-move"></span>
+            <div class="name">
+              move
+            </div>
+            <div class="code-name">.icon-move
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-sorting"></span>
+            <div class="name">
+              sorting
+            </div>
+            <div class="code-name">.icon-sorting
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-exchangerate"></span>
+            <div class="name">
+              exchange rate
+            </div>
+            <div class="code-name">.icon-exchangerate
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-compress-alt"></use>
+                </svg>
+                <div class="name">compress-alt</div>
+                <div class="code-name">#icon-compress-alt</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-expand-alt"></use>
+                </svg>
+                <div class="name">expand-alt</div>
+                <div class="code-name">#icon-expand-alt</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sort-line"></use>
+                </svg>
+                <div class="name">sort-line</div>
+                <div class="code-name">#icon-sort-line</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-switch"></use>
+                </svg>
+                <div class="name">switch</div>
+                <div class="code-name">#icon-switch</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow-down"></use>
+                </svg>
+                <div class="name">arrow-down</div>
+                <div class="code-name">#icon-arrow-down</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow-right"></use>
+                </svg>
+                <div class="name">arrow-right</div>
+                <div class="code-name">#icon-arrow-right</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow-up"></use>
+                </svg>
+                <div class="name">arrow-up</div>
+                <div class="code-name">#icon-arrow-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-arrow-lift"></use>
+                </svg>
+                <div class="name">arrow-lift</div>
+                <div class="code-name">#icon-arrow-lift</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-move"></use>
+                </svg>
+                <div class="name">move</div>
+                <div class="code-name">#icon-move</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-sorting"></use>
+                </svg>
+                <div class="name">sorting</div>
+                <div class="code-name">#icon-sorting</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-exchangerate"></use>
+                </svg>
+                <div class="name">exchange rate</div>
+                <div class="code-name">#icon-exchangerate</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1574821180289'); /* IE9 */
+  src: url('iconfont.eot?t=1574821180289#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAYgAAsAAAAADDAAAAXQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCELAqJSIgCATYCJAMwCxoABCAFhG0HgSsbhwrIHgVuTPbukUVWc5xbENE79Wcl2VFObtCJW1aB2CUOKgVyHRlCzrNVYOcBEH85LtAjzCfC9PoF/p9jqRdpZUf57duZHdH9q8hVYjTQ3nhAo3H1RerW4KONZsOJ+nSIc7kp0Kmx3qU7BFD0ZgQyf+HyOkwM6DwBpCUZj2BmAhgNCwUTwV9xq4FciA9TO0t7F7gg+H45xDgxQcOnQz1VxRY0Es4dyk/Ws/9nWa9nyW4vBozuAh0YARggV1YmLkaPGiPQUYvpBjGghDvRIXcodyz3T6fZWZEflJ/8//8F7hHJwPyklXCIlSsIR+Ve/83zU4BJIQoLQUPHAPFDjgC4l9qtK2s0CB/kjiD8kDuKKIDcMYQJuX8ISTpNIBR0ViAsyA9ECOQHITTIT0LokJ9selaNx3R2V2A0SAvIB33uepfGXJlmoNGrgBimsMDPLNRaZK3QGVq3ujZX0wxD395QX1cf0NfXOQ1OF22379xR0kTUZ/kVsYaUoQqkwa3b7rhTlZSIW1+HS4uJOzPc+KyMM9ttnBWvk3dwZ2yf1ejOdjLUzqxzZldLtL5uVq0Sq2bLzCoLVT3DidfPqEFJ1axmI3jppUHT7OWVzux6X6R+hmMoX8c1d9yWCoaUpRxhKGgTrx4crKYHA1lo+nA1s4eECF0R6l9zTQ+5vrd1HZ9+Wqc+/3yrdsv4P6u3tw6GbUDKJiPaip7slpC9SEKqIGpwMNGHVCAteVODseC8YINisiAdgfZWtQaEJlhwTDkEW/CQpw6REaHglT3lFrK91PXS0eeLLxrO+WzFngOfOx11SASt0BZiltqw+KvBIntXnjjOiRNVW7+vz5GjVVVHjpzcUVvFhH5NlXvHlK4ZvtuCHzd1INnTEg3OsBs2dwShec/GVRu5fur19zkNidOykO2z97p7N67cuPsSDnfwS78PvFdZQVPeo2p/Ph8TdJD/8tD5d+dUVL5LNlFsIZ/HDp7R9729u7K7nrNPDxzaFTXzjXZ6+Iyy+0Z8W3ZG+HTtm13ZZnfpe6/vunn7OR5/4VSfMXBB9LaXvjh44LtHHpnctTCX+zb4PFPCWfXg4PGM3UJY02WzhEsu0jZzkj2HP+XVvnNLvJLb910jTun90olI2f6UsWGmb29RaeEb8+4epV/+xjuX+4oWsG9CSW34w6fDuxi9cPWZ1ofik1KRsYKO5tfkBLyPHyrIGJsqYTP650h1CRG0CrBF7hY+F866jcdK18+S1RUiugg6UGX/JL8xfFOPVJfnTu648sqznEq2y4ZjNb5BXUe9Oe/qEQMj3fe/eOPpsnD3GCtxEE1NCU9NKLNIdM1vXKiN0U1NQ3ofXwXyKLD/OMD/9Bf1MPw/4GO99EPQA1oXAO1e7Yos9+REUjsA6Xbt5fBO/c/0O1Sv73xhU/GMX03LAOBr/b8ZKPzPYPtjJhqojX8do3KbsTRTMGDMN8ecgQABvqXX9+YIUCjgj5Mp4/t9uCrU80EwqUhAo4BeoGMygGlwR4APiwngx2Q2KIaz6G6LctLoiFEIDOM0B4QSHgCNIl4AnRLeYxrc78BHJUfAT4nooHCkvEmLQZJU89JuxHMb7S077WQ01RaTsKfChTVufGtLJJ02B3LHTWeSZXvsqDH5iUVum5vexhWZbfFxnhezY+lUq73Q6c1taUnZ7elUkxv1RiU8r33a6NGxqicaFU21ophHGpcIHi6N2GxhJzZJoqRoI+bt76EKX1+DS5yttBAh3bDqQtPBJU2G5OFtxjKKMQrmIkebatVjWZ5hG3HG4fVqMWxio/kpWrFZ2Iu5tHAjhU179UlNuETxGEXCotbONEb3dotpHaP272p9xA8ACholIJroYohP/FIgphSKEksC0oXARby2Pe1mMiMjLZ5yd7RH2hrj5gszqbQ3siXZ5voz25NeNKEi6XRq+8hGE2yzMCedjCc8cxja2t50TEsy5hmtqW1uQeeTkm3xgLsjmoi0xW+yHwAAAAA=') format('woff2'),
+  url('iconfont.woff?t=1574821180289') format('woff'),
+  url('iconfont.ttf?t=1574821180289') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1574821180289#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transform: rotate(90deg)
+}
+
+.icon-compress-alt:before {
+  content: "\e825";
+}
+
+.icon-expand-alt:before {
+  content: "\e826";
+}
+
+.icon-sort-line:before {
+  content: "\e836";
+}
+
+.icon-switch:before {
+  content: "\e837";
+}
+
+.icon-arrow-down:before {
+  content: "\e6eb";
+}
+
+.icon-arrow-right:before {
+  content: "\e6ed";
+}
+
+.icon-arrow-up:before {
+  content: "\e6ee";
+}
+
+.icon-arrow-lift:before {
+  content: "\e6ef";
+}
+
+.icon-move:before {
+  content: "\e6fc";
+}
+
+.icon-sorting:before {
+  content: "\e708";
+}
+
+.icon-exchangerate:before {
+  content: "\e715";
+}
+

+!function(m){var l,a='<svg><symbol id="icon-compress-alt" viewBox="0 0 1024 1024"><path d="M638.4 305.28L879.616 64 960 144.384 718.464 385.92l132.16 133.248H512V177.792L638.4 305.28zM385.152 722.112L146.56 960.64l-80.384-80.384 238.272-238.272L173.376 512H512v336l-126.848-125.888z" fill="#373D41" ></path></symbol><symbol id="icon-expand-alt" viewBox="0 0 1024 1024"><path d="M833.6 277.952l-241.216 241.28L512 438.72l241.536-241.536L621.44 64H960v341.376l-126.4-127.36zM190.848 749.888L429.44 511.36l80.384 80.384-238.272 238.272L402.624 960H64V624l126.848 125.888z" fill="#262626" ></path></symbol><symbol id="icon-sort-line" viewBox="0 0 1024 1024"><path d="M326.08 670.72V64H455.04v768h-0.64l-0.192 128.128L64 599.296l88.064-87.68 174.016 159.104z m380.992-318.272v607.68H577.92V171.648l0.32 0.192L578.816 64 960 414.72l-79.68 94.976-173.248-157.248z" fill="#262626" ></path></symbol><symbol id="icon-switch" viewBox="0 0 1024 1024"><path d="M670.72 325.696L511.552 152l87.68-87.872 360.96 389.504L832 453.76v0.64H64V325.76h606.72z m-318.4 382.08l157.248 172.8-94.976 79.552L63.872 579.84l147.712-0.704v-0.128H960v128.768H352.32z" fill="#262626" ></path></symbol><symbol id="icon-arrow-down" viewBox="0 0 1024 1024"><path d="M500.8 604.778667L267.306667 371.392l-45.226667 45.269333 278.741333 278.613334 278.485334-278.613334-45.248-45.248z"  ></path></symbol><symbol id="icon-arrow-right" viewBox="0 0 1024 1024"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z"  ></path></symbol><symbol id="icon-arrow-up" viewBox="0 0 1024 1024"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z"  ></path></symbol><symbol id="icon-arrow-lift" viewBox="0 0 1024 1024"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z"  ></path></symbol><symbol id="icon-move" viewBox="0 0 1024 1024"><path d="M545.28 618.666667v135.04l51.093333-49.578667 44.586667 45.909333-126.442667 122.752-128.682666-122.517333 44.117333-46.357333 51.349333 48.853333-0.021333-134.122667h64z m204.757333-235.626667l122.752 126.442667-122.517333 128.682666-46.357333-44.117333 48.853333-51.349333H618.666667v-64h135.04l-49.578667-51.072 45.909333-44.586667z m-476.202666 0l45.909333 44.586667-49.6 51.072H405.333333v64h-134.229333l48.853333 51.349333-46.336 44.117333-122.517333-128.682666 122.730667-126.442667zM514.517333 151.210667l126.442667 122.752-44.586667 45.909333-51.072-49.578667L545.28 405.333333h-64v-134.101333l-51.328 48.853333-44.117333-46.357333 128.682666-122.517333z"  ></path></symbol><symbol id="icon-sorting" viewBox="0 0 1024 1024"><path d="M438.634667 192v644.202667l-0.810667 5.781333c-1.152 7.210667-2.304 8.704-8.64 17.002667l-7.168 3.925333c-15.914667 8.490667-18.282667 7.168-38.4-3.925333L149.333333 624.533333l45.269334-45.226666 180.032 180.138666V192h64z m216.96 10.005333l231.04 231.146667-45.269334 45.248L661.333333 298.261333V865.706667h-64V226.133333a34.133333 34.133333 0 0 1 58.282667-24.128z"  ></path></symbol><symbol id="icon-exchangerate" viewBox="0 0 1024 1024"><path d="M562.368 797.397333l-1.216 0.149334 5.333333-0.64-2.773333 0.32 2.965333-0.362667-0.213333 0.042667 0.277333-0.042667 1.130667-0.192 0.256-0.042667 1.472-0.170666 3.114667-0.469334-0.64 0.106667 1.344-0.234667 3.541333-0.576-1.472 0.256 0.789333-0.106666 1.770667-0.32 0.405333-0.085334 1.066667-0.192 0.64-0.085333 2.709333-0.512 1.706667-0.362667-1.344 0.298667 3.157333-0.64 2.88-0.576 1.152-0.277333-0.874666 0.213333 1.749333-0.405333 0.170667-0.064 0.341333-0.064 0.682667-0.106667 0.704-0.192 2.368-0.533333 2.901333-0.704-2.965333 0.704 3.413333-0.810667 1.152-0.298667-1.109333 0.277334 1.130666-0.277334 1.493334-0.362666 1.557333-0.426667 1.386667-0.384h0.149333l0.64-0.192 0.96-0.298667 1.621333-0.426666 1.216-0.362667 0.384-0.106667 1.856-0.512 0.490667-0.192 1.856-0.554666 0.554667-0.128 1.28-0.426667 1.621333-0.490667 0.213333-0.064 2.986667-0.96 2.944-1.002666 2.773333-0.96 0.597334-0.213334 2.645333-0.96 1.472-0.576-0.704 0.277334 1.152-0.426667 1.877333-0.704 1.408-0.533333 0.874667-0.341334 1.685333-0.64 1.472-0.618666 1.792-0.746667 0.213334-0.085333 1.578666-0.661334 0.405334-0.170666 3.050666-1.301334 1.322667-0.576 1.962667-0.874666 0.96-0.426667 0.362666-0.170667 0.042667-0.021333 2.090667-0.96 0.213333-0.106667 1.92-0.874666 2.858667-1.408 0.426666-0.213334 2.453334-1.194666 1.386666-0.704 2.325334-1.216 0.512-0.234667 2.389333-1.28 0.853333-0.448 2.048-1.130667 1.194667-0.64 1.130667-0.618666 2.816-1.6-2.816 1.578666 2.922666-1.642666 2.005334-1.194667-2.048 1.194667 2.368-1.365334 0.810666-0.448c1.706667-1.002667 3.370667-2.026667 5.034667-3.050666l-1.984 1.173333 4.266667-2.602667 2.816-1.792 4.16-2.752 1.216-0.810666 2.133333-1.472 1.493333-1.045334 1.066667-0.725333 0.405333-0.298667 0.917334-0.661333 1.173333-0.810667 2.496-1.813333 0.426667-0.341333 0.149333-0.106667 1.770667-1.322667 0.277333-0.213333 0.170667-0.106667 2.432-1.856 0.277333-0.234666 1.386667-1.088 3.328-2.624 4.906666-4.053334 2.389334-1.984 1.344-1.216 0.469333-0.405333 0.384-0.341333 0.149333-0.085334c2.901333-2.56 5.76-5.162667 8.597334-7.829333l3.925333-3.797333 3.84-3.861334 1.792-1.856 1.792-1.856 2.112-2.24v-0.021333l2.154667-2.346667 1.152-1.28 0.682666-0.746666 0.32-0.362667 0.448-0.533333 1.578667-1.792 1.685333-1.941334 0.256-0.298666 1.536-1.834667 0.384-0.426667 0.448-0.533333 1.898667-2.346667-0.554667 0.704 0.704-0.874666 1.408-1.706667 2.069334-2.602667 0.021333-0.085333 0.768-0.981333 0.704-0.853334-1.493333 1.92c2.474667-3.157333 4.906667-6.4 7.253333-9.642666l1.194667-1.706667 0.661333-0.896 1.834667-2.645333-0.938667 1.301333 4.608-6.741333a298.24 298.24 0 0 0 9.386667-15.253334l0.981333-1.813333-0.021333 0.064a70.4 70.4 0 0 0 1.066666-1.856l-0.554666 0.896 1.664-2.901333a297.216 297.216 0 0 0 15.189333-32.341334l1.770667-4.522666a296.256 296.256 0 0 0 9.173333-28.522667l1.408-5.418667a296.362667 296.362667 0 0 0 8.533333-61.653333l0.149334-10.090667-0.064-6.656a297.557333 297.557333 0 0 0-13.205334-81.557333h66.453334c7.082667 28.245333 10.816 57.792 10.816 88.213333 0 197.632-158.357333 358.272-355.114667 361.941334l-6.869333 0.064-6.890667-0.064a360.789333 360.789333 0 0 1-246.784-103.68v82.730666h-64v-208h186.005333v64H273.066667v0.810667h46.464c47.914667 59.434667 116.714667 92.629333 208.469333 100.181333l4.096-0.042666 4.181333-0.085334 4.928-0.213333 1.173334-0.064-1.066667 0.042667 1.109333-0.064 1.216-0.042667 1.386667-0.085333 1.109333-0.064-0.832 0.042666 1.386667-0.064c4.842667-0.32 9.664-0.768 14.442667-1.322666l0.704-0.085334 0.490666-0.085333 0.426667-0.042667-0.298667 0.042667 0.362667-0.021333-0.469333 0.042666z m-19.221333 1.642667l-0.704 0.042667-0.042667 0.021333 0.746667-0.064z m2.176-0.106667l-0.277334 0.021334-1.898666 0.085333 2.176-0.106667z m3.925333-0.277333l-2.56 0.213333-0.533333 0.021334 3.093333-0.213334z m12.864-1.216l-0.256 0.021333-0.234667 0.021334 0.490667-0.042667z m0.362667-0.064h-0.128l-0.234667 0.064 0.256-0.042667h0.106667z m4.373333-0.533333l-0.106667 0.021333h-0.064l0.170667-0.021333z m1.109333-0.170667h-0.085333l-0.512 0.085333 0.597333-0.085333z m3.050667-0.426667l-2.88 0.384-0.170667 0.042667 3.050667-0.426667z m2.666667-0.405333l-0.256 0.021333-0.704 0.128 0.96-0.149333z m6.144-1.024l-0.298667 0.021333-0.661333 0.128-0.405334 0.064-1.344 0.256 1.749334-0.32 0.96-0.149333z m27.498666-6.336l-1.045333 0.277333-0.917333 0.277334 1.962666-0.554667z m3.797334-1.066667l-1.621334 0.448-0.341333 0.085334 1.962667-0.533334z m5.333333-1.664l-0.917333 0.298667-1.045334 0.341333 1.962667-0.64z m15.530667-5.333333l-0.746667 0.256-0.448 0.149333 1.194667-0.405333z m1.962666-0.789333l-0.832 0.341333-0.874666 0.32 1.706666-0.64z m24.576-10.773334l-0.768 0.384-0.106666 0.064 0.874666-0.426666z m13.290667-6.954666l-0.896 0.469333-0.832 0.469333 1.728-0.938666zM275.626667 340.992l-0.405334 0.64 0.106667-0.149333 0.298667-0.490667z m43.754666-53.482667l-2.752 2.709334 2.773334-2.709334z m90.922667-60.373333l-0.810667 0.341333 0.277334-0.149333 0.533333-0.213333z m87.850667-22.272l-1.386667 0.149333-0.512 0.021334 1.898667-0.170667z m0.554666-0.064l-0.554666 0.064 0.490666-0.064h0.064z m0.32-0.021333l-0.384 0.021333-0.106666 0.042667-0.384 0.021333-1.984 0.192h0.085333-0.213333 0.128l-0.192 0.021333-1.066667 0.128-4.608 0.512 3.114667-0.362666-6.890667 0.853333-6.826667 1.002667-3.136 0.512 1.258667-0.213334-2.816 0.490667-1.045333 0.170667-1.749334 0.32-5.290666 1.045333-6.250667 1.344-1.6 0.362667-4.821333 1.152a295.786667 295.786667 0 0 0-7.978667 2.133333l0.832-0.256-1.792 0.512-2.56 0.746667-0.149333 0.042666-3.050667 0.917334-0.554667 0.149333-0.682666 0.213333-2.986667 0.938667-5.013333 1.685333a295.722667 295.722667 0 0 0-17.365334 6.549334l-1.216 0.469333 0.810667-0.32-0.832 0.32-0.362667 0.170667-1.578666 0.661333-0.704 0.32 0.426666-0.170667-1.984 0.853334h-0.021333l-1.408 0.64-2.304 1.024-0.149333 0.064-0.32 0.149333-2.133334 0.981333-3.050666 1.450667-0.085334 0.021333-2.837333 1.386667-0.896 0.448-1.578667 0.789333-0.128 0.064-1.109333 0.554667-1.941333 1.024-1.258667 0.64-1.066667 0.576-0.853333 0.448-0.512 0.256-0.704 0.384-0.149333 0.085333-0.682667 0.384-0.149333 0.085334a297.493333 297.493333 0 0 0-13.376 7.744l-0.448 0.277333-0.042667 0.021333-1.877333 1.173334-2.346667 1.493333-2.816 1.834667-0.490667 0.32-0.192 0.106666-2.517333 1.706667-0.149333 0.085333-2.090667 1.429334-1.557333 1.066666 1.066666-0.725333-4.522666 3.2-0.021334 0.021333-0.362666 0.256-1.962667 1.429334-2.325333 1.728-0.256 0.192-0.554667 0.426666-1.685333 1.258667 1.685333-1.258667-4.693333 3.626667a299.434667 299.434667 0 0 0-6.442667 5.205333l-1.130667 0.96-2.133333 1.813334-0.682667 0.554666-6.186666 5.504a299.84 299.84 0 0 0-18.88 18.816l-5.824 6.528-2.901334 3.413334-0.426666 0.490666-1.92 2.346667-1.941334 2.368-1.088 1.365333-1.173333 1.493334-1.813333 2.346666-1.344 1.770667-0.149334 0.213333-0.277333 0.32-1.216 1.664-0.341333 0.448-2.005334 2.773334-0.981333 1.344-0.832 1.152 0.064-0.064-0.533333 0.789333-1.344 1.92-0.896 1.28-0.832 1.237333-0.085334 0.149334-0.234666 0.32-1.237334 1.856-0.298666 0.490666-1.365334 2.090667-0.853333 1.322667-0.149333 0.234666-3.648 5.909334-4.437334 7.594666-4.224 7.722667c-0.725333 1.386667-1.450667 2.773333-2.154666 4.202667l-0.384 0.704-0.042667 0.128-1.109333 2.197333 1.109333-2.218667-2.709333 5.546667a296.533333 296.533333 0 0 0-2.986667 6.485333l-0.426667 0.981334-0.192 0.384-0.256 0.597333a296.085333 296.085333 0 0 0-20.416 67.413333l-0.981333 5.888a297.962667 297.962667 0 0 0-3.562667 46.272c0 30.549333 4.608 60.053333 13.141334 87.808H175.488a362.794667 362.794667 0 0 1-10.730667-87.808c0-24.32 2.389333-48.064 6.954667-71.018666 33.002667-165.930667 179.413333-290.986667 355.050667-290.986667 93.504 0 178.752 35.456 242.986666 93.674667V128.512h64v208h-185.984v-64h56.426667c-43.456-38.4-99.754667-61.013333-169.877333-68.181333l-8.810667-0.810667-5.056 0.064-5.184 0.149333-2.624 0.106667h-0.384l-0.469333 0.042667h0.170666l0.298667-0.042667h0.576H512.277333l-0.192 0.021333h-0.128l-0.384 0.021334h-0.085333l-0.128 0.021333h-0.128l-0.234667 0.021333-0.981333 0.064 0.512-0.042666h0.469333l0.277334-0.042667h0.512l-1.258667 0.042667-1.194667 0.085333-3.157333 0.170667 3.84-0.213334-0.618667 0.021334-3.285333 0.213333-0.981333 0.042667-2.133334 0.192-1.408 0.085333-1.237333 0.106667h0.149333l1.088-0.106667 0.64-0.021333-1.728 0.106666-0.362666 0.064-1.109334 0.085334z m6.826667-0.533334l-2.816 0.213334 2.090667-0.192 0.725333-0.021334z m5.184-0.32l-1.642667 0.085334 1.322667-0.085334h0.32z m0.277333 0l0.128-0.042666h0.64l0.106667-0.042667h0.64-0.64l-0.746667 0.042667-0.405333 0.042666h0.277333z m51.904 593.344l-0.021333 0.021334h-0.085333 0.106666l0.405334-0.064-0.362667 0.064h-0.042667z m29.141334-5.034666l-0.554667 0.128-0.170667 0.021333 0.725334-0.149333z"  ></path></symbol></svg>',t=(l=document.getElementsByTagName("script"))[l.length-1].getAttribute("data-injectcss");if(t&&!m.__iconfont__svg__cssinject__){m.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(l){console&&console.log(l)}}!function(l){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(l,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),l()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=l,i=m.document,n=!1,(a=function(){try{i.documentElement.doScroll("left")}catch(l){return void setTimeout(a,50)}e()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,e())});function e(){n||(n=!0,o())}var o,i,n,a}(function(){var l,t,e,o,i,n;(l=document.createElement("div")).innerHTML=a,a=null,(t=l.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",e=t,(o=document.body).firstChild?(i=e,(n=o.firstChild).parentNode.insertBefore(i,n)):o.appendChild(e))})}(window);

+{
+  "id": "1525688",
+  "name": "icon",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "6151288",
+      "name": "compress-alt",
+      "font_class": "compress-alt",
+      "unicode": "e825",
+      "unicode_decimal": 59429
+    },
+    {
+      "icon_id": "6151289",
+      "name": "expand-alt",
+      "font_class": "expand-alt",
+      "unicode": "e826",
+      "unicode_decimal": 59430
+    },
+    {
+      "icon_id": "6151312",
+      "name": "sort-line",
+      "font_class": "sort-line",
+      "unicode": "e836",
+      "unicode_decimal": 59446
+    },
+    {
+      "icon_id": "6151314",
+      "name": "switch",
+      "font_class": "switch",
+      "unicode": "e837",
+      "unicode_decimal": 59447
+    },
+    {
+      "icon_id": "11474197",
+      "name": "arrow-down",
+      "font_class": "arrow-down",
+      "unicode": "e6eb",
+      "unicode_decimal": 59115
+    },
+    {
+      "icon_id": "11474198",
+      "name": "arrow-right",
+      "font_class": "arrow-right",
+      "unicode": "e6ed",
+      "unicode_decimal": 59117
+    },
+    {
+      "icon_id": "11474210",
+      "name": "arrow-up",
+      "font_class": "arrow-up",
+      "unicode": "e6ee",
+      "unicode_decimal": 59118
+    },
+    {
+      "icon_id": "11474211",
+      "name": "arrow-lift",
+      "font_class": "arrow-lift",
+      "unicode": "e6ef",
+      "unicode_decimal": 59119
+    },
+    {
+      "icon_id": "11474294",
+      "name": "move",
+      "font_class": "move",
+      "unicode": "e6fc",
+      "unicode_decimal": 59132
+    },
+    {
+      "icon_id": "11474361",
+      "name": "sorting",
+      "font_class": "sorting",
+      "unicode": "e708",
+      "unicode_decimal": 59144
+    },
+    {
+      "icon_id": "11481231",
+      "name": "exchange rate",
+      "font_class": "exchangerate",
+      "unicode": "e715",
+      "unicode_decimal": 59157
+    }
+  ]
+}

+<?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" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="compress-alt" unicode="&#59429;" d="M638.4 590.72L879.616 832 960 751.616 718.464 510.08l132.16-133.248H512V718.208L638.4 590.72zM385.152 173.888L146.56-64.64l-80.384 80.384 238.272 238.272L173.376 384H512v-336l-126.848 125.888z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="expand-alt" unicode="&#59430;" d="M833.6 618.048l-241.216-241.28L512 457.28l241.536 241.536L621.44 832H960v-341.376l-126.4 127.36zM190.848 146.112L429.44 384.64l80.384-80.384-238.272-238.272L402.624-64H64V272l126.848-125.888z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sort-line" unicode="&#59446;" d="M326.08 225.27999999999997V832H455.04v-768h-0.64l-0.192-128.128L64 296.70399999999995l88.064 87.68 174.016-159.104z m380.992 318.272v-607.68H577.92V724.352l0.32-0.192L578.816 832 960 481.28l-79.68-94.976-173.248 157.248z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="switch" unicode="&#59447;" d="M670.72 570.304L511.552 744l87.68 87.872 360.96-389.504L832 442.24v-0.64H64V570.24h606.72z m-318.4-382.08l157.248-172.8-94.976-79.552L63.872 316.16l147.712 0.704v0.128H960v-128.768H352.32z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-down" unicode="&#59115;" d="M500.8 291.221333L267.306667 524.608l-45.226667-45.269333 278.741333-278.613334 278.485334 278.613334-45.248 45.248z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-right" unicode="&#59117;" d="M593.450667 383.872L360.064 617.386667l45.290667 45.226666 278.613333-278.762666L405.333333 105.386667l-45.226666 45.269333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-up" unicode="&#59118;" d="M500.8 434.090667L267.306667 200.704l-45.226667 45.269333 278.741333 278.613334L779.306667 245.973333l-45.248-45.226666z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrow-lift" unicode="&#59119;" d="M641.28 617.386667l-45.226667 45.226666-278.634666-278.762666 278.613333-278.485334 45.248 45.269334-233.365333 233.237333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="move" unicode="&#59132;" d="M545.28 277.333333v-135.04l51.093333 49.578667 44.586667-45.909333-126.442667-122.752-128.682666 122.517333 44.117333 46.357333 51.349333-48.853333-0.021333 134.122667h64z m204.757333 235.626667l122.752-126.442667-122.517333-128.682666-46.357333 44.117333 48.853333 51.349333H618.666667v64h135.04l-49.578667 51.072 45.909333 44.586667z m-476.202666 0l45.909333-44.586667-49.6-51.072H405.333333v-64h-134.229333l48.853333-51.349333-46.336-44.117333-122.517333 128.682666 122.730667 126.442667zM514.517333 744.789333l126.442667-122.752-44.586667-45.909333-51.072 49.578667L545.28 490.666667h-64v134.101333l-51.328-48.853333-44.117333 46.357333 128.682666 122.517333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="sorting" unicode="&#59144;" d="M438.634667 704v-644.202667l-0.810667-5.781333c-1.152-7.210667-2.304-8.704-8.64-17.002667l-7.168-3.925333c-15.914667-8.490667-18.282667-7.168-38.4 3.925333L149.333333 271.466667l45.269334 45.226666 180.032-180.138666V704h64z m216.96-10.005333l231.04-231.146667-45.269334-45.248L661.333333 597.738667V30.293333h-64V669.866667a34.133333 34.133333 0 0 0 58.282667 24.128z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="exchangerate" unicode="&#59157;" d="M562.368 98.602667l-1.216-0.149334 5.333333 0.64-2.773333-0.32 2.965333 0.362667-0.213333-0.042667 0.277333 0.042667 1.130667 0.192 0.256 0.042667 1.472 0.170666 3.114667 0.469334-0.64-0.106667 1.344 0.234667 3.541333 0.576-1.472-0.256 0.789333 0.106666 1.770667 0.32 0.405333 0.085334 1.066667 0.192 0.64 0.085333 2.709333 0.512 1.706667 0.362667-1.344-0.298667 3.157333 0.64 2.88 0.576 1.152 0.277333-0.874666-0.213333 1.749333 0.405333 0.170667 0.064 0.341333 0.064 0.682667 0.106667 0.704 0.192 2.368 0.533333 2.901333 0.704-2.965333-0.704 3.413333 0.810667 1.152 0.298667-1.109333-0.277334 1.130666 0.277334 1.493334 0.362666 1.557333 0.426667 1.386667 0.384h0.149333l0.64 0.192 0.96 0.298667 1.621333 0.426666 1.216 0.362667 0.384 0.106667 1.856 0.512 0.490667 0.192 1.856 0.554666 0.554667 0.128 1.28 0.426667 1.621333 0.490667 0.213333 0.064 2.986667 0.96 2.944 1.002666 2.773333 0.96 0.597334 0.213334 2.645333 0.96 1.472 0.576-0.704-0.277334 1.152 0.426667 1.877333 0.704 1.408 0.533333 0.874667 0.341334 1.685333 0.64 1.472 0.618666 1.792 0.746667 0.213334 0.085333 1.578666 0.661334 0.405334 0.170666 3.050666 1.301334 1.322667 0.576 1.962667 0.874666 0.96 0.426667 0.362666 0.170667 0.042667 0.021333 2.090667 0.96 0.213333 0.106667 1.92 0.874666 2.858667 1.408 0.426666 0.213334 2.453334 1.194666 1.386666 0.704 2.325334 1.216 0.512 0.234667 2.389333 1.28 0.853333 0.448 2.048 1.130667 1.194667 0.64 1.130667 0.618666 2.816 1.6-2.816-1.578666 2.922666 1.642666 2.005334 1.194667-2.048-1.194667 2.368 1.365334 0.810666 0.448c1.706667 1.002667 3.370667 2.026667 5.034667 3.050666l-1.984-1.173333 4.266667 2.602667 2.816 1.792 4.16 2.752 1.216 0.810666 2.133333 1.472 1.493333 1.045334 1.066667 0.725333 0.405333 0.298667 0.917334 0.661333 1.173333 0.810667 2.496 1.813333 0.426667 0.341333 0.149333 0.106667 1.770667 1.322667 0.277333 0.213333 0.170667 0.106667 2.432 1.856 0.277333 0.234666 1.386667 1.088 3.328 2.624 4.906666 4.053334 2.389334 1.984 1.344 1.216 0.469333 0.405333 0.384 0.341333 0.149333 0.085334c2.901333 2.56 5.76 5.162667 8.597334 7.829333l3.925333 3.797333 3.84 3.861334 1.792 1.856 1.792 1.856 2.112 2.24v0.021333l2.154667 2.346667 1.152 1.28 0.682666 0.746666 0.32 0.362667 0.448 0.533333 1.578667 1.792 1.685333 1.941334 0.256 0.298666 1.536 1.834667 0.384 0.426667 0.448 0.533333 1.898667 2.346667-0.554667-0.704 0.704 0.874666 1.408 1.706667 2.069334 2.602667 0.021333 0.085333 0.768 0.981333 0.704 0.853334-1.493333-1.92c2.474667 3.157333 4.906667 6.4 7.253333 9.642666l1.194667 1.706667 0.661333 0.896 1.834667 2.645333-0.938667-1.301333 4.608 6.741333a298.24 298.24 0 0 1 9.386667 15.253334l0.981333 1.813333-0.021333-0.064a70.4 70.4 0 0 1 1.066666 1.856l-0.554666-0.896 1.664 2.901333a297.216 297.216 0 0 1 15.189333 32.341334l1.770667 4.522666a296.256 296.256 0 0 1 9.173333 28.522667l1.408 5.418667a296.362667 296.362667 0 0 1 8.533333 61.653333l0.149334 10.090667-0.064 6.656a297.557333 297.557333 0 0 1-13.205334 81.557333h66.453334c7.082667-28.245333 10.816-57.792 10.816-88.213333 0-197.632-158.357333-358.272-355.114667-361.941334l-6.869333-0.064-6.890667 0.064a360.789333 360.789333 0 0 0-246.784 103.68v-82.730666h-64v208h186.005333v-64H273.066667v-0.810667h46.464c47.914667-59.434667 116.714667-92.629333 208.469333-100.181333l4.096 0.042666 4.181333 0.085334 4.928 0.213333 1.173334 0.064-1.066667-0.042667 1.109333 0.064 1.216 0.042667 1.386667 0.085333 1.109333 0.064-0.832-0.042666 1.386667 0.064c4.842667 0.32 9.664 0.768 14.442667 1.322666l0.704 0.085334 0.490666 0.085333 0.426667 0.042667-0.298667-0.042667 0.362667 0.021333-0.469333-0.042666z m-19.221333-1.642667l-0.704-0.042667-0.042667-0.021333 0.746667 0.064z m2.176 0.106667l-0.277334-0.021334-1.898666-0.085333 2.176 0.106667z m3.925333 0.277333l-2.56-0.213333-0.533333-0.021334 3.093333 0.213334z m12.864 1.216l-0.256-0.021333-0.234667-0.021334 0.490667 0.042667z m0.362667 0.064h-0.128l-0.234667-0.064 0.256 0.042667h0.106667z m4.373333 0.533333l-0.106667-0.021333h-0.064l0.170667 0.021333z m1.109333 0.170667h-0.085333l-0.512-0.085333 0.597333 0.085333z m3.050667 0.426667l-2.88-0.384-0.170667-0.042667 3.050667 0.426667z m2.666667 0.405333l-0.256-0.021333-0.704-0.128 0.96 0.149333z m6.144 1.024l-0.298667-0.021333-0.661333-0.128-0.405334-0.064-1.344-0.256 1.749334 0.32 0.96 0.149333z m27.498666 6.336l-1.045333-0.277333-0.917333-0.277334 1.962666 0.554667z m3.797334 1.066667l-1.621334-0.448-0.341333-0.085334 1.962667 0.533334z m5.333333 1.664l-0.917333-0.298667-1.045334-0.341333 1.962667 0.64z m15.530667 5.333333l-0.746667-0.256-0.448-0.149333 1.194667 0.405333z m1.962666 0.789333l-0.832-0.341333-0.874666-0.32 1.706666 0.64z m24.576 10.773334l-0.768-0.384-0.106666-0.064 0.874666 0.426666z m13.290667 6.954666l-0.896-0.469333-0.832-0.469333 1.728 0.938666zM275.626667 555.008l-0.405334-0.64 0.106667 0.149333 0.298667 0.490667z m43.754666 53.482667l-2.752-2.709334 2.773334 2.709334z m90.922667 60.373333l-0.810667-0.341333 0.277334 0.149333 0.533333 0.213333z m87.850667 22.272l-1.386667-0.149333-0.512-0.021334 1.898667 0.170667z m0.554666 0.064l-0.554666-0.064 0.490666 0.064h0.064z m0.32 0.021333l-0.384-0.021333-0.106666-0.042667-0.384-0.021333-1.984-0.192h0.085333-0.213333 0.128l-0.192-0.021333-1.066667-0.128-4.608-0.512 3.114667 0.362666-6.890667-0.853333-6.826667-1.002667-3.136-0.512 1.258667 0.213334-2.816-0.490667-1.045333-0.170667-1.749334-0.32-5.290666-1.045333-6.250667-1.344-1.6-0.362667-4.821333-1.152a295.786667 295.786667 0 0 1-7.978667-2.133333l0.832 0.256-1.792-0.512-2.56-0.746667-0.149333-0.042666-3.050667-0.917334-0.554667-0.149333-0.682666-0.213333-2.986667-0.938667-5.013333-1.685333a295.722667 295.722667 0 0 1-17.365334-6.549334l-1.216-0.469333 0.810667 0.32-0.832-0.32-0.362667-0.170667-1.578666-0.661333-0.704-0.32 0.426666 0.170667-1.984-0.853334h-0.021333l-1.408-0.64-2.304-1.024-0.149333-0.064-0.32-0.149333-2.133334-0.981333-3.050666-1.450667-0.085334-0.021333-2.837333-1.386667-0.896-0.448-1.578667-0.789333-0.128-0.064-1.109333-0.554667-1.941333-1.024-1.258667-0.64-1.066667-0.576-0.853333-0.448-0.512-0.256-0.704-0.384-0.149333-0.085333-0.682667-0.384-0.149333-0.085334a297.493333 297.493333 0 0 1-13.376-7.744l-0.448-0.277333-0.042667-0.021333-1.877333-1.173334-2.346667-1.493333-2.816-1.834667-0.490667-0.32-0.192-0.106666-2.517333-1.706667-0.149333-0.085333-2.090667-1.429334-1.557333-1.066666 1.066666 0.725333-4.522666-3.2-0.021334-0.021333-0.362666-0.256-1.962667-1.429334-2.325333-1.728-0.256-0.192-0.554667-0.426666-1.685333-1.258667 1.685333 1.258667-4.693333-3.626667a299.434667 299.434667 0 0 1-6.442667-5.205333l-1.130667-0.96-2.133333-1.813334-0.682667-0.554666-6.186666-5.504a299.84 299.84 0 0 1-18.88-18.816l-5.824-6.528-2.901334-3.413334-0.426666-0.490666-1.92-2.346667-1.941334-2.368-1.088-1.365333-1.173333-1.493334-1.813333-2.346666-1.344-1.770667-0.149334-0.213333-0.277333-0.32-1.216-1.664-0.341333-0.448-2.005334-2.773334-0.981333-1.344-0.832-1.152 0.064 0.064-0.533333-0.789333-1.344-1.92-0.896-1.28-0.832-1.237333-0.085334-0.149334-0.234666-0.32-1.237334-1.856-0.298666-0.490666-1.365334-2.090667-0.853333-1.322667-0.149333-0.234666-3.648-5.909334-4.437334-7.594666-4.224-7.722667c-0.725333-1.386667-1.450667-2.773333-2.154666-4.202667l-0.384-0.704-0.042667-0.128-1.109333-2.197333 1.109333 2.218667-2.709333-5.546667a296.533333 296.533333 0 0 1-2.986667-6.485333l-0.426667-0.981334-0.192-0.384-0.256-0.597333a296.085333 296.085333 0 0 1-20.416-67.413333l-0.981333-5.888a297.962667 297.962667 0 0 1-3.562667-46.272c0-30.549333 4.608-60.053333 13.141334-87.808H175.488a362.794667 362.794667 0 0 0-10.730667 87.808c0 24.32 2.389333 48.064 6.954667 71.018666 33.002667 165.930667 179.413333 290.986667 355.050667 290.986667 93.504 0 178.752-35.456 242.986666-93.674667V767.488h64v-208h-185.984v64h56.426667c-43.456 38.4-99.754667 61.013333-169.877333 68.181333l-8.810667 0.810667-5.056-0.064-5.184-0.149333-2.624-0.106667h-0.384l-0.469333-0.042667h0.170666l0.298667 0.042667h0.576H512.277333l-0.192-0.021333h-0.128l-0.384-0.021334h-0.085333l-0.128-0.021333h-0.128l-0.234667-0.021333-0.981333-0.064 0.512 0.042666h0.469333l0.277334 0.042667h0.512l-1.258667-0.042667-1.194667-0.085333-3.157333-0.170667 3.84 0.213334-0.618667-0.021334-3.285333-0.213333-0.981333-0.042667-2.133334-0.192-1.408-0.085333-1.237333-0.106667h0.149333l1.088 0.106667 0.64 0.021333-1.728-0.106666-0.362666-0.064-1.109334-0.085334z m6.826667 0.533334l-2.816-0.213334 2.090667 0.192 0.725333 0.021334z m5.184 0.32l-1.642667-0.085334 1.322667 0.085334h0.32z m0.277333 0l0.128 0.042666h0.64l0.106667 0.042667h0.64-0.64l-0.746667-0.042667-0.405333-0.042666h0.277333z m51.904-593.344l-0.021333-0.021334h-0.085333 0.106666l0.405334 0.064-0.362667-0.064h-0.042667z m29.141334 5.034666l-0.554667-0.128-0.170667-0.021333 0.725334 0.149333z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

@@ -51,6 +51,39 @@ const routes = [{
 		path: '/operationMaintenance/config',
 		path: '/operationMaintenance/config',
 		name: 'operationMaintenanceConfig',
 		name: 'operationMaintenanceConfig',
 		component: () => myImport('views/operationMaintenance/config/index')
 		component: () => myImport('views/operationMaintenance/config/index')
+	},{
+		path: '/bigscreen',
+		name: 'zjBigScreen',
+		component: () => myImport('views/dp/index')
+	},
+	,{
+		path: '/topfive',
+		name: 'topfive',
+		component: () => myImport('views/dp/components/topfive/index')
+	},{
+		path: '/availability',
+		name: 'availability',
+		component: () => myImport('views/dp/components/availability/index')
+	},
+	{
+		path: '/responsemonitor',
+		name: 'responsemonitor',
+		component: () => myImport('views/dp/components/responseMonitor/index')
+	},
+	{
+		path: '/bandwidthcpu',
+		name: 'bandwidthcpu',
+		component: () => myImport('views/dp/components/bandwidthCpu/index')
+	},
+	{
+		path: '/digitalboardtop',
+		name: 'digitalboardtop',
+		component: () => myImport('views/dp/components/digitalBoardTop/index')
+	},
+	{
+		path: '/deduction',
+		name: 'deduction',
+		component: () => myImport('views/dp/components/deduction/index')
 	}
 	}
 ];
 ];
 
 

+<div class="com-container">
+    <div class="com-chart" id="availability_ref"></div>
+    <div class="topfive-box-title">
+        <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->
+        <span :style="comtitleTextStyle" class="topfive-title-size">业务可用性</span>
+    </div>
+</div>

+export default {
+    name: 'Availability',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: {
+                polyline: {
+                    title: "业务可用性",
+                    unit: "%",
+                    data: {
+                        name: "占比",
+                        data: ["67","70","80","71","90","92","72","70","56","45","89","100"]
+                    }
+                },
+                xAxis: {
+                    time: ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]
+                }
+            },
+            startValue: 0, // 区域缩放的起点值
+            endValue: 6, // 区域缩放的终点值
+            timerId: null // 定时器的标识
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+        clearInterval(this.timerId)
+    },
+    computed: {
+        comtitleTextStyle () {
+            return {
+                fontSize: this.titleFontSize / 2 + 'px'
+            }
+        },
+        comtitleImgStyle () {
+            return {
+                height: this.titleFontSize * 1.2 + 'px',
+                width: this.titleFontSize * 8 + 'px'
+            }
+        }
+    },
+    methods: {
+        initChart () {
+            this.chartInstance = echarts.init(document.getElementById('availability_ref'))
+            const initOption = {
+                grid: {
+                    top: '25%',
+                    left: '3%',
+                    right: '6%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+                    right: '2%',
+                    top: '5%'
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('responsemonitor')
+            // this.allData = ret
+            // console.log(ret)
+            this.updateChart()
+            this.startInterval()
+        },
+        updateChart () {
+            // 半透明的颜色值
+            const colorArr1 = [
+                'rgba(11, 168, 44, 0.5)',
+                'rgba(44, 110, 255, 0.5)',
+                'rgba(22, 242, 217, 0.5)',
+                'rgba(254, 33, 30, 0.5)',
+                'rgba(250, 105, 0, 0.5)'
+            ]
+            //   全透明的颜色值
+            const colorArr2 = [
+                'rgba(11, 168, 44, 0)',
+                'rgba(44, 110, 255, 0)',
+                'rgba(22, 242, 217, 0)',
+                'rgba(254, 33, 30, 0)',
+                'rgba(250, 105, 0, 0)'
+            ]
+            const timeArr = this.allData.xAxis.today
+            const seriesData = this.allData.polyline.data.data
+            const seriesName = this.allData.polyline.data.name
+            // 图例的数据
+            const legendArr = this.allData.polyline.data.data.map(item => {
+                return item.name
+            })
+            console.log(legendArr)
+            const title = this.allData.polyline.title
+            const unit = this.allData.polyline.unit
+            const dataOption = {
+                // title: {
+                //     text: '{Sunny|    业务可用性    }',
+                //     show: true
+                // },
+                xAxis: {
+                    data: timeArr
+                },
+                legend: {
+                    data: legendArr
+                },
+                dataZoom: {
+                    show: false,
+                    startValue: this.startValue,
+                    endValue: this.endValue
+                },
+                series: [
+                    {
+                        name: seriesName,
+                        type: 'line',
+                        data: seriesData,
+                        smooth: true,
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: colorArr1[2]
+                                }, // %0的颜色值
+                                {
+                                    offset: 1,
+                                    color: colorArr2[2]
+                                } // 100%的颜色值
+                            ])
+                        }
+                    }
+                ]
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
+            const adapterOption = {
+                // title: {
+                //     left: this.titleFontSize * 2,
+                //     textStyle: {
+                //         fontSize: this.titleFontSize,
+                //         color: '#F0F3F8'
+                //         // rich: {
+                //         //     Sunny: {
+                //         //         // 这样设定 backgroundColor 就可以是图片了。
+                //         //         backgroundColor: {
+                //         //             image: require('../assets/img/bg_box_3.png')
+                //         //         },
+                //         //         // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
+                //         //         height: this.titleFontSize * 1.5
+                //         //     }
+                //         // }
+                //     }
+                // },
+                legend: {
+                    itemWidth: this.titleFontSize,
+                    itemHeight: this.titleFontSize,
+                    itemGap: this.titleFontSize,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 2
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        },
+        startInterval () {
+            if (this.timerId) {
+                clearInterval(this.timerId)
+            }
+            let index = 12
+            this.timerId = setInterval(() => {
+                this.startValue++
+                this.endValue++
+                // this.allData.polyline.data
+                // console.log((this.allData.polyline.data)[0].data.length)
+                if ((this.allData.polyline.data).length > 0) {
+                    index = (this.allData.polyline.data)[0].data.length
+                }
+                if (this.endValue > index - 1) {
+                    this.startValue = 0
+                    this.endValue = 6
+                }
+                console.log(this.startValue)
+                console.log(this.endValue)
+                this.updateChart()
+            }, 5000)
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="bandwidthcpu_ref"></div>
+</div>

+export default {
+    name: 'BandwidthCpu',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: {
+                polyline: {
+                    title: "带宽占用监控",
+                    unit: "MB",
+                    data: [{
+                        name: "入带宽",
+                        data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
+                    }, {
+                        name: "出带宽",
+                        data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
+                    }]
+                },
+                xAxis: {
+                    today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
+                }
+            },
+            startValue: 0, // 区域缩放的起点值
+            endValue: 6, // 区域缩放的终点值
+            timerId: null // 定时器的标识
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+        clearInterval(this.timerId)
+    },
+    methods: {
+        initChart () {
+            this.chartInstance = echarts.init(document.getElementById('bandwidthcpu_ref'))
+            const initOption = {
+                grid: {
+                    top: '15%',
+                    left: '5%',
+                    right: '4%',
+                    bottom: '20%',
+                    containLabel: true
+                },
+                legend: {
+                    right: '10%',
+                    top: '5%',
+                    textStyle: {
+                        color: 'wihte'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('bandwidthcpu')
+            // this.allData = ret
+            // console.log(ret)
+            this.updateChart()
+            this.startInterval()
+        },
+        updateChart () {
+            // 半透明的颜色值
+            const colorArr1 = [
+                'rgba(11, 168, 44, 0.5)',
+                'rgba(44, 110, 255, 0.5)',
+                'rgba(22, 242, 217, 0.5)',
+                'rgba(254, 33, 30, 0.5)',
+                'rgba(250, 105, 0, 0.5)'
+            ]
+            // 全透明的颜色值
+            const colorArr2 = [
+                'rgba(11, 168, 44, 0)',
+                'rgba(44, 110, 255, 0)',
+                'rgba(22, 242, 217, 0)',
+                'rgba(254, 33, 30, 0)',
+                'rgba(250, 105, 0, 0)'
+            ]
+            const timeArr = this.allData.xAxis.today
+            const seriesArr = this.allData.polyline.data.map((item, index) => {
+                return {
+                    name: item.name,
+                    type: 'line',
+                    data: item.data,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: colorArr1[index]
+                            }, // %0的颜色值
+                            {
+                                offset: 1,
+                                color: colorArr2[index]
+                            } // 100%的颜色值
+                        ])
+                    }
+                }
+            })
+            // 图例的数据
+            const legendArr = this.allData.polyline.data.map(item => {
+                return item.name
+            })
+            const title = this.allData.polyline.title
+            const unit = this.allData.polyline.unit
+            const dataOption = {
+                title: {
+                    text: title,
+                    left: 'center',
+                    bottom: '8%'
+                },
+                xAxis: {
+                    data: timeArr
+                },
+                yAxis: {
+                    name: unit
+                },
+                legend: {
+                    data: legendArr
+                },
+                dataZoom: {
+                    show: false,
+                    startValue: this.startValue,
+                    endValue: this.endValue
+                },
+                series: seriesArr
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('bandwidthcpu_ref').offsetWidth / 100 * 3.6
+            const adapterOption = {
+                title: {
+                    textStyle: {
+                        fontSize: this.titleFontSize,
+                        color: 'white'
+                    }
+                },
+                yAxis: {
+                    top: this.titleFontSize,
+                    nameTextStyle: {
+                        padding: [0, 0, -(this.titleFontSize), -(this.titleFontSize)], // 修改位置
+                        fontSize: this.titleFontSize / 2,
+                        color: 'white'
+                    },
+                    axisLabel: {
+                        show: false
+                    }
+                },
+                legend: {
+                    itemWidth: this.titleFontSize,
+                    itemHeight: this.titleFontSize,
+                    itemGap: this.titleFontSize,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 1.5
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        },
+        startInterval () {
+            if (this.timerId) {
+                clearInterval(this.timerId)
+            }
+            let index = 12
+            this.timerId = setInterval(() => {
+                this.startValue++
+                this.endValue++
+                // this.allData.polyline.data
+                // console.log((this.allData.polyline.data)[0].data.length)
+                if ((this.allData.polyline.data).length > 0) {
+                    index = (this.allData.polyline.data)[0].data.length
+                }
+                if (this.endValue > index - 1) {
+                    this.startValue = 0
+                    this.endValue = 6
+                }
+                console.log(this.startValue)
+                console.log(this.endValue)
+                this.updateChart()
+            }, 5000)
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="volume_ref"></div>
+    <div class="busniess-box-title">
+        <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="busniess-title-img"> <!-- bor1_6 -->
+        <span :style="comtitleTextStyle" class="busniess-title-size">本月业务量</span>
+    </div>
+    <div class="busniess-circle-text" :style="comcircletextStyle">
+        <div class="busniess-circle-left">今日<br/>业务量</div>
+        <div class="busniess-circle-right">本月<br/>业务量</div>
+    </div>
+</div>

+export default {
+    name: 'BusinessVolume',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: [{
+                name: "今日业务量",
+                data: [
+                    { name: "涉税文书",value: "116211", color: "#0D45FE"},
+                    { name: "网上申报",value: "106195", color: "#00FFB9"},
+                    { name: "网络发票",value: "712804", color: "#A35CFF"}
+                ]
+            }, {
+                name: "本月业务量",
+                data: [
+                    { name: "涉税文书",value: "116411", color: "#0D45FE"},
+                    { name: "网上申报",value: "106595", color: "#00FFB9"},
+                    { name: "网络发票",value: "712204", color: "#A35CFF"}
+                ]
+            }],
+            titleFontSize: 30
+        }
+    },
+    computed: {
+        comtitleTextStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.3 + 'px'
+            }
+        },
+        comtitleImgStyle () {
+            return {
+                height: this.titleFontSize * 1.5 + 'px'
+            }
+        },
+        comcircletextStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.8 + 'px'
+            }
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+    },
+    methods: {
+        initChart () {
+            // this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons')
+            this.chartInstance = echarts.init(document.getElementById('volume_ref'))
+            const initOption = {
+                legend: {
+                    top: '20%',
+                    left: 'center',
+                    textStyle: {
+                        color: 'wihte'
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('volume')
+            // this.allData = ret
+            // console.log(ret)
+            this.updateChart()
+        },
+        updateChart () {
+            const centerArr = [
+                ['22%', '65%'],
+                ['66%', '65%']
+            ]
+            const seriesArr = this.allData.map((item, index) => {
+                const dataArr = []
+                item.data.map(inner => {
+                    console.log(inner)
+                    dataArr.push({
+                        name: inner.name,
+                        value: inner.value,
+                        itemStyle: {
+                            color: inner.color
+                        }
+                    })
+                })
+                return {
+                    type: 'pie',
+                    radius: ['28%', '42%'],
+                    center: centerArr[index],
+                    itemStyle: {
+                        borderRadius: 5,
+                        borderWidth: 2
+                    },
+                    label: {
+                        position: 'outer',
+                        alignTo: 'labelLine',
+                        formatter: '{c}'
+                    },
+                    data: dataArr
+                }
+            })
+            const dataOption = {
+                series: seriesArr
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('volume_ref').offsetWidth / 100 * 3.6
+            const adapterOption = {
+                // title: {
+                //   text: '{Sunny|    本月业务量    }',
+                //   left: this.titleFontSize * 3,
+                //   textStyle: {
+                //     fontSize: this.titleFontSize,
+                //     color: '#F0F3F8',
+                //     rich: {
+                //       Sunny: {
+                //         // 这样设定 backgroundColor 就可以是图片了。
+                //         backgroundColor: {
+                //           image: require('../assets/img/bg_box_3.png')
+                //         },
+                //         // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
+                //         height: this.titleFontSize * 2
+                //       }
+                //     }
+                //   }
+                // },
+                legend: {
+                    itemWidth: this.titleFontSize * 1.5,
+                    itemHeight: this.titleFontSize / 6,
+                    itemGap: this.titleFontSize * 2.5,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 2
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="declarecpu_ref"></div>
+</div>

+export default {
+    name: 'ResponseMonitor',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: {
+                polyline: {
+                    title: "申报库CPU监控",
+                    unit: "cpu%",
+                    data: [{
+                        name: "80.12.97.2",
+                        data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
+                    }, {
+                        name: "80.12.77.3",
+                        data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
+                    }]
+                },
+                xAxis: {
+                    today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
+                }
+            },
+            startValue: 0, // 区域缩放的起点值
+            endValue: 6, // 区域缩放的终点值
+            timerId: null // 定时器的标识
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+        clearInterval(this.timerId)
+    },
+    methods: {
+        initChart () {
+            // this.chartInstance = this.$echarts.init(this.$refs.declarecpu_ref, 'chalk')
+            this.chartInstance = echarts.init(document.getElementById('declarecpu_ref'))
+            const initOption = {
+                grid: {
+                    top: '15%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '20%',
+                    containLabel: true
+                },
+                legend: {
+                    right: '10%',
+                    top: '5%',
+                    textStyle: {
+                        color: 'wihte'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('declarecpu')
+            // this.allData = ret
+            // console.log(ret)
+            this.updateChart()
+            this.startInterval()
+        },
+        updateChart () {
+            // 半透明的颜色值
+            const colorArr1 = [
+                'rgba(11, 168, 44, 0.5)',
+                'rgba(44, 110, 255, 0.5)',
+                'rgba(22, 242, 217, 0.5)',
+                'rgba(254, 33, 30, 0.5)',
+                'rgba(250, 105, 0, 0.5)'
+            ]
+            // 全透明的颜色值
+            const colorArr2 = [
+                'rgba(11, 168, 44, 0)',
+                'rgba(44, 110, 255, 0)',
+                'rgba(22, 242, 217, 0)',
+                'rgba(254, 33, 30, 0)',
+                'rgba(250, 105, 0, 0)'
+            ]
+            const timeArr = this.allData.xAxis.today
+            const seriesArr = this.allData.polyline.data.map((item, index) => {
+                return {
+                    name: item.name,
+                    type: 'line',
+                    data: item.data,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: colorArr1[index]
+                            }, // %0的颜色值
+                            {
+                                offset: 1,
+                                color: colorArr2[index]
+                            } // 100%的颜色值
+                        ])
+                    }
+                }
+            })
+            // 图例的数据
+            const legendArr = this.allData.polyline.data.map(item => {
+                return item.name
+            })
+            const title = this.allData.polyline.title
+            const unit = this.allData.polyline.unit
+            const dataOption = {
+                title: {
+                    text: title,
+                    left: 'center',
+                    bottom: '8%'
+                },
+                xAxis: {
+                    data: timeArr
+                },
+                yAxis: {
+                    name: unit
+                },
+                legend: {
+                    data: legendArr
+                },
+                dataZoom: {
+                    show: false,
+                    startValue: this.startValue,
+                    endValue: this.endValue
+                },
+                series: seriesArr
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('declarecpu_ref').offsetWidth / 100 * 3.6
+            const adapterOption = {
+                title: {
+                    textStyle: {
+                        fontSize: this.titleFontSize,
+                        color: 'white'
+                    }
+                },
+                yAxis: {
+                    top: this.titleFontSize,
+                    nameTextStyle: {
+                        padding: [0, 0, -(this.titleFontSize / 2), -(this.titleFontSize)], // 修改位置
+                        fontSize: this.titleFontSize / 2,
+                        color: 'white'
+                    }
+                },
+                legend: {
+                    itemWidth: this.titleFontSize,
+                    itemHeight: this.titleFontSize,
+                    itemGap: this.titleFontSize,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 1.5
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        },
+        startInterval () {
+            if (this.timerId) {
+                clearInterval(this.timerId)
+            }
+            let index = 12
+            this.timerId = setInterval(() => {
+                this.startValue++
+                this.endValue++
+                if ((this.allData.polyline.data).length > 0) {
+                    index = (this.allData.polyline.data)[0].data.length
+                }
+                if (this.endValue > index - 1) {
+                    this.startValue = 0
+                    this.endValue = 6
+                }
+                console.log(this.startValue)
+                console.log(this.endValue)
+                this.updateChart()
+            }, 5000)
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="declarepolyline_ref"></div>
+    <div class="com-title" :style="comtitlesizeStyle">
+        <el-row>
+            <el-col :span="24" :style="comboxTitleStyle">
+                <div class="grid-content bg-purple-dark">
+                    <img src="../assets/img/title_light.png" :style="comimgsizeStyle">
+                    本月应申报
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24" :style="comboxTitleStyle">
+                <div class="grid-content bg-purple-dark" :style="comtitletextStyle">
+                    1234521
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24" :style="comboxTitleStyle">
+                <div class="grid-content bg-purple-dark">
+                    <img src="../assets/img/t.png" :style="comimgsizeStyle">
+                    本月申报率
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24" :style="comboxTitleStyle">
+                <div class="grid-content bg-purple-dark" :style="comtitletextStyle">
+                    98.55%
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</div>

+export default {
+    name: 'declarePolyline',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: {
+                polyline: {
+                    data: {
+                        name: "申报率",
+                        data: ["12", "15", "21", "81", "20", "37", "45", "23", "12", "50", "70", "14", "92", "76", "67", "45", "77", "20", "35", "50"]
+                    },
+                    declareNumer: "1200848",
+                    declareRate: "98.55%",
+                    numerTitle: "本月应申报",
+                    rateTitle: "本月申报率"
+                },
+                xAxis: {
+                    today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]
+                }
+            },
+            startValue: 0, // 区域缩放的起点值
+            endValue: 9, // 区域缩放的终点值
+            timerId: null, // 定时器的标识
+            titleFontSize: 30
+        }
+    },
+    computed: {
+        comtitletextStyle () {
+            return {
+                color: '#33D1FA',
+                fontSize: this.titleFontSize / 1.2 + 'px'
+            }
+        },
+        comtitlesizeStyle () {
+            return {
+                fontSize: this.titleFontSize / 2 + 'px'
+            }
+        },
+        comimgsizeStyle () {
+            return {
+                width: this.titleFontSize + 'px'
+            }
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+        clearInterval(this.timerId)
+    },
+    methods: {
+        initChart () {
+            this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref'))
+            const initOption = {
+                grid: {
+                    left: '5%',
+                    right: '35%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+                    right: '2%',
+                    top: '5%'
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('declarepolyline')
+            // this.allData = ret
+            this.updateChart()
+            this.startInterval()
+        },
+        updateChart () {
+            // 半透明的颜色值
+            const colorArr1 = [
+                'rgba(11, 168, 44, 0.5)',
+                'rgba(44, 110, 255, 0.5)',
+                'rgba(22, 242, 217, 0.5)',
+                'rgba(254, 33, 30, 0.5)',
+                'rgba(250, 105, 0, 0.5)'
+            ]
+            //   全透明的颜色值
+            const colorArr2 = [
+                'rgba(11, 168, 44, 0)',
+                'rgba(44, 110, 255, 0)',
+                'rgba(22, 242, 217, 0)',
+                'rgba(254, 33, 30, 0)',
+                'rgba(250, 105, 0, 0)'
+            ]
+            const timeArr = this.allData.xAxis.today
+            const seriesData = this.allData.polyline.data.data
+            const seriesName = this.allData.polyline.data.name
+            // 图例的数据
+            const legendArr = this.allData.polyline.data.data.map(item => {
+                return item.name
+            })
+            const numerTitle = this.allData.polyline.numerTitle // 本月应申报 标题
+            const rateTitle = this.allData.polyline.rateTitle // 本月申报率 标题
+            const declareNumer = this.allData.polyline.declareNumer // 本月应申报 数值
+            const declareRate = this.allData.polyline.declareRate // 本月申报率 数值
+            const htmlText = numerTitle + '\n' + declareNumer + '\n' + rateTitle + '\n' + declareRate
+            console.log(htmlText)
+            const dataOption = {
+                // title: {
+                //   text: htmlText,
+                //   top: '25%',
+                //   right: '15%',
+                //   textStyle: {
+                //     color: '#F1F2F5'
+                //   }
+                // },
+                xAxis: {
+                    data: timeArr
+                },
+                legend: {
+                    data: legendArr
+                },
+                dataZoom: {
+                    show: false,
+                    startValue: this.startValue,
+                    endValue: this.endValue
+                },
+                series: [
+                    {
+                        name: seriesName,
+                        type: 'line',
+                        data: seriesData,
+                        smooth: true,
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: colorArr1[1]
+                                }, // %0的颜色值
+                                {
+                                    offset: 1,
+                                    color: colorArr2[1]
+                                } // 100%的颜色值
+                            ])
+                        }
+                    }
+                ]
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('declarepolyline_ref').offsetWidth / 100 * 3.6
+            console.log(this.titleFontSize)
+            const adapterOption = {
+                legend: {
+                    itemWidth: this.titleFontSize,
+                    itemHeight: this.titleFontSize,
+                    itemGap: this.titleFontSize,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 2
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        },
+        startInterval () {
+            if (this.timerId) {
+                clearInterval(this.timerId)
+            }
+            let index = 30
+            this.timerId = setInterval(() => {
+                this.startValue++
+                this.endValue++
+                if ((this.allData.polyline.data).length > 0) {
+                    index = (this.allData.polyline.data)[0].data.length
+                }
+                if (this.endValue > index - 1) {
+                    this.startValue = 0
+                    this.endValue = 9
+                }
+                this.updateChart()
+            }, 5000)
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="deduction_ref" :style="comcontextStyle">
+        <el-row>
+            <el-col :span="24">
+                <div class="grid-content bg-purple-dark com-box-title">
+            <span>
+              <img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/img/box_title_bykk_zj_1.png"> <!-- bor1_6 -->
+              <span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span>
+            </span>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="11">
+                <div class="grid-content bg-purple com-box">
+                    <span >
+                        <img :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> <!-- bor1_6 -->
+                        <div class="deduction-box-text-left" :style="comnumberTextStyle">
+                           <div>
+                            <span class="deduction-text-number">{{deductionAmount}}</span>
+                            <span :style="comnumberUnitStyle">万元</span>
+                          </div>
+                          <div>本月扣款金额</div>
+                        </div>
+                    </span>
+                </div>
+            </el-col>
+            <el-col :span="13">
+                <div class="grid-content bg-purple-light">
+                    <span >
+                        <img :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">
+                         <div class="deduction-box-text-right" :style="comnumberTextStyle">
+                           <div>
+                            <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>
+                            <span :style="comnumberUnitStyle">万笔</span>
+                          </div>
+                          <div>本月扣款笔数</div>
+                        </div>
+                    </span>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</div>

+export default {
+    name: 'deduction',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: null,
+            titleFontSize: 20,
+            // 扣款金额
+            deductionAmount: '0.00',
+            // 扣款笔数
+            deductionNumber: '0.00'
+        }
+    },
+    computed: {
+        comboximgleftStyle () {
+            return {
+                height: this.titleFontSize * 3.5 + 'px',
+                marginTop: this.titleFontSize * 2.5 + 'px',
+                marginLeft: this.titleFontSize + 'px'
+            }
+        },
+        comboximgrightStyle () {
+            return {
+                height: this.titleFontSize * 3.5 + 'px',
+                marginTop: this.titleFontSize * 2.5 + 'px'
+            }
+        },
+        comcontextStyle () {
+            return {
+                fontSize: this.titleFontSize + 'px'
+            }
+        },
+        comtitlesizeStyle () {
+            return {
+                height: this.titleFontSize * 1.5 + 'px',
+                // width: this.titleFontSize * 6 + 'px'
+            }
+        },
+        comtitleTextStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.3 + 'px'
+            }
+        },
+        comnumberTextStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.2 + 'px'
+            }
+        },
+        comnumberUnitStyle () {
+            return {
+                fontSize: this.titleFontSize / 2 + 'px'
+            }
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+    },
+    methods: {
+        initChart () {
+        },
+        async getData () {
+            // await this.$http.get()
+            this.updateChart()
+        },
+        updateChart () {
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('deduction_ref').offsetWidth / 100 * 3.6
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="digitalboard_down_ref">
+        <div style="margin-top: 2%" :style="comcontextStyle">
+            <el-row>
+                <el-col :span="12">
+                    <div class="grid-content bg-purple">
+                        <span>
+                            <!--title_box_1.png-->
+                            <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
+                            <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="12">
+                    <div class="grid-content bg-purple-light com-box-right">
+                        <span :style="comTitleSizeStyle">{{rightTitle}}：{{undeclaredAmountNumber}}</span>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span >
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #FEFEFE;" v-if="mustBitFalg > 0">{{mustBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
+                            <span :style="comcommaStyle" style=" left: 24%;" v-if="isOneCommaShow">,</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
+                            <span :style="comcommaStyle" style="left: 61.5%;" v-if="isTwoCommaShow">,</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</div>

+export default {
+    name: 'digitalBoardDown',
+    template: '',
+    components: {},
+    data () {
+        return {
+            //   chartInstance: null
+            titleFontSize: 80,
+            // 千万位数
+            mustBit: 0,
+            millionBit: 0,
+            // 十万位数
+            hundredThousandBit: 0,
+            // 万位数
+            tenThousandBit: 0,
+            thousandBit: 0,
+            hundredBit: 0,
+            tenBit: 0,
+            bitBit: 0,
+            // 颜色判断位数 0:1 暗色/亮色
+            mustBitFalg: 0,
+            millionBitFalg: 0,
+            hundredThousandBitFalg: 0,
+            tenThousandBitFalg: 0,
+            thousandBitFalg: 0,
+            hundredBitFalg: 0,
+            tenBitFalg: 0,
+            bitBitFalg: 0,
+            isOneCommaShow: false,
+            isTwoCommaShow: false,
+            declaredAmountNumber: 1283, // 左边数
+            undeclaredAmountNumber: 0, // 右边数
+            leftTitle: '本月已申报数',
+            rightTitle: '本月未申报'
+        }
+    },
+    computed: {
+        comboximgStyle () {
+            return {
+                height: this.titleFontSize * 4.5 + 'px'
+            }
+        },
+        comTitleimgStyle () {
+            return {
+                width: this.titleFontSize * 12 + 'px'
+            }
+        },
+        comTitleSizeStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.5 + 'px'
+            }
+        },
+        comtitlimgStyle () {
+            return {
+                height: this.titleFontSize + 'px'
+            }
+        },
+        comcontextStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.5 + 'px'
+            }
+        },
+        combitnumberStyle () {
+            return {
+                fontSize: this.titleFontSize * 3.5 + 'px',
+                top: '9%',
+                position: 'absolute',
+                fontFamily: 'yjsz'
+            }
+        },
+        comcommaStyle () {
+            return {
+                position: 'absolute',
+                color: '#FEFEFE',
+                fontSize: this.titleFontSize * 3 + 'px',
+                top: '28%',
+                fontFamily: 'yjsz'
+            }
+        }
+
+    },
+    mounted () {
+        this.startInterval()
+        // this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+    },
+    methods: {
+        initChart () {
+            // 判断数字位数
+            this.bitBit = this.declaredAmountNumber % 10
+            const bitFlag = Math.floor(this.declaredAmountNumber)
+            if (bitFlag > 0) {
+                // 个位
+                this.bitBitFalg = 1
+            }
+            this.tenBit = Math.floor(this.declaredAmountNumber % 100 / 10)
+            const tenFlag = Math.floor(this.declaredAmountNumber / 10)
+            if (tenFlag > 0) {
+                // 十位
+                this.tenBitFalg = 1
+            }
+            this.hundredBit = Math.floor(this.declaredAmountNumber % 1000 / 100)
+            const hundredFlag = Math.floor(this.declaredAmountNumber / 100)
+            if (hundredFlag > 0) {
+                // 百位
+                this.hundredBitFalg = 1
+            }
+            this.thousandBit = Math.floor(this.declaredAmountNumber % 10000 / 1000)
+            const thousandFlag = Math.floor(this.declaredAmountNumber / 1000)
+            if (thousandFlag > 0) {
+                // 千位
+                this.thousandBitFalg = 1
+                this.isTwoCommaShow = true
+            }
+            this.tenThousandBit = Math.floor(this.declaredAmountNumber % 100000 / 10000)
+            const tenThousandFlag = Math.floor(this.declaredAmountNumber / 10000)
+            if (tenThousandFlag > 0) {
+                // 万位
+                this.tenThousandBitFalg = 1
+            }
+            this.hundredThousandBit = Math.floor(this.declaredAmountNumber % 1000000 / 100000)
+            const hundredThousandFlag = Math.floor(this.declaredAmountNumber / 100000)
+            if (hundredThousandFlag > 0) {
+                // 十万位
+                this.hundredThousandBitFalg = 1
+            }
+            this.millionBit = Math.floor(this.declaredAmountNumber % 10000000 / 1000000)
+            const millionFlag = Math.floor(this.declaredAmountNumber / 1000000)
+            if (millionFlag > 0) {
+                // 百万位
+                this.millionBitFalg = 1
+                this.isOneCommaShow = true
+            }
+            this.mustBit = Math.floor(this.declaredAmountNumber % 100000000 / 10000000)
+            const mustFlag = Math.floor(this.declaredAmountNumber / 10000000)
+            if (mustFlag > 0) {
+                // 千万位
+                this.mustBitFalg = 1
+            }
+        },
+        async getData () {
+            // await this.$http.get()
+            this.initChart()
+            this.updateChart()
+        },
+        updateChart () {
+            //   const dataOption = {}
+            //   this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('digitalboard_down_ref').offsetWidth / 100 * 3.6
+        },
+        startInterval () {
+            // 单元测试 数字板增长
+            setInterval(() => {
+                this.declaredAmountNumber += 10
+                this.initChart()
+            }, 2000)
+        }
+
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="digitalboard_top_ref">
+        <div style="margin-top: 2%" :style="comcontextStyle">
+            <el-row>
+                <el-col :span="12">
+                    <div class="grid-content bg-purple">
+                        <span>
+                            <!--title_box_1.png-->
+                            <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
+                            <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="12">
+                    <div class="grid-content bg-purple-light com-box-right">
+                        <span :style="comTitleSizeStyle">{{rightTitle}}：{{undeclaredAmountNumber}}</span>
+                    </div>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span >
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #FEFEFE;" v-if="mustBitFalg > 0">{{mustBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
+                            <span :style="comcommaStyle" style=" left: 24%;" v-if="isOneCommaShow">,</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
+                            <span :style="comcommaStyle" style="left: 61.5%;" v-if="isTwoCommaShow">,</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+                <el-col :span="3">
+                    <div class="grid-content bg-purple-light com-box">
+                        <span>
+                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
+                        </span>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</div>

+export default {
+    name: 'digitalBoardTop',
+    template: '',
+    components: {},
+    data () {
+        return {
+            //   chartInstance: null
+            titleFontSize: 80,
+            // 千万位数
+            mustBit: 0,
+            millionBit: 0,
+            // 十万位数
+            hundredThousandBit: 0,
+            // 万位数
+            tenThousandBit: 0,
+            thousandBit: 0,
+            hundredBit: 0,
+            tenBit: 0,
+            bitBit: 0,
+            // 颜色判断位数 0:1 暗色/亮色
+            mustBitFalg: 0,
+            millionBitFalg: 0,
+            hundredThousandBitFalg: 0,
+            tenThousandBitFalg: 0,
+            thousandBitFalg: 0,
+            hundredBitFalg: 0,
+            tenBitFalg: 0,
+            bitBitFalg: 0,
+            isOneCommaShow: false,
+            isTwoCommaShow: false,
+            declaredAmountNumber: 1283, // 左边数
+            undeclaredAmountNumber: 0, // 右边数
+            leftTitle: '今日已申报数',
+            rightTitle: '本日申报未导入'
+        }
+    },
+    computed: {
+        comboximgStyle () {
+            return {
+                height: this.titleFontSize * 4.5 + 'px'
+            }
+        },
+        comTitleimgStyle () {
+            return {
+                width: this.titleFontSize * 12 + 'px'
+            }
+        },
+        comTitleSizeStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.5 + 'px'
+            }
+        },
+        comtitlimgStyle () {
+            return {
+                height: this.titleFontSize + 'px'
+            }
+        },
+        comcontextStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.5 + 'px'
+            }
+        },
+        combitnumberStyle () {
+            return {
+                fontSize: this.titleFontSize * 3.5 + 'px',
+                top: '9%',
+                position: 'absolute',
+                fontFamily: 'yjsz'
+            }
+        },
+        comcommaStyle () {
+            return {
+                position: 'absolute',
+                color: '#FEFEFE',
+                fontSize: this.titleFontSize * 3 + 'px',
+                top: '28%',
+                fontFamily: 'yjsz'
+            }
+        }
+
+    },
+    mounted () {
+        this.startInterval()
+        // this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+    },
+    methods: {
+        initChart () {
+            // 判断数字位数
+            this.bitBit = this.declaredAmountNumber % 10
+            const bitFlag = Math.floor(this.declaredAmountNumber)
+            if (bitFlag > 0) {
+                // 个位
+                this.bitBitFalg = 1
+            }
+            this.tenBit = Math.floor(this.declaredAmountNumber % 100 / 10)
+            const tenFlag = Math.floor(this.declaredAmountNumber / 10)
+            if (tenFlag > 0) {
+                // 十位
+                this.tenBitFalg = 1
+            }
+            this.hundredBit = Math.floor(this.declaredAmountNumber % 1000 / 100)
+            const hundredFlag = Math.floor(this.declaredAmountNumber / 100)
+            if (hundredFlag > 0) {
+                // 百位
+                this.hundredBitFalg = 1
+            }
+            this.thousandBit = Math.floor(this.declaredAmountNumber % 10000 / 1000)
+            const thousandFlag = Math.floor(this.declaredAmountNumber / 1000)
+            if (thousandFlag > 0) {
+                // 千位
+                this.thousandBitFalg = 1
+                this.isTwoCommaShow = true
+            }
+            this.tenThousandBit = Math.floor(this.declaredAmountNumber % 100000 / 10000)
+            const tenThousandFlag = Math.floor(this.declaredAmountNumber / 10000)
+            if (tenThousandFlag > 0) {
+                // 万位
+                this.tenThousandBitFalg = 1
+            }
+            this.hundredThousandBit = Math.floor(this.declaredAmountNumber % 1000000 / 100000)
+            const hundredThousandFlag = Math.floor(this.declaredAmountNumber / 100000)
+            if (hundredThousandFlag > 0) {
+                // 十万位
+                this.hundredThousandBitFalg = 1
+            }
+            this.millionBit = Math.floor(this.declaredAmountNumber % 10000000 / 1000000)
+            const millionFlag = Math.floor(this.declaredAmountNumber / 1000000)
+            if (millionFlag > 0) {
+                // 百万位
+                this.millionBitFalg = 1
+                this.isOneCommaShow = true
+            }
+            this.mustBit = Math.floor(this.declaredAmountNumber % 100000000 / 10000000)
+            const mustFlag = Math.floor(this.declaredAmountNumber / 10000000)
+            if (mustFlag > 0) {
+                // 千万位
+                this.mustBitFalg = 1
+            }
+        },
+        async getData () {
+            // await this.$http.get()
+            this.initChart()
+            this.updateChart()
+        },
+        updateChart () {
+            //   const dataOption = {}
+            //   this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('digitalboard_top_ref').offsetWidth / 100 * 3.6
+        },
+        startInterval () {
+            // 单元测试 数字板增长
+            setInterval(() => {
+                this.declaredAmountNumber += 10
+                this.initChart()
+            }, 2000)
+        }
+
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="documentcpu_ref"></div>
+</div>

+export default {
+    name: 'DocumentCpu',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: {
+                polyline: {
+                    title: "文书库CPU监控",
+                    unit: "cpu%",
+                    data: [{
+                        name: "80.12.97.2",
+                        data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
+                    }, {
+                        name: "80.12.77.3",
+                        data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
+                    }]
+                },
+                xAxis: {
+                    today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
+                }
+            },
+            startValue: 0, // 区域缩放的起点值
+            endValue: 6, // 区域缩放的终点值
+            timerId: null // 定时器的标识
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+        clearInterval(this.timerId)
+    },
+    methods: {
+        initChart () {
+            this.chartInstance = echarts.init(document.getElementById('documentcpu_ref'))
+            const initOption = {
+                grid: {
+                    top: '15%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '20%',
+                    containLabel: true
+                },
+                legend: {
+                    right: '10%',
+                    top: '5%',
+                    textStyle: {
+                        color: 'wihte'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('documentcpu')
+            // this.allData = ret
+            // console.log(ret)
+            this.updateChart()
+            this.startInterval()
+        },
+        updateChart () {
+            // 半透明的颜色值
+            const colorArr1 = [
+                'rgba(11, 168, 44, 0.5)',
+                'rgba(44, 110, 255, 0.5)',
+                'rgba(22, 242, 217, 0.5)',
+                'rgba(254, 33, 30, 0.5)',
+                'rgba(250, 105, 0, 0.5)'
+            ]
+            // 全透明的颜色值
+            const colorArr2 = [
+                'rgba(11, 168, 44, 0)',
+                'rgba(44, 110, 255, 0)',
+                'rgba(22, 242, 217, 0)',
+                'rgba(254, 33, 30, 0)',
+                'rgba(250, 105, 0, 0)'
+            ]
+            const timeArr = this.allData.xAxis.today
+            const seriesArr = this.allData.polyline.data.map((item, index) => {
+                return {
+                    name: item.name,
+                    type: 'line',
+                    data: item.data,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: colorArr1[index]
+                            }, // %0的颜色值
+                            {
+                                offset: 1,
+                                color: colorArr2[index]
+                            } // 100%的颜色值
+                        ])
+                    }
+                }
+            })
+            // 图例的数据
+            const legendArr = this.allData.polyline.data.map(item => {
+                return item.name
+            })
+            const title = this.allData.polyline.title
+            const unit = this.allData.polyline.unit
+            const dataOption = {
+                title: {
+                    text: title,
+                    left: 'center',
+                    bottom: '8%'
+                },
+                xAxis: {
+                    data: timeArr
+                },
+                yAxis: {
+                    name: unit
+                },
+                legend: {
+                    data: legendArr
+                },
+                dataZoom: {
+                    show: false,
+                    startValue: this.startValue,
+                    endValue: this.endValue
+                },
+                series: seriesArr
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('documentcpu_ref').offsetWidth / 100 * 3.6
+            const adapterOption = {
+                title: {
+                    textStyle: {
+                        fontSize: this.titleFontSize,
+                        color: 'white'
+                    }
+                },
+                yAxis: {
+                    top: this.titleFontSize,
+                    nameTextStyle: {
+                        padding: [0, 0, -(this.titleFontSize / 2), -(this.titleFontSize)], // 修改位置
+                        fontSize: this.titleFontSize / 2,
+                        color: 'white'
+                    }
+                },
+                legend: {
+                    itemWidth: this.titleFontSize,
+                    itemHeight: this.titleFontSize,
+                    itemGap: this.titleFontSize,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 1.5
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        },
+        startInterval () {
+            if (this.timerId) {
+                clearInterval(this.timerId)
+            }
+            let index = 12
+            this.timerId = setInterval(() => {
+                this.startValue++
+                this.endValue++
+                if ((this.allData.polyline.data).length > 0) {
+                    index = (this.allData.polyline.data)[0].data.length
+                }
+                if (this.endValue > index - 1) {
+                    this.startValue = 0
+                    this.endValue = 6
+                }
+                console.log(this.startValue)
+                console.log(this.endValue)
+                this.updateChart()
+            }, 5000)
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="responsemonitor_ref"></div>
+</div>

+export default {
+    name: 'ResponseMonitor',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: {
+                polyline: {
+                    title: "系统响应请求数监控",
+                    unit: "MB",
+                    data: {
+                        name: "请求相应数/秒",
+                        data: ["1200","1500","2100","1800","2000","3700","4500","2300","1200","500","700","140"]
+                    }
+                },
+                xAxis: {
+                    today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
+                }
+            },
+            startValue: 0, // 区域缩放的起点值
+            endValue: 6, // 区域缩放的终点值
+            timerId: null // 定时器的标识
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+        clearInterval(this.timerId)
+    },
+    methods: {
+        initChart () {
+            this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref'))
+            const initOption = {
+                grid: {
+                    top: '15%',
+                    left: '5%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                legend: {
+                    right: '2%',
+                    top: '5%'
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('responsemonitor')
+            // this.allData = ret
+            // console.log(ret)
+            this.updateChart()
+            this.startInterval()
+        },
+        updateChart () {
+            // 半透明的颜色值
+            const colorArr1 = [
+                'rgba(11, 168, 44, 0.5)',
+                'rgba(44, 110, 255, 0.5)',
+                'rgba(22, 242, 217, 0.5)',
+                'rgba(254, 33, 30, 0.5)',
+                'rgba(250, 105, 0, 0.5)'
+            ]
+            //   全透明的颜色值
+            const colorArr2 = [
+                'rgba(11, 168, 44, 0)',
+                'rgba(44, 110, 255, 0)',
+                'rgba(22, 242, 217, 0)',
+                'rgba(254, 33, 30, 0)',
+                'rgba(250, 105, 0, 0)'
+            ]
+            const timeArr = this.allData.xAxis.today
+            const seriesData = this.allData.polyline.data.data
+            const seriesName = this.allData.polyline.data.name
+            console.log(seriesName)
+            // 图例的数据
+            const legendArr = this.allData.polyline.data.data.map(item => {
+                return item.name
+            })
+            const title = this.allData.polyline.title
+            //   const unit = this.allData.polyline.unit
+            const dataOption = {
+                title: {
+                    text: title,
+                    left: '10%',
+                    textStyle: {
+                        color: '#F1F2F5'
+                    }
+                },
+                xAxis: {
+                    data: timeArr
+                },
+                legend: {
+                    data: legendArr
+                },
+                dataZoom: {
+                    show: false,
+                    startValue: this.startValue,
+                    endValue: this.endValue
+                },
+                series: [
+                    {
+                        name: seriesName,
+                        type: 'line',
+                        data: seriesData,
+                        smooth: true,
+                        areaStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {
+                                    offset: 0,
+                                    color: colorArr1[2]
+                                }, // %0的颜色值
+                                {
+                                    offset: 1,
+                                    color: colorArr2[2]
+                                } // 100%的颜色值
+                            ])
+                        }
+                    }
+                ]
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
+            const adapterOption = {
+                title: {
+                    textStyle: {
+                        fontSize: this.titleFontSize / 1.5
+                    }
+                },
+                legend: {
+                    itemWidth: this.titleFontSize,
+                    itemHeight: this.titleFontSize,
+                    itemGap: this.titleFontSize,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 2
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        },
+        startInterval () {
+            if (this.timerId) {
+                clearInterval(this.timerId)
+            }
+            let index = 12
+            this.timerId = setInterval(() => {
+                this.startValue++
+                this.endValue++
+                // this.allData.polyline.data
+                // console.log((this.allData.polyline.data)[0].data.length)
+                if ((this.allData.polyline.data).length > 0) {
+                    index = (this.allData.polyline.data)[0].data.length
+                }
+                if (this.endValue > index - 1) {
+                    this.startValue = 0
+                    this.endValue = 6
+                }
+                console.log(this.startValue)
+                console.log(this.endValue)
+                this.updateChart()
+            }, 5000)
+        }
+    }
+}

+<div class="com-container">
+    <div class="com-chart" id="topfive_ref"></div>
+    <div class="topfive-box-title">
+        <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->
+        <span :style="comtitleTextStyle" class="topfive-title-size">涉税文书TOP5业务量</span>
+    </div>
+</div>

+export default {
+    name: 'topfive',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: [{
+                name: '发票领用',
+                value: 1201
+            }, {
+                name: '发票验（交）旧',
+                value: 1020
+            }, {
+                name: '代开增值税专用发票',
+                value: 1183
+            }, {
+                name: '代开增值税普通发票',
+                value: 1490
+            }, {
+                name: '实名采集',
+                value: 2001
+            }],
+            titleFontSize: 30
+        }
+    },
+    computed: {
+        comtitleTextStyle () {
+            return {
+                fontSize: this.titleFontSize / 1.2 + 'px'
+            }
+        },
+        comtitleImgStyle () {
+            return {
+                height: this.titleFontSize * 2 + 'px',
+                width: this.titleFontSize * 14 + 'px'
+            }
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+    },
+    methods: {
+        initChart () {
+            // this.chartInstance = this.$echarts.init(this.$refs.topfive_ref, 'chalk')
+            this.chartInstance = echarts.init(document.getElementById('topfive_ref'))
+            const initOption = {
+                // title: {
+                //   text: '{Sunny|    涉税文书TOP5业务量    }'
+                // },
+                grid: {
+                    top: '20%',
+                    left: '3%',
+                    right: '6%',
+                    bottom: '20%',
+                    // 设置局里包含标签
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    axisLabel: {
+                        textStyle: {
+                            color: '#E2E1E6'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(13, 57, 135, 0.8)'
+                        },
+                        label: {
+                            show: true,
+                            position: 'right',
+                            testStyle: {
+                                color: 'white'
+                            }
+                        },
+                        itemStyle: {
+                            // 颜色渐变 指明渐变方向，指明不同百分比之下颜色的值 LinearGradient(x1, y1, x2, y2, [])
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                // 百分之0状态之下的颜色值
+                                {
+                                    offset: 0,
+                                    color: '#113D84'
+                                },
+                                // 百分之100状态之下的颜色值
+                                {
+                                    offset: 1,
+                                    color: '#6DDBE5'
+                                }
+                            ])
+                        }
+                    }
+                ]
+            }
+            this.chartInstance.setOption(initOption)
+        },
+        getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('topfive')
+            // this.allData = ret
+            // this.allData.sort((a, b) => {
+            //     return a.value - b.value
+            // })
+            const { proxy } = Vue.getCurrentInstance();
+            var params = {
+                kipValue: 'kipValue'
+            };
+            proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
+                console.log(res.object)
+            },function (){
+                proxy.$global.showMsg('没有查询到记录！');
+            });
+            this.updateChart()
+        },
+        updateChart () {
+            const sellerNames = this.allData.map((item) => {
+                return item.name
+            })
+            const sellerValues = this.allData.map((item) => {
+                return item.value
+            })
+            const dataOption = {
+                yAxis: {
+                    data: sellerNames
+                },
+                series: [
+                    {
+                        data: sellerValues
+                    }
+                ]
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('topfive_ref').offsetWidth / 100 * 3.6
+            console.log(this.titleFontSize)
+            const adapterOption = {
+                xAxis: {
+                    type: 'value',
+                    axisLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    axisLabel: {
+                        show: true,
+                        fontSize: this.titleFontSize / 1.3
+                    },
+                    axisLine: {
+                        show: false
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar',
+                        barWidth: this.titleFontSize / 4,
+                        itemStyle: {
+                            barBorderRadius: [0, this.titleFontSize / 2, this.titleFontSize / 2, 0]
+                        }
+                    }
+                ]
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        }
+    }
+    // setup () {
+    //     const { proxy } = Vue.getCurrentInstance();
+    //     var params = {
+    //         kipValue: 'kipValue'
+    //     };
+    //     proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
+    //        console.log(JSON.stringify(res))
+    //     },function (){
+    //         proxy.$global.showMsg('没有查询到记录！');
+    //     });
+    // }
+}

+<div class="com-container">
+    <div class="com-chart" id="polyline_ref"></div>
+</div>

+export default {
+    name: 'TrendPolyline',
+    template: '',
+    components: {},
+    data () {
+        return {
+            chartInstance: null,
+            allData: {
+                polyline: {
+                    title: "本月业务量",
+                    unit: "件",
+                    data: [{
+                        name: "网络发票",
+                        data: ["1562","1112","1232","1112","112","1156","2112","1112","1312","412","1512","112","412","812","612","912","12","312","412","512"]
+                    }, {
+                        name: "涉税文书",
+                        data: ["1222","1232","1242","1252","1262","1272","1282","1292","1302","1312","1322","1332","1342","1352","1362","1372","1382","1392","1402","1412"]
+                    }, {
+                        name: "网上申报",
+                        data: ["1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422","1422"]
+                    }]
+                },
+                xAxis: {
+                    today: ["1号", "2号", "3号", "4号", "5号", "6号", "7号", "8号", "9号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号"]
+                }
+            },
+            titleFontSize: 0,
+            startValue: 0, // 区域缩放的起点值
+            endValue: 9, // 区域缩放的终点值
+            timerId: null // 定时器的标识
+        }
+    },
+    mounted () {
+        this.initChart()
+        this.getData()
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+    unmounted () {
+        window.removeEventListener('resize', this.screenAdapter)
+        clearInterval(this.timerId)
+    },
+    methods: {
+        initChart () {
+            // this.chartInstance = this.$echarts.init(this.$refs.polyline_ref, 'chalk')
+            this.chartInstance = echarts.init(document.getElementById('polyline_ref'))
+            const initOption = {
+                grid: {
+                    left: '3%',
+                    top: '15%',
+                    right: '6%',
+                    bottom: '1%',
+                    containLabel: true
+                },
+                legend: {
+                    top: '5%',
+                    left: 'center',
+                    textStyle: {
+                        color: 'wihte'
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLabel: {
+                        textStyle: {
+                            color: '#E6E8EB'
+                        }
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#E6E8EB'
+                        }
+                    }
+                }
+            }
+            this.chartInstance.setOption(initOption)
+            this.chartInstance.on('mouseover', () => {
+                clearInterval(this.timerId)
+            })
+            this.chartInstance.on('mouseout', () => {
+                this.startInterval()
+            })
+        },
+        async getData () {
+            // await this.$http.get()
+            // const { data: ret } = await this.$http.get('polyline')
+            // this.allData = ret
+            this.updateChart()
+            this.startInterval()
+        },
+        updateChart () {
+            const timeArr = this.allData.xAxis.today
+            const seriesArr = this.allData.polyline.data.map((item, index) => {
+                return {
+                    name: item.name,
+                    type: 'line',
+                    data: item.data,
+                    smooth: true
+                }
+            })
+            // 图例的数据
+            const legendArr = this.allData.polyline.data.map(item => {
+                return item.name
+            })
+            const dataOption = {
+                xAxis: {
+                    data: timeArr
+                },
+                legend: {
+                    data: legendArr
+                },
+                // 区域缩放
+                dataZoom: {
+                    show: false,
+                    startValue: this.startValue,
+                    endValue: this.endValue
+                },
+                series: seriesArr
+            }
+            this.chartInstance.setOption(dataOption)
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('polyline_ref').offsetWidth / 100 * 3.6
+            const adapterOption = {
+                legend: {
+                    itemWidth: this.titleFontSize,
+                    itemHeight: this.titleFontSize / 4,
+                    itemGap: this.titleFontSize * 3,
+                    textStyle: {
+                        fontSize: this.titleFontSize / 2
+                    }
+                }
+            }
+            this.chartInstance.setOption(adapterOption)
+            this.chartInstance.resize()
+        },
+        startInterval () {
+            if (this.timerId) {
+                clearInterval(this.timerId)
+            }
+            let index = 30
+            this.timerId = setInterval(() => {
+                this.startValue++
+                this.endValue++
+                // this.allData.polyline.data
+                // console.log((this.allData.polyline.data)[0].data.length)
+                if ((this.allData.polyline.data).length > 0) {
+                    index = (this.allData.polyline.data)[0].data.length
+                }
+                if (this.endValue > index - 1) {
+                    this.startValue = 0
+                    this.endValue = 9
+                }
+                // console.log(this.startValue)
+                // console.log(this.endValue)
+                this.updateChart()
+            }, 5000)
+        }
+    }
+}

-<div class="assets-configmanager">
-	<el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left;padding-left: 6px;">
-		<el-form-item label="" >
-			<el-input :disabled="initFlag" placeholder="输入关键字" v-model="pageInfo.keyWords" prefix-icon="el-icon-search">
-			</el-input>
-		</el-form-item>
-		<el-form-item label=""  :disabled="initFlga">
-			<res-type-tree multiple clearable collapseTags @callback="getResType" />
-		</el-form-item>
+<div class="screen-container" id="bgscreen_ref">
+    <header class="screen-header" :style="screenheaderStyle">
+        <div>
+            <img style="width: 100%" src="/vue3/src/assets/img/header_border_dark.png" alt="">
+        </div>
+        <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
+        <div class="title-left">
+            <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
+            <span :style="datetimeStyle" >2049-01-01 00:00:00</span>
+        </div>
+    </header>
+    <div class="screen-body">
+        <section class="screen-left" >
+            <!-- 本月业务量 饼图-->
+            <div id="left-top">
+                <BusinessVolume></BusinessVolume>
+            </div>
+            <!-- 本月业务量 折线图-->
+            <div id="left-bottom">
+                <TrendPolyline></TrendPolyline>
+            </div>
+        </section>
 
 
-		<el-form-item label="">
-			<machine-room @callback="getMachineRoom"></machine-room>
-		</el-form-item>
+        <section class="screen-middle">
+            <div id="middle-top">
+                <!-- 今日已申报数 图板 -->
+                <DigitalBoardTop></DigitalBoardTop>
+            </div>
+            <div id="middle-center">
+                <!-- 本月已申报数 图板 -->
+                <DigitalBoardDown></DigitalBoardDown>
+            </div>
+            <div id="middle-bottom">
+                <!-- 本月申报率折线图 -->
+                <DeclarePolyline></DeclarePolyline>
+            </div>
+        </section>
 
 
-		<el-form-item>
-			<el-button  :disabled="initFlag" type="primary" @click="onBtnSearch()">查询</el-button>
-		</el-form-item>
-	</el-form>
-	<!-- <div style="text-align: right" v-if="loadHead">
-		<el-popover placement="bottom" trigger="click">
-			<template #reference>
-				<el-button icon="el-icon-set-up" plain hairline size="small"></el-button>
-			</template>
-			<div slot="content" style="width: 100px;">
-				<div style="display: flex;flex-direction: column">
-					{{checkList}}
-					<el-checkbox-group v-model="checkList">
-						<el-checkbox :label="item.propName"  borderv-for="item in columns"
-							style="margin: 3px;width: 100px;"></el-checkbox>
-					</el-checkbox-group>
-				</div>
-			</div>
-		</el-popover>
-	</div> -->
-	<el-table :max-height="height" v-loading="loading" :data="tableList" border style="width: 100%;" header-row-class-name="tbl-header-class"
-		 :empty-text="emptyText" :stripe="true">
-		<el-table-column fixed  type="index" v-if="columns.length > 0" :index="(index) => {return index + 1}" label="序号" width="60" align="center"> </el-table-column>
-		<el-table-column v-for="item in columns" :prop="item.propKey" :label="item.propName"
-			:width="widths[item.propKey] ? widths[item.propKey] : '120'">
-			<template #default="scope" v-if="item.propKey =='resName'">
-				<el-link type="primary" @click="openDetailPage(scope.row)">{{scope.row.resName}}</el-link>
-			</template>
-		</el-table-column>
-	</el-table>
-	<div style="text-align: center">
-		<el-pagination @size-change="handleSizeChange"
-					   @prev-click="prePage"
-					   @next-click="nextPage"
-					   @current-change="handleCurrentChange"
-			:current-page="pageInfo.page" :page-sizes="[50,100, 150, 200]" :page-size="pageInfo.limit"
-			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" />
-	</div>
+        <section class="screen-right">
+            <div id="right-top">
+                <!-- 本月扣款情况 图板 -->
+                <Deduction></Deduction>
+            </div>
+            <div id="right-center">
+                <!-- 业务可用性 折线 -->
+                <Availability></Availability>
+            </div>
+            <div id="right-bottom">
+                <!-- 系统响应监控 折线 -->
+                <ResponseMonitor></ResponseMonitor>
+            </div>
+        </section>
+    </div>
 
 
+    <section class="screen-bottom">
+        <div id="bottom-one">
+            <!-- top5 条形 -->
+            <TopFive></TopFive>
+        </div>
+        <div id="bottom-two">
+            <!-- 申报库cpu监控 折线 -->
+            <BeclareCpu></BeclareCpu>
+        </div>
+        <div id="bottom-three">
+            <!-- 文书库cpu监控 折线 -->
+            <DocumentCpu></DocumentCpu>
+        </div>
+        <div id="bottom-four">
+            <!-- 带宽占用监控 折线 -->
+            <BandwidthCpu></BandwidthCpu>
+        </div>
+    </section>
+</div>
 
 
-	<el-dialog top="2vh" :title="row.title" v-model="centerDialogVisible" custom-class="config-dialog" width="80%" destroy-on-close>
-		<el-tabs v-model="activeName" @tab-click="handleClick">
-			<el-tab-pane label="基本信息" name="jbxx">
-				<div class="config-tools">
-					<el-button-group>
-						<el-button size="mini" icon="el-icon-edit-outline" @click="editConfig('jbxx')"></el-button>
-						<el-button size="mini" v-if="edits['jbxx'] && edits['jbxx'] === true" icon="el-icon-check" @click="saveConfig('jbxx')"></el-button>
-						<el-button size="mini" v-if="edits['jbxx'] && edits['jbxx'] === true" icon="el-icon-close" @click="cancelConfig('jbxx')"></el-button>
-					</el-button-group>
-				</div>
-
-				<div class="config-view">
-					<div style="display: flex;flex-direction: row;width: 100%;">
-						<div class="config-header-title">属性</div>
-						<div class="config-header-content">内容</div>
-						<div class="config-header-title">属性</div>
-						<div class="config-header-content">内容</div>
-					</div>
-					<div v-if="row.detail.jbxx != undefined" v-for="(item,index) in row.detail.jbxx"
-						style="display: flex;flex-direction: row;width: 50%;">
-						<div class="config-content-title">
-							{{item.propName}} &nbsp;
-							<i v-if="editKey[item.propKey] && editKey[item.propKey].edit === true" class="el-icon-edit" style="color: #409eff;" />
-						</div>
-						<div class="config-content-content">
-							<property-edit  :detail="item" @callback="callback"
-										   :operates="edits['jbxx']"></property-edit>
-						</div>
-					</div>
-				</div>
-			</el-tab-pane>
-			<el-tab-pane v-if="row.detail.name != undefined" v-for="(item,index) in row.detail.name"
-				:label="item.propName" :name="item.parentPropKey">
-				<div class="config-tools">
-					<el-button-group>
-						<el-button size="mini" @click="addTabDetail(item.parentPropKey)" icon="el-icon-plus"></el-button>
-						<el-button size="mini" @click="editConfig(item.parentPropKey)" icon="el-icon-edit-outline"></el-button>
-						<el-button size="mini" @click="saveTabConfig(item.parentPropKey)" v-if="edits[item.parentPropKey] && edits[item.parentPropKey] === true" icon="el-icon-check"></el-button>
-						<el-button size="mini" @click="cancelConfig(item.parentPropKey)" v-if="tabDelete[item.parentPropKey] && tabDelete[item.parentPropKey] === true" icon="el-icon-close"></el-button>
-					</el-button-group>
-				</div>
-				<div class="config-view">
-					<div style="display: flex;flex-direction: row;width: 100%;">
-						<div class="config-header-title"
-							v-if="row[item.parentPropKey] != undefined && row[item.parentPropKey].name != undefined "
-							 :style="'width:calc(' + 1/row[item.parentPropKey].name.length*100 +'% - ' + 40/row[item.parentPropKey].name.length + 'px)'"
-							v-for="(propName,index) in row[item.parentPropKey].name" >
-							{{propName}}
-						</div>
-						<div class="config-header-title" style="width: 40px">操作</div>
-					</div>
-					<div style="display: flex;flex-direction: row;width: 100%;"
-						 v-if="row[item.parentPropKey] != undefined && row[item.parentPropKey].data != undefined "
-						 v-for="(propList,index) in row[item.parentPropKey].data">
-						<div class="config-content-content"
-							 :style="'width:calc(' + 1/row[item.parentPropKey].name.length*100 +'% - ' + 40/row[item.parentPropKey].name.length + 'px)'"
-							  v-for="(propInfo,index2) in propList">
-							<property-edit  :detail="propInfo" @callback="callback"
-											:operates="edits[item.parentPropKey]"></property-edit>
-						<!--<div v-if="index2 == (propList.length -1) && propInfo.addItem && propInfo.addItem == 1"
-							style="position: absolute;width: 20px;right: 15px;" >
-							<el-button size="mini" circle icon="el-icon-delete" @click="deleConfigItem(propList,index,item.parentPropKey)"></el-button>
-						</div>-->
-						</div>
-						<div class="config-content-content" style="width: 40px;">
-							<el-button  size="mini" type="text" icon="el-icon-delete"
-										v-if="propList[0] && propList[0].addItem && propList[0].addItem == 1"
-										@click="deleConfigItem(propList,index,item.parentPropKey)"></el-button>
-						</div>
-					</div>
-				</div>
-			</el-tab-pane>
-
-		</el-tabs>
-	</el-dialog>
 </div>
 </div>