Showing 86 changed files with 4235 additions and 127 deletions

Too many changes to show.

To preserve performance only 86 of 86+ files are displayed.

... ... @@ -671,7 +671,7 @@ layui.define(['xmSelect', 'md5'], function (exports) {
resType = 'X86SERVER_BMC';
}
//如果是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);
}
//如果是虚拟化相关资源类型,则根据采集协议判断去那个页面
... ...
... ... @@ -2517,6 +2517,58 @@ layui.define(['soulTable', 'commonDetail', 'common', 'laytpl', 'view', 'admin',
{field: 'lastColTime', title: '最近采集时间', minWidth: x_170, align: 'center', 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) {
... ...
<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/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;
}
\ No newline at end of file
... ...
.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;
}
\ No newline at end of file
... ...
.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);
}
\ No newline at end of file
... ...
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;
}
\ No newline at end of file
... ...
.topfive-title-size {
position: absolute;
left: 16%;
top: 7%;
}
.topfive-title-img {
position: absolute;
left: 5%;
top: 5%;
}
\ No newline at end of file
... ...
@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;
}
\ No newline at end of file
... ...
/* 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);
\ No newline at end of file
... ...
{
"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',
name: 'operationMaintenanceConfig',
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>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<div class="com-container">
<div class="com-chart" id="bandwidthcpu_ref"></div>
</div>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...
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()
}
}
}
\ No newline at end of file
... ...
<div class="com-container">
<div class="com-chart" id="declarecpu_ref"></div>
</div>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...
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>
\ No newline at end of file
... ...
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
}
}
}
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<div class="com-container">
<div class="com-chart" id="documentcpu_ref"></div>
</div>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<div class="com-container">
<div class="com-chart" id="responsemonitor_ref"></div>
</div>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...
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('没有查询到记录!');
// });
// }
}
\ No newline at end of file
... ...
<div class="com-container">
<div class="com-chart" id="polyline_ref"></div>
</div>
\ No newline at end of file
... ...
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)
}
}
}
\ No newline at end of file
... ...
<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>
... ...