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

@@ -71,6 +71,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'common','reslist','sessions','
                         resize: false,
                         resize: false,
                         content: laytpl(res.body).render(JSON.stringify(params)),
                         content: laytpl(res.body).render(JSON.stringify(params)),
                         btn: ["选择","取消"],
                         btn: ["选择","取消"],
+                        id:'alarm_template_Table_tactics',//设定一个id，防止重复弹出
                         success: function (index, layero) {
                         success: function (index, layero) {
 
 
                         },
                         },

@@ -35,8 +35,8 @@
                  :style="{'height':height+'px','max-height':height + 'px','overflow':'hidden'}">
                  :style="{'height':height+'px','max-height':height + 'px','overflow':'hidden'}">
                 <div style="display: flex;flex-direction: row;padding: 3px;background-color: white;padding-bottom: 5px;height:45px;border-bottom: solid 1px #EBEEF5">
                 <div style="display: flex;flex-direction: row;padding: 3px;background-color: white;padding-bottom: 5px;height:45px;border-bottom: solid 1px #EBEEF5">
                     <div style="width: calc(100% - 150px);padding-left: 6px;text-align: left;">
                     <div style="width: calc(100% - 150px);padding-left: 6px;text-align: left;">
-                        <el-input v-model="keyWord" placeholder="请输入关键字" :size="$global.elementSize"
-                                  style="width: 220px;margin-right:10px" clearable/>
+                        <el-input v-model="keyWord" placeholder="请输入关键字" :size="$global.elementSize" @keydown.enter.native="searchFile"
+                                  style="width: 220px;margin-right:10px" clearable />
                         <el-button :size="$global.elementSize" @click="searchFile">
                         <el-button :size="$global.elementSize" @click="searchFile">
                             <i class="iconfont icon-sousuo"></i>搜索</el-button>
                             <i class="iconfont icon-sousuo"></i>搜索</el-button>
                         <el-button :size="$global.elementSize" @click="showUserDialog(true)" v-if="!isView && !isRecycle">
                         <el-button :size="$global.elementSize" @click="showUserDialog(true)" v-if="!isView && !isRecycle">

@@ -19,6 +19,8 @@
 
 
 @import "../css/digitalboard.css";
 @import "../css/digitalboard.css";
 
 
+@import "../css/declareReport.css";
+
 /*zj大屏*/
 /*zj大屏*/
 @import "../css/zjbigscreen.css";
 @import "../css/zjbigscreen.css";
 
 
@@ -34,4 +36,9 @@
 
 
 @import "../css/resourceStatistics.css";
 @import "../css/resourceStatistics.css";
 
 
-@import "../css/cloudPlatform.css";
+@import "../css/cloudPlatform.css";
+
+@import "../css/navTabs.css";
+
+/*对比分析*/
+@import "../css/analysis.css";

+.analysis-index-container{
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+}
+.iconAdd{
+    width:50%;
+    height:240px;
+    color:#00b3fe;
+    cursor: pointer;
+    border:1px dot-dash #00b3fe;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+/*add页面*/
+.analysis-add-container{
+    height: 100%;
+    background-color: #f6f6f6;
+}
+.add-top{
+    background-color: #FFFFFF;
+    padding:20px;
+    margin-bottom: 20px;
+    width: 100%;
+}
+.add-bottom{
+    background-color: #FFFFFF;
+    padding:20px 30px;
+    width: 100%;
+}
+.classLine{
+    width:100%;
+}
+.add-top-title{
+    text-align: left;
+}
+.add-top-select{
+    display: flex;
+    justify-content: space-between;
+}
+.bottom-condition{
+    padding:0 20px;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-around;
+}

@@ -75,7 +75,10 @@
     position: relative;
     position: relative;
     z-index: 1;
     z-index: 1;
 }
 }
-
+.yxqk .tip .asset-tip{
+    display: inline-block;
+    position: relative;
+}
 
 
 .yxqk .tip b {
 .yxqk .tip b {
     color:#00b3fe;
     color:#00b3fe;
@@ -93,7 +96,7 @@
     height:10px;
     height:10px;
     content: '';
     content: '';
     position: absolute;
     position: absolute;
-    top: 4px;
+    top: 9px;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-size: cover;
     background-size: cover;
     background-image: url('/vue3/src/assets/images/zjdp/tip.png')
     background-image: url('/vue3/src/assets/images/zjdp/tip.png')
@@ -199,7 +202,7 @@
     opacity: .9;
     opacity: .9;
     position: absolute;
     position: absolute;
     top: -10px;
     top: -10px;
-    left: 270px;
+    left: 70px;
     z-index: 999;
     z-index: 999;
     width: 132px;
     width: 132px;
     height: 170px;
     height: 170px;

@@ -22,7 +22,7 @@
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     padding: 0 0.2%;
     padding: 0 0.2%;
-    background: url(bg_backgroud.png);
+    background: url('/vue3/src/assets/images/digitalDp/bg_backgroud.png');
     background-size: 100% 100%;
     background-size: 100% 100%;
     color: #fff;
     color: #fff;
     box-sizing: border-box;
     box-sizing: border-box;
@@ -58,7 +58,7 @@
 }
 }
 .screen-left {
 .screen-left {
     height: 100%;
     height: 100%;
-    width: 30%;
+    width: 26%;
 }
 }
 .screen-left #left-top {
 .screen-left #left-top {
     height: 56%;
     height: 56%;
@@ -68,26 +68,62 @@
     height: 43.8%;
     height: 43.8%;
     position: relative;
     position: relative;
 }
 }
+.screen-left #left-bottom .declare-lineChart{
+    height: 100%;
+}
 .screen-middle {
 .screen-middle {
     height: 100%;
     height: 100%;
-    width: 40%;
+    width: 44%;
     margin-top: 0.5%;
     margin-top: 0.5%;
     margin-left: 0.2%;
     margin-left: 0.2%;
     margin-right: 0.2%;
     margin-right: 0.2%;
+    display:flex;
+}
+.middle-left{
+    width:80%;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-around;
+}
+.width-86{
+    width:86%;
+    margin-bottom: 10px;
+    align-items: flex-end;
+}
+.middle-right{
+    width: 20%;
+    /*flex: 1;*/
+    position: relative;
+    left: -5%;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+}
+.deduction-bottom{
+    height:40%;
+    position: relative;
 }
 }
 .screen-middle #middle-top {
 .screen-middle #middle-top {
     width: 100%;
     width: 100%;
-    height: 32%;
+    /*height: 32%;*/
     position: relative;
     position: relative;
 }
 }
 .screen-middle #middle-center {
 .screen-middle #middle-center {
     width: 100%;
     width: 100%;
-    height: 32%;
+    /*height: 32%;*/
     position: relative;
     position: relative;
 }
 }
+.middle-left-declare{
+    width:100%;
+}
+.middle-left-declare-rate{
+    height: 36%;
+    width:86%;
+
+}
 .screen-middle #middle-bottom {
 .screen-middle #middle-bottom {
     width: 100%;
     width: 100%;
-    height: 36%;
+    height: 100%;
     position: relative;
     position: relative;
 }
 }
 
 
@@ -103,18 +139,45 @@
 }
 }
 
 
 .screen-right #right-top {
 .screen-right #right-top {
-    height: 26%;
+    height: 30%;
     position: relative;
     position: relative;
 }
 }
 .screen-right #right-center {
 .screen-right #right-center {
-    height: 37%;
+    height: 35%;
     position: relative;
     position: relative;
 }
 }
 .screen-right #right-bottom {
 .screen-right #right-bottom {
-    height: 37%;
+    height: 33%;
     position: relative;
     position: relative;
 }
 }
+.screen-right #right-top .monitoring-bar{
+    height: 100%;
+    position: relative;
+    text-align: left;
+}
+.cpu-dropdown{
+    text-align: right;
+    position: absolute;
+    right: 10px;
+    z-index: 1;
+}
+.cpu-dropdown .el-dropdown .el-dropdown-selfdefine{
+    color:#ffffff;
+    cursor: pointer;
+    margin-right: 15px;
+}
 
 
+.el-dropdown__popper .el-dropdown-menu{
+    background-color: rgba(0,0,0,0.5);
+    border:none;
+}
+.el-dropdown-menu__item{
+    color:#ffffff;
+}
+.el-dropdown__popper.el-popper[role="tooltip"]{
+    border:none;
+    background-color: rgba(0,0,0,0);
+}
 .screen-bottom {
 .screen-bottom {
     width: 100%;
     width: 100%;
     height: 34%;
     height: 34%;
@@ -122,21 +185,30 @@
 }
 }
 .screen-bottom #bottom-one {
 .screen-bottom #bottom-one {
     height: 100%;
     height: 100%;
-    width: 25%;
+    width: 26%;
     position: relative;
     position: relative;
 }
 }
 .screen-bottom #bottom-two {
 .screen-bottom #bottom-two {
     height: 100%;
     height: 100%;
-    width: 25%;
+    width: 22%;
     position: relative;
     position: relative;
 }
 }
 .screen-bottom #bottom-three {
 .screen-bottom #bottom-three {
     height: 100%;
     height: 100%;
-    width: 25%;
+    width: 22%;
     position: relative;
     position: relative;
 }
 }
 .screen-bottom #bottom-four {
 .screen-bottom #bottom-four {
     height: 100%;
     height: 100%;
-    width: 25%;
+    width: 30%;
     position: relative;
     position: relative;
 }
 }
+.icon-arrow{
+    background-image: url("/vue3/src/assets/images/digitalDp/icon-arrow.png");
+    width:12px;
+    height:12px;
+    background-size: 100%;
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-position: center;
+}

@@ -3,6 +3,9 @@
     background-position: center;*/
     background-position: center;*/
     height: 100%;
     height: 100%;
 }
 }
+.cloud-container .container-title{
+    padding-left: 20%;
+}
 .ypt {
 .ypt {
     position: relative;
     position: relative;
     height: 100%;
     height: 100%;
@@ -26,7 +29,7 @@
     max-width: 475px;
     max-width: 475px;
     max-height: 403px;
     max-height: 403px;
     background-size: contain;
     background-size: contain;
-    background-position: inherit;
+    background-position: center;
     margin-left: 12px;
     margin-left: 12px;
     margin-right: 2px;
     margin-right: 2px;
 }
 }
@@ -51,7 +54,8 @@
 }
 }
 .ypt .item  .ui_base {
 .ypt .item  .ui_base {
     position: relative;
     position: relative;
-    left: 5px;
+    top:11%;
+    left: 9%;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     -webkit-perspective: 1000px;
     -webkit-perspective: 1000px;

-.ypt {
-    position: relative;
-    height: 1.108374rem;
-    padding-top: .08rem;
-    font-size: 0;
-    z-index: 10;
-}
-/**3D环绕开始*/
-.ypt .swiper-container{
-    height: 1.6rem;
-}
-.ypt .item {
-    background: url(../images/ypt/bg-cycle.png) 100% 100% no-repeat;
-    display: inline-block;
-    position: relative;
-    width: 3.0rem;
-    height: 1.508374rem;
-    background-size: contain;
-    margin-left: .12rem;
-    margin-right: .2rem;
-}
-.ypt .item.active{
-    display: block;
-    -moz-transition: top 3s, left 3s;
-    -webkit-transition: top 3s, left 3s;
-    transition: top 3s, left 3s;
-}
-.ypt .item .u_p3d {
-    -webkit-transform-style: preserve-3d;
-    -ms-transform-style: preserve-3d;
-    -o-transform-style: preserve-3d;
-    -moz-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-}
-
-.ypt .item  .ui_base {
-    position: relative;
-    left: .5rem;
-    width: 3.508374rem;
-    height: 0px;
-    -webkit-perspective: 1000px;
-    -moz-perspective: 1000px;
-    -ms-perspective: 1000px;
-    -o-perspective: 1000px;
-    perspective: 1000px;
-    -webkit-perspective-origin: 50% 0%;
-    -moz-perspective-origin: 50% 0%;
-    -o-perspective-origin: 50% 0%;
-    -ms-perspective-origin: 50% 0%;
-    perspective-origin: 50% 0%
-}
-
-.ypt .item .ball_c {
-    -webkit-transform-origin: 50% 50%;
-    -moz-transform-origin: 50% 50%;
-    -ms-transform-origin: 50% 50%;
-    -o-transform-origin: 50% 50%;
-    transform-origin: 50% 50%;
-    position: absolute;
-    width: 260px;
-    height: 177px;
-    text-align: center;
-    background: url(../images/ypt/cloud_bg.png) no-repeat;
-    left: .35rem;
-    top: .5rem;
-}
-.ypt .item .ball_c.HuaWeiCloud{
-    background: url(../images/ypt/HuaWeiCloud.png) no-repeat;
-}
-.ypt .item .ball_c.AliCloud{
-    background: url(../images/ypt/AliCloud.png) no-repeat;
-}
-.ypt .item .ball_c div{
-    font-size: .14rem;
-    color: #e3e9f0;
-    position: relative;
-    top: .14rem;
-    left:-.05rem;
-    font-weight: bolder;
-    /**3D旋转*/
-    -webkit-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-    -moz-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-    -ms-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-    -o-transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-    transform:rotate3d(1,1,0.35,45deg) translate3d(-.06rem,0.12rem,0.16rem);
-}
-
-.ypt .item  .ball {
-    width: .7rem;
-    height: .4rem;
-    background: url("../images/ypt/bg-s.png") no-repeat;
-    background-size: contain;
-}
-
-.ypt .item .ball_base .ball{
-    font-size: .12rem;
-    color: #fff;
-    text-align: center;
-}
-.ypt .item .ball_base .ball p{
-    font-size: .08rem;
-    padding-top: .03rem;
-    position: relative;
-}
-.ypt .item .ball_base .ball b{
-    top: .05rem;
-    position: relative;
-}
-
-.ypt .item .ball_base{
-    position: absolute;
-    width: .72rem;
-    -moz-transition: top 1.5s, left 1.5s;
-    -webkit-transition: top 1.5s, left 1.5s;
-    transition: top 1.5s, left 1.5s;
-    cursor: pointer;
-    transform: scale(0.9);
-}
-.ypt__info div.ball_base:nth-child(1) {
-    top: .002rem;
-    left: .05rem;
-}
-
-.ypt__info div.ball_base:nth-child(2) {
-    top: .002rem;
-    left: 1.45rem;
-}
-.ypt__info div.ball_base:nth-child(3) {
-    top: .55rem;
-    left: 1.9rem;
-}
-.ypt__info div.ball_base:nth-child(4) {
-    top: 1.1rem;
-    left: 1.3rem;
-}
-.ypt__info div.ball_base:nth-child(5) {
-    top: 1.10rem;
-    left: .04rem;
-}
-.ypt__info div.ball_base:nth-child(6) {
-    top: .55rem;
-    left: -.55rem;
-}
-.ypt__info .ball_base.active{
-    -moz-transition: top 0.3s;
-    -webkit-transition:top 0.3s;
-    transition: top 0.3s;
-}
-.ypt__info .ball_base.active div{
-    transform: scale(1.4);
-    background: url("../images/ypt/bg-s-active.png") no-repeat;
-    background-size: contain;
-}

+.declare-container,.declare-lineChart{
+   /*  background: url("/vue3/src/assets/images/zjdp/img-bg.png");
+     background-position: center;*/
+
+}
 .declare-container{
 .declare-container{
-     background: url("/vue3/src/assets/images/zjdp/img-bg.png");
-     background-position: center;
-     height: 100%;
-    overflow: hidden;
     max-width:323px;
     max-width:323px;
+
 }
 }
 .declare-total{
 .declare-total{
     font-size: 16px;
     font-size: 16px;
@@ -16,7 +18,7 @@
     background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
     background-image: url("/vue3/src/assets/images/zjdp/declare-title.png");
     background-position: center;
     background-position: center;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
-    margin-top:10px;
+    margin-top:15px;
     height: 53px;
     height: 53px;
 }
 }
 .total-title{
 .total-title{
@@ -31,13 +33,14 @@
     color:#d5e1f5;
     color:#d5e1f5;
     display: flex;
     display: flex;
     justify-content: space-around;
     justify-content: space-around;
+    margin-top:20px;
 }
 }
 .proportion-num{
 .proportion-num{
     font-size: 16px;
     font-size: 16px;
     color:#4fc9fc;
     color:#4fc9fc;
 }
 }
 .declare-today{
 .declare-today{
-    margin-top:20px;
+    margin-top:30px;
 }
 }
 .declare-title{
 .declare-title{
     color: #fff;
     color: #fff;

+.declare-report .grid-content{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0;
+}
+.declare-report .declare-report-num{
+    background-image: url("/vue3/src/assets/images/digitalDp/text-bg.png");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    margin-top: 20px;
+}
+.declare-report .grid-content img{
+    padding-right:10%;
+    border-right:1px solid #ffffff;
+    border-radius: 1px;
+}
+.declare-report .grid-content .title-ysb{
+    padding-left:10%;
+}
+.declare-report-top,.declare-report-bottom{
+    margin-top: 14%;
+    text-align: center;
+}
+.declare-report  .rate-title{
+    position: absolute;
+    width: 100%;
+    top: 7px;
+}
+.declare-report .grid-content.rate-container{
+    background-image: url("/vue3/src/assets/images/digitalDp/icon-rate.png");
+    background-repeat: no-repeat;
+    height: 156px;
+    background-position: center top;
+}
+.declare-report .rate-container .rate-num{
+    margin-top:10px;
+}

@@ -2,37 +2,41 @@
     text-align: center;
     text-align: center;
 }
 }
 .deduction-box-title {
 .deduction-box-title {
-    position: absolute;
+    /*position: absolute;
     left: 2%;
     left: 2%;
-    top: 1%;
+    top: 1%;*/
 }
 }
 .deduction-title-size {
 .deduction-title-size {
-    position: absolute;
+   /* position: absolute;
     left: 9%;
     left: 9%;
-    top: 22%;
+    top: 22%;*/
+}
+.deduction-num-container{
+    position: relative;
+    margin-top: 12%;
 }
 }
 .deduction-box-text-left {
 .deduction-box-text-left {
     position: absolute;
     position: absolute;
-    left: 17%;
-    top: 47%;
+    top: 20%;
+    width:100%;
 }
 }
 .deduction-box-text-right {
 .deduction-box-text-right {
     position: absolute;
     position: absolute;
-    left: 53%;
-    top: 47%;
+    top: 20%;
+    width:100%;
 }
 }
 .deduction-text-number {
 .deduction-text-number {
     color: #01E6E6;
     color: #01E6E6;
 }
 }
 
 
 .deduction-box-img-left {
 .deduction-box-img-left {
-    position: absolute;
+   /* position: absolute;
     left: 10%;
     left: 10%;
-    top: 5%;
+    top: 5%;*/
 }
 }
 
 
 .deduction-box-img-right {
 .deduction-box-img-right {
-    position: absolute;
+   /* position: absolute;
     left: 50%;
     left: 50%;
-    top: 5%;
+    top: 5%;*/
 }
 }

@@ -8,7 +8,9 @@
     position: absolute;
     position: absolute;
     color: #FEFEFE;
     color: #FEFEFE;
     top: 1%;
     top: 1%;
-    left: 6%;
+    left: 2%;
+    letter-spacing: 1px;
+    font-weight: bold;
 }
 }
 
 
 @font-face{
 @font-face{

+.navTabs-container{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+.navTabs-container .el-carousel{
+    flex: 1;
+}
+.navTabs-container .el-carousel__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.navTabs-container .el-carousel__arrow--left {
+    left: 3px;
+}
+.navTabs-container .el-carousel__arrow--right{
+    right:3px;
+}
+.rightArrow,.leftArrow{
+    cursor: pointer;
+}
+.tabContaier{
+    display: flex;
+    justify-content: space-around;
+    flex: 1;
+}
+.tabItem{
+    padding:0px 53px;
+    border-bottom: 3px solid #1ac045;
+    background-color: #0c1532;
+    border-radius: 3px;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+    font-family: "PingFang SC";
+    box-sizing: border-box;
+    height: 40px;
+    align-items: center;
+    display: flex;
+}
+.borderColorGood{
+    border-bottom: 3px solid #d2bf3f;
+
+}
+.borderColorMi{
+    border-bottom: 3px solid #f31515;
+
+}
+.tabItem:hover,.tabItem.active{
+    background-color: #0b1943;
+}

 .network-container{
 .network-container{
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
-    background-image: url("/vue3/src/assets/images/bg.jpg");
-    background-position: center;
+   /* background-image: url("/vue3/src/assets/images/bg.jpg");
+    background-position: center;*/
     text-align: left;
     text-align: left;
     overflow: visible;
     overflow: visible;
+    position: relative;
 }
 }
 
 
 #network-echart{
 #network-echart{
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
-    background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
-    background-position: center;
-    background-repeat: no-repeat;
+
+}
+.network-title{
+    position: absolute;
+    top: -10px;
+    z-index: 1;
 }
 }

 .statistics-container{
 .statistics-container{
-    background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
-    background-position: center;
+    /*background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");*/
+    /*background-position: center;*/
     height: 100%;
     height: 100%;
-    max-width: 420px;
+    max-width: 480px;
 }
 }
 .el-carousel__item h3 {
 .el-carousel__item h3 {
     color: #FFFFFF;
     color: #FFFFFF;
@@ -21,7 +21,7 @@
     /*background-color: #d3dce6;*/
     /*background-color: #d3dce6;*/
 }
 }
 .statisticsItem{
 .statisticsItem{
-    background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg.png");
+    background-image: url("/vue3/src/assets/images/zjdp/statisticc-bg-1.png");
     background-position: top;
     background-position: top;
     background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
@@ -37,15 +37,15 @@
 .listItem-health{
 .listItem-health{
     display: flex;
     display: flex;
     position: absolute;
     position: absolute;
-    left: 24px;
-    top:33px;
+    left: 18px;
+    top:36px;
 }
 }
 .listItem:nth-child(1) .listItem-health{
 .listItem:nth-child(1) .listItem-health{
-    left: 12px;
+    /*left: 7px;*/
 
 
 }
 }
 .listItem:nth-child(3) .listItem-health{
 .listItem:nth-child(3) .listItem-health{
-    left: 28px;
+    /*left: 18px;*/
 
 
 }
 }
 .listItem{
 .listItem{
@@ -57,50 +57,58 @@
 }
 }
 .listItem-num{
 .listItem-num{
     position: absolute;
     position: absolute;
-    top:33%;
+    top:36%;
     font-size: 15px;
     font-size: 15px;
     color:#61c5d5;
     color:#61c5d5;
+    width: 24px;
 }
 }
 .listItem-icon{
 .listItem-icon{
     position: absolute;
     position: absolute;
-    top:209px;
+    top:52%;
 }
 }
 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
-    right: 12px;
+    right: -20px;
 }
 }
-.listItem:nth-child(2n) .listItem-num,.listItem:nth-child(2n) .listItem-icon{
-    left: 56px;
+.listItem:nth-child(2) .listItem-num,.listItem:nth-child(2) .listItem-icon{
+    left: 74px;
 }
 }
 .listItem:nth-child(3) .listItem-num,.listItem:nth-child(3) .listItem-icon{
 .listItem:nth-child(3) .listItem-num,.listItem:nth-child(3) .listItem-icon{
-    left: 11px;
+    left: 26px;
+}
+.listItem:nth-child(4) .listItem-num,.listItem:nth-child(4) .listItem-icon{
+    left: -23px;
 }
 }
 .listItem-icon-name{
 .listItem-icon-name{
     position: absolute;
     position: absolute;
-    top: 243px;
+    top: 244px;
     font-size: 12px;
     font-size: 12px;
     color: #61c5d5;
     color: #61c5d5;
+    width: 50px;
 }
 }
 .listItem:nth-child(1) .listItem-icon-name{
 .listItem:nth-child(1) .listItem-icon-name{
-    right: 2px;
+    right: -36px;
 }
 }
-.listItem:nth-child(2n) .listItem-icon-name{
-    left: 45px;
+.listItem:nth-child(2) .listItem-icon-name{
+    left: 50%;
 }
 }
 .listItem:nth-child(3) .listItem-icon-name{
 .listItem:nth-child(3) .listItem-icon-name{
-    left: 0;
+    left: 14%;
+}
+.listItem:nth-child(4) .listItem-icon-name{
+    left: -28%;
 }
 }
 .healthList{
 .healthList{
     display: flex;
     display: flex;
     flex-flow: column;
     flex-flow: column;
     font-size: 12px;
     font-size: 12px;
     font-family: "PingFang SC";
     font-family: "PingFang SC";
-    width: 32px;
+    width: 29px;
 }
 }
 .healthList span{
 .healthList span{
     padding:0 5px;
     padding:0 5px;
 }
 }
 .healthList span.listNum{
 .healthList span.listNum{
-    padding: 3px 5px;
+    padding: 2px 5px;
 }
 }
 .listText{
 .listText{
     font-size: 13px;
     font-size: 13px;
@@ -115,7 +123,7 @@
 .statisticsTotal{
 .statisticsTotal{
     text-align: center;
     text-align: center;
     position: absolute;
     position: absolute;
-    bottom: 94px;
+    bottom: 82px;
     width: 100%;
     width: 100%;
     font-size:15px;
     font-size:15px;
     color:#61c5d5;
     color:#61c5d5;

 body{font-size: 15px;}
 body{font-size: 15px;}
 #zjdapingIndex{
 #zjdapingIndex{
-    background: url("/vue3/src/assets/images/zjdp/img-bg.png");
+    background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
     background-position: center;
     background-position: center;
+    background-size: cover;
+    font-family: "PingFang SC";
+}
+.screen-bg{
+    background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
+.zj-screen{
+    padding:0 10px;
 }
 }
 .container-title{
 .container-title{
     color: white;
     color: white;
     text-align: left;
     text-align: left;
 }
 }
+.screen-header .title-date{
+    color: #ffff;
+    left:2%;
+    top:44%;
+}
+.title-date span{
+    margin-left: 12px;
+}
 .left-40{
 .left-40{
-    width:48%;
+    width:45%;
 }
 }
 .section-right{
 .section-right{
-    width:52%;
+    width:55%;
 }
 }
 .data-cloud{
 .data-cloud{
     display: flex;
     display: flex;
 
 
 }
 }
-.flex-data,.flex-cloud,.flex-declare,.flex-chart{
-    width:50%;
+.flex-data{
+    width:55%;
+}
+.flex-cloud{
+    width:45%
+ }
+.flex-declare{
+    width:323px;
+    max-width: 323px;
+}
+.flex-chart{
+    flex:1;
+    display: flex;
+    flex-flow: column;
+    justify-content: space-between;
+    padding-bottom: 20px;
 }
 }
 
 
 .declare-chart{
 .declare-chart{
     display: flex;
     display: flex;
+    height: 550px;
 
 
 }
 }
+.declare-lineChart{
+    height:50%;
+}
+.monitoring-bar{
+    height:50%;
+}
+.screen-nav{
+    margin-bottom: 30px;
+    padding-right: 20px;
+}
 .screen-res-performance{
 .screen-res-performance{
     display: flex;
     display: flex;
+    justify-content: space-between;
+}
+.performance-lineChart{
+    margin-top:30px;
+    flex: 1;
+}
+.screen-res{
+    width:45%;
+}
+.screen-performance{
+    width:55%;
+}
+.performance-container{
+    height:100%;
+    display: flex;
+    flex-flow: column;
+}
+.performance-container .container-title{
+    margin-left:40px;
 }
 }
 /**提示展示动画 从左到右进入*/
 /**提示展示动画 从左到右进入*/
 @-webkit-keyframes fadeInLeft {
 @-webkit-keyframes fadeInLeft {

@@ -104,20 +104,12 @@ const routes = [{
 		path: '/zjdaping',
 		path: '/zjdaping',
 		name: 'zjdaping',
 		name: 'zjdaping',
 		component: () => myImport('views/zjdaping/index')
 		component: () => myImport('views/zjdaping/index')
-		// component: () => myImport('views/zjdaping/components/networkTopology/index')
-		// component: () => myImport('views/zjdaping/components/dataCenter/index')
-		// component: () => myImport('views/zjdaping/components/cloudPlatform/index')
-		// component: () => myImport('views/zjdaping/components/assetOverview/index')
-		// component: () => myImport('views/zjdaping/components/declare/index')
-		// component: () => myImport('views/zjdaping/components/lineChart/index')
-		// component: () => myImport('views/zjdaping/components/resourceStatistics/index')
-		// component: () => myImport('views/zjdaping/components/performance/index')
 	},
 	},
 	{
 	{
-		path:'/zjdapingchart',
-		name:'zjdapingchart',
-		component: () => myImport('views/zjdaping/components/barChart/index')
-
+		path: '/analysis',
+		name: 'analysis',
+		// component: () => myImport('views/analysis/components/addIndex/index')
+		component: () => myImport('views/analysis/components/add/index')
 	}
 	}
 ];
 ];
 
 

+<div class="analysis-add-container">
+    <el-row>
+        <div class="add-top">
+            <el-row>
+                <el-col :span="16" class="add-top-title">
+                    <el-button type="primary">这里是场景名称</el-button>
+                </el-col>
+                <el-col :span="8" class="add-top-select">
+                    <el-dropdown>
+                        <el-button type="primary">
+                            时间范围<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        </el-button>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item>Action 1</el-dropdown-item>
+                                <el-dropdown-item>Action 2</el-dropdown-item>
+                                <el-dropdown-item>Action 3</el-dropdown-item>
+                                <el-dropdown-item>Action 4</el-dropdown-item>
+                                <el-dropdown-item>Action 5</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                    <el-dropdown>
+                        <el-button type="primary">
+                            契合频率<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        </el-button>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item>Action 1</el-dropdown-item>
+                                <el-dropdown-item>Action 2</el-dropdown-item>
+                                <el-dropdown-item>Action 3</el-dropdown-item>
+                                <el-dropdown-item>Action 4</el-dropdown-item>
+                                <el-dropdown-item>Action 5</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                    <el-button type="primary">保存按钮</el-button>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <div class="classLine">
+                        <lineChart></lineChart>
+                    </div>
+
+
+                </el-col>
+            </el-row>
+        </div>
+    </el-row>
+    <el-row>
+        <div class="add-bottom">
+            <el-row>
+                <el-col :span="6" class="bottom-condition">
+                    <el-row>
+                        <el-col :span="24">
+                            <el-dropdown>
+                                <el-button >
+                                    电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                                </el-button>
+                                <template #dropdown>
+                                    <el-dropdown-menu>
+                                        <el-dropdown-item>Action 1</el-dropdown-item>
+                                        <el-dropdown-item>Action 2</el-dropdown-item>
+                                        <el-dropdown-item>Action 3</el-dropdown-item>
+                                        <el-dropdown-item>Action 4</el-dropdown-item>
+                                        <el-dropdown-item>Action 5</el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-dropdown>
+                                <el-button >
+                                    资源类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                                </el-button>
+                                <template #dropdown>
+                                    <el-dropdown-menu>
+                                        <el-dropdown-item>Action 1</el-dropdown-item>
+                                        <el-dropdown-item>Action 2</el-dropdown-item>
+                                        <el-dropdown-item>Action 3</el-dropdown-item>
+                                        <el-dropdown-item>Action 4</el-dropdown-item>
+                                        <el-dropdown-item>Action 5</el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-dropdown>
+                                <el-button >
+                                    指标类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
+                                </el-button>
+                                <template #dropdown>
+                                    <el-dropdown-menu>
+                                        <el-dropdown-item>Action 1</el-dropdown-item>
+                                        <el-dropdown-item>Action 2</el-dropdown-item>
+                                        <el-dropdown-item>Action 3</el-dropdown-item>
+                                        <el-dropdown-item>Action 4</el-dropdown-item>
+                                        <el-dropdown-item>Action 5</el-dropdown-item>
+                                    </el-dropdown-menu>
+                                </template>
+                            </el-dropdown>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="24">
+                            <el-input v-model="input" placeholder="Please input" />
+                        </el-col>
+                    </el-row>
+
+                </el-col>
+                <el-col :span="18">
+                    <el-tabs type="border-card">
+                        <el-tab-pane label="User">
+                            <el-table :data="tableData" border style="width: 100%">
+                                <el-table-column prop="date" label="Date" width="180" />
+                                <el-table-column prop="name" label="Name" width="180" />
+                                <el-table-column prop="address" label="Address" />
+                            </el-table>
+                        </el-tab-pane>
+                        <el-tab-pane label="Config">Config</el-tab-pane>
+                        <el-tab-pane label="Role">Role</el-tab-pane>
+                        <el-tab-pane label="Task">Task</el-tab-pane>
+                    </el-tabs>
+                </el-col>
+            </el-row>
+        </div>
+    </el-row>
+</div>

+export default {
+    name: 'addIndex',
+    template: '',
+    components:{},
+    data () {
+        return {
+            tableData: [
+                {
+                    date: '2016-05-03',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles',
+                },
+                {
+                    date: '2016-05-02',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles',
+                },
+                {
+                    date: '2016-05-04',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles',
+                },
+                {
+                    date: '2016-05-01',
+                    name: 'Tom',
+                    address: 'No. 189, Grove St, Los Angeles',
+                },
+            ],
+
+        }
+    },
+    setup(){
+
+    }
+}

+<div class="analysis-index-container">
+    <div class="iconAdd">
+        点击添加比对分析
+    </div>
+</div>

+export default {
+    name: 'addIndex',
+    template: '',
+    components:{},
+    data () {
+        return {
+
+        }
+    },
+    setup(){
+
+    }
+}

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>

+export default {
+    name: 'analysis',
+    template: '',
+    components:{},
+    data () {
+        return {
+
+        }
+    },
+    setup(){
+
+    }
+}

-<div class="com-container">
-    <div class="com-chart" id="availability_ref"></div>
+<div class="com-container available-chart" id="availability_ref" style="text-align: left" >
+    <img :style="comtitleImgStyle" src="/vue3/src/assets/images/digitalDp/title-availability.png" alt="">
+    <LineChart :optionData="optionData" v-if="optionData"></LineChart>
+    <!--<div class="com-chart" ></div>
     <div class="topfive-box-title">
     <div class="topfive-box-title">
-        <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> <!-- bor1_6 -->
+        <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> &lt;!&ndash; bor1_6 &ndash;&gt;
         <span :style="comtitleTextStyle" class="available-title-size">业务可用性</span>
         <span :style="comtitleTextStyle" class="available-title-size">业务可用性</span>
-    </div>
+    </div>-->
 </div>
 </div>

 export default {
 export default {
-    name: 'Availability',
+    name: 'availability',
     template: '',
     template: '',
-    components: {},
-    data () {
+    components: {
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
+    data(){
         return {
         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"]
-                }
-            },
-            titleFontSize: 20,
-            startValue: 0, // 区域缩放的起点值
-            endValue: 6, // 区域缩放的终点值
-            timerId: null // 定时器的标识
+            titleFontSize:20,
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/sxview/getBusinessAvailability',
+            kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
+            busId:'247c0c978f574285bf642f55611ea75d',
+            performanceData:'',
+            xAxisData:'',
+            yAxisData:'',
+            optionData:'',
+            ySeriesCommon:[]
+
         }
         }
     },
     },
-    mounted () {
-        this.initChart()
-        this.getData()
-        window.addEventListener('resize', this.screenAdapter)
-        this.screenAdapter()
-    },
-    unmounted () {
-        window.removeEventListener('resize', this.screenAdapter)
-        clearInterval(this.timerId)
-    },
     computed: {
     computed: {
         comtitleTextStyle () {
         comtitleTextStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 1.2 + 'px'
+                fontSize: this.titleFontSize / 2.1 + 'px'
             }
             }
         },
         },
         comtitleImgStyle () {
         comtitleImgStyle () {
             return {
             return {
-                // height: this.titleFontSize + 'px',
-                width: this.titleFontSize * 8 + 'px'
+                height: this.titleFontSize * 1.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,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        const xAxisData=Vue.ref();
+        const yAxisData=Vue.ref([]);
+        const legendData=Vue.ref([]);
+
+        // 半透明的颜色值
+        const colorArr1 = [
+            'rgba(151,213,244, 0.8)',
+            'rgba(239,224,167, 0.8)',
+            'rgba(229,171,209, 0.8)',
+            'rgba(151,170,255, 0.8)'
+        ]
+        //   全透明的颜色值
+        const colorArr2 = [
+            'rgba(151,213,244, 0)',
+            'rgba(239,224,167, 0)',
+            'rgba(229,171,209, 0)',
+            'rgba(151,170,255, 0)'
+        ]
+        // 挂载完
+        Vue.onMounted(() => {
+            proxy.screenAdapter();
+            proxy.getData();
+
+        })
+        const getData=()=>{
+            let params = {
+                kpiIds: proxy.kpiIds,
+                busId: proxy.busId,
+                startTime:'',
+                endTime:'',
+                access_token:localStorage.getItem('access_token')
+            };
+            $.get(proxy.domainName +proxy.apiUrl,params,function (res) {
+                const data = res;
+                if (data ) {
+                    if(data.map){
+                        let resData=data.map;
+                        proxy.legendData=resData.legend;
+                        proxy.xAxisData=resData.x;
+                        proxy.yAxisData=resData.y;
+                    }else{
+                        let nullArr=[];
+                        for(let i=0;i<4;i++){
+                            nullArr.push(i)
+                            proxy.legendData.push({
+                                name:''
+                            })
                         }
                         }
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
+                        proxy.xAxisData=nullArr;
+                        for(let i=0;i<4;i++){
+                            proxy.yAxisData.push(nullArr);
+
                         }
                         }
+
                     }
                     }
+
+
+                    proxy.optionInit();
+
                 }
                 }
-            }
-            this.chartInstance.setOption(initOption)
-        },
-        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: [
+            // proxy.optionInit();
+
+        }
+
+        const optionInit=()=>{
+
+            let data3=proxy.yAxisData[0];
+            let data4=proxy.yAxisData[3];
+            let data2=proxy.yAxisData[2];
+            let data1=proxy.yAxisData[1];
+
+            let min1=proxy.calMin([data1,data2]);
+            let max1=proxy.calMax([data1,data2]);
+            let min2=proxy.calMin([data3,data4]);
+            let max2=proxy.calMax([data3,data4]);
+            proxy.legendData.map((item,index)=>{
+                let i=0;
+                if(index%2==0 ||index%3==0){
+                    i=0;
+                }else{
+                    i=1;
+                }
+                proxy.ySeriesCommon.push(
                     {
                     {
-                        name: seriesName,
+                        name:item,
                         type: 'line',
                         type: 'line',
-                        data: seriesData,
-                        smooth: true,
+                        smooth:true,
+                        // stack: 'Total',
+                        show:false,
+                        data:proxy.yAxisData[index],
+                        yAxisIndex:i,
+                        showSymbol:false,
+                        itemStyle : {
+                            normal : {
+                                color:colorArr1[index],//tooltip里的小圆点颜色
+                                lineStyle:{
+                                    color:colorArr1[index],
+                                    width:1
+                                }
+                            }
+                        },
                         areaStyle: {
                         areaStyle: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                {
+                            // color:'rgba(151,213,244,0.4)',
+                            normal:{
+                                color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
                                     offset: 0,
                                     offset: 0,
-                                    color: colorArr1[2]
-                                }, // %0的颜色值
-                                {
+                                    color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
+                                }, {
                                     offset: 1,
                                     offset: 1,
-                                    color: colorArr2[2]
-                                } // 100%的颜色值
-                            ])
-                        }
+                                    color: colorArr2[index]
+                                }])
+                            }
+
+                        },
+                    },
+                )
+            })
+            //业务双y轴数据
+
+            // let xAxisDataLength=proxy.ySeriesCommon[0].length;
+            let xAxisData=[];
+            if(proxy.xAxisData){
+                proxy.xAxisData.map((item,index)=>{
+                    if(index%20==0){
+                        xAxisData.push(item)
+
                     }
                     }
-                ]
+                })
+
             }
             }
-            this.chartInstance.setOption(dataOption)
-        },
-        screenAdapter () {
-            this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
-            const adapterOption = {
+            proxy.optionData = {
+                title: {
+                    text: ''
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor:'rgba(50,50,50,0.7)',
+                    borderColor:"#333",
+                    textStyle:{
+                        color:"#fff",
+                        align:'left'
+                    }
+
+                },
                 legend: {
                 legend: {
-                    itemWidth: this.titleFontSize,
-                    itemHeight: this.titleFontSize,
-                    itemGap: this.titleFontSize,
+                    data: proxy.legendData,
+                    itemHeight:0,//图例圆圈大小设置
+                    y:'0px',
                     textStyle: {
                     textStyle: {
-                        fontSize: this.titleFontSize / 2
+                        color: '#ffffff',
+                        fontsize:"12px"
                     }
                     }
+
+                },
+                grid: {
+                    top:'15%',
+                    left: '3%',
+                    right: '4%',
+                    // bottom: '3%',
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxisData,
+
+                    axisLine:{
+                        show:false,//是否显示坐标线
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                    },
+
+                },
+                yAxis:[
+                    {
+
+                        type: 'value',
+                        axisLabel: {
+                            formatter: '{value} %'//以百分比显示
+                        },
+                        splitLine:{
+                            lineStyle: {
+                                color:'#0a1b31'
+                            }
+                        },
+                        min:0,
+                        max:100,
+                        splitNumber:5,
+                        interval:(100-0)/5
+                    }, {
+                        name: '单位:万',
+                        type: 'value',
+                        axisLabel: {
+                            show: true,
+                            interval: 'right',//居中显示
+                        },
+                        splitLine:{
+                            lineStyle: {
+                                color:'#0a1b31'
+                            }
+                        },
+                        min:min2,
+                        max:max2,
+                        splitNumber:5,
+                        interval:(max2-min2)/5
+                    },
+                ],
+                series: proxy.ySeriesCommon,
+                itemStyle:{
+                    showSymbol:false
                 }
                 }
-            }
-            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)*/
+            };
+        }
+        //计算最大值
+        const calMax=(arr)=>{
+            let max=0;
+            arr.forEach((el)=>{
+                el.forEach((el1)=>{
+                    if(!(el1 === undefined || el1 === '')){
+                        if(max<el1){
+                            max=el1;
+                        }
+                    }
+                })
+            })
+            let maxint=Math.ceil(max/9.5);
+            let maxval=maxint * 10;//让显示的刻度是整数
+            return maxval;
+        }
+        //计算最小值
+        const calMin=(arr)=>{
+            let min=0;
+            arr.forEach((el)=>{
+                el.forEach((el1)=>{
+                    if(!(el1 === undefined || el1 === '')){
+                        if(min>el1){
+                            min=el1;
+                        }
+                    }
+                })
+            })
+            let minint=Math.floor(min/10);
+            let minval=minint * 10;//让显示的刻度是整数
+            return minval;
+        }
+
+        const screenAdapter=()=>{
+            proxy.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
+        }
+
+        return{
+            calMax,
+            calMin,
+            optionInit,
+            getData,
+            xAxisData,
+            yAxisData,
+            legendData,
+            screenAdapter
         }
         }
     }
     }
-}
+}

-<div class="com-container">
-    <div class="com-chart" id="bandwidthcpu_ref"></div>
+<div class="com-container"id="bandwidthcpu_ref">
+    <LineChart :optionData="optionData"  v-if="optionData"></LineChart>
 </div>
 </div>

 export default {
 export default {
     name: 'BandwidthCpu',
     name: 'BandwidthCpu',
     template: '',
     template: '',
-    components: {},
+    props:['commandVal'],
+    components: {
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
     data () {
     data () {
         return {
         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"]
-                }
-            },
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/bigScreen/monitoring?function=',
+            optionData:'',
+            allData: '',
+            newCommandVal:this.commandVal,
             startValue: 0, // 区域缩放的起点值
             startValue: 0, // 区域缩放的起点值
             endValue: 6, // 区域缩放的终点值
             endValue: 6, // 区域缩放的终点值
             timerId: null // 定时器的标识
             timerId: null // 定时器的标识
         }
         }
     },
     },
+    setUp(){
+        const allData=ref({});
+        return{
+            allData
+        }
+    },
     mounted () {
     mounted () {
-        this.initChart()
         this.getData()
         this.getData()
         window.addEventListener('resize', this.screenAdapter)
         window.addEventListener('resize', this.screenAdapter)
         this.screenAdapter()
         this.screenAdapter()
@@ -36,69 +34,77 @@ export default {
         window.removeEventListener('resize', this.screenAdapter)
         window.removeEventListener('resize', this.screenAdapter)
         clearInterval(this.timerId)
         clearInterval(this.timerId)
     },
     },
+    watch:{
+        commandVal(newValue, oldValue) {
+            this.newCommandVal=newValue
+            this.getData()
+        }
+
+    },
     methods: {
     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,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
+
+        getData () {
+            let that=this;
+                $.get(this.domainName +this.apiUrl+this.newCommandVal,function (ret){
+                    if(ret){
+                        let dataArr=[];
+                        let xAxisData=[];
+                        if(ret.ports && ret.ports.length>1 ){
+                            ret.ports.map((item,index)=>{
+
+                                    dataArr.push({
+                                        name:item.name,
+                                        data:item.data.y,
+                                    })
+
+                            })
+                            xAxisData=ret.ports[0].x
+                        }else{
+                            for(let i=0;i<12;i++){
+                                dataArr.push('0')
+                            }
                         }
                         }
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
+
+                        that.allData= {
+                            polyline: {
+                                title: "带宽占用监控",
+                                unit: "MB",
+                                data:dataArr
+                                /*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"]
+                                today: xAxisData
+                            }
                         }
                         }
+                        that.updateChart()
+                        that.startInterval()
                     }
                     }
-                }
-            }
-            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 () {
         updateChart () {
             // 半透明的颜色值
             // 半透明的颜色值
             const colorArr1 = [
             const colorArr1 = [
-                'rgba(11, 168, 44, 0.5)',
+                'rgba(35, 255, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
+                'rgba(11, 168, 44, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(250, 105, 0, 0.5)'
                 'rgba(250, 105, 0, 0.5)'
             ]
             ]
-            // 全透明的颜色值
+            //   全透明的颜色值
             const colorArr2 = [
             const colorArr2 = [
-                'rgba(11, 168, 44, 0)',
+                'rgba(35, 255, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(22, 242, 217, 0)',
                 'rgba(22, 242, 217, 0)',
+                'rgba(11, 168, 44, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(250, 105, 0, 0)'
                 'rgba(250, 105, 0, 0)'
             ]
             ]
@@ -109,6 +115,16 @@ export default {
                     type: 'line',
                     type: 'line',
                     data: item.data,
                     data: item.data,
                     smooth: true,
                     smooth: true,
+                    showSymbol:false,
+                    itemStyle : {
+                        normal : {
+                            color:colorArr1[index],//tooltip里的小圆点颜色
+                            lineStyle:{
+                                color:colorArr1[index],
+                                width:2,
+                            }
+                        }
+                    },
                     areaStyle: {
                     areaStyle: {
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                             {
                             {
@@ -129,29 +145,86 @@ export default {
             })
             })
             const title = this.allData.polyline.title
             const title = this.allData.polyline.title
             const unit = this.allData.polyline.unit
             const unit = this.allData.polyline.unit
-            const dataOption = {
+            const seriesData=seriesArr;
+            let xAxisData=timeArr;
+            this.optionData = {
                 title: {
                 title: {
                     text: title,
                     text: title,
                     left: 'center',
                     left: 'center',
-                    bottom: '8%'
-                },
-                xAxis: {
-                    data: timeArr
+                    bottom: '8%',
+                    textStyle: {
+                        fontSize: this.titleFontSize*0.5,
+                        color:'#ffffff'
+                    }
+
                 },
                 },
-                yAxis: {
-                    name: unit
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor:'rgba(50,50,50,0.7)',
+                    borderColor:"#333",
+                    textStyle:{
+                        color:"#fff",
+                        align:'left'
+                    }
+
                 },
                 },
                 legend: {
                 legend: {
-                    data: legendArr
+                    data: legendArr,
+                    itemHeight:0,//图例圆圈大小设置
+                    right: '5%',
+                    top: '5%',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontsize:"12px"
+                    }
+
                 },
                 },
-                dataZoom: {
-                    show: false,
-                    startValue: this.startValue,
-                    endValue: this.endValue
+                grid: {
+                    top: '15%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '20%',
+                    containLabel: true
                 },
                 },
-                series: seriesArr
-            }
-            this.chartInstance.setOption(dataOption)
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxisData,
+
+                    axisLine:{
+                        show:false,//是否显示坐标线
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                    },
+
+                },
+                yAxis: {
+                    type: 'value',
+                    name:unit,
+                    nameTextStyle:{
+                        color:'#ffffff',
+                        padding:[0,0,0,-20]
+                    },
+                    axisLabel: {
+                        color:'#ffffff',
+                        // formatter: '{value} %'//以百分比显示
+                    },
+                    axisLine:{
+                        show:true,//是否显示坐标线
+                    },
+                    splitLine:{
+                        lineStyle: {
+                            color:'#0a1b31'
+                        }
+                    }
+
+                },
+                series: seriesData
+            };
         },
         },
         screenAdapter () {
         screenAdapter () {
             this.titleFontSize = document.getElementById('bandwidthcpu_ref').offsetWidth / 100 * 3.6
             this.titleFontSize = document.getElementById('bandwidthcpu_ref').offsetWidth / 100 * 3.6
@@ -182,8 +255,7 @@ export default {
                     }
                     }
                 }
                 }
             }
             }
-            this.chartInstance.setOption(adapterOption)
-            this.chartInstance.resize()
+
         },
         },
         startInterval () {
         startInterval () {
             if (this.timerId) {
             if (this.timerId) {

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

@@ -4,6 +4,8 @@ export default {
     components: {},
     components: {},
     data () {
     data () {
         return {
         return {
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/bigScreen/findPortfolio',//今日业务量
             chartInstance: null,
             chartInstance: null,
             allData: [{
             allData: [{
                 name: "今日业务量",
                 name: "今日业务量",
@@ -20,23 +22,24 @@ export default {
                     { name: "网络发票",value: "712204", color: "#A35CFF"}
                     { name: "网络发票",value: "712204", color: "#A35CFF"}
                 ]
                 ]
             }],
             }],
+            colorData:['#0D45FE','#00FFB9','#A35CFF'],
             titleFontSize: 30
             titleFontSize: 30
         }
         }
     },
     },
     computed: {
     computed: {
         comtitleTextStyle () {
         comtitleTextStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 1.3 + 'px'
+                fontSize: this.titleFontSize / 1 + 'px'
             }
             }
         },
         },
         comtitleImgStyle () {
         comtitleImgStyle () {
             return {
             return {
-                height: this.titleFontSize * 1.5 + 'px'
+                height: this.titleFontSize * 2.1 + 'px'
             }
             }
         },
         },
         comcircletextStyle () {
         comcircletextStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 1.8 + 'px'
+                fontSize: this.titleFontSize / 1.3 + 'px'
             }
             }
         }
         }
     },
     },
@@ -58,7 +61,7 @@ export default {
                     top: '20%',
                     top: '20%',
                     left: 'center',
                     left: 'center',
                     textStyle: {
                     textStyle: {
-                        color: 'wihte'
+                        color: '#ffffff'
                     }
                     }
                 }
                 }
             }
             }
@@ -67,8 +70,20 @@ export default {
         async getData () {
         async getData () {
             // await this.$http.get()
             // await this.$http.get()
             // const { data: ret } = await this.$http.get('volume')
             // const { data: ret } = await this.$http.get('volume')
-            // this.allData = ret
-            // console.log(ret)
+            const { data: ret } = await $.get(this.domainName +this.apiUrl)
+            //本月业务量
+            // const { data: ret1 } = await $.get(this.domainName +this.apiUrl1)
+            let retData=[];
+            retData.push({
+                name:'今日业务量',
+                data:ret
+            })
+            retData.push({
+                name:'本月业务量',
+                data:ret
+            })
+            this.allData = retData
+
             this.updateChart()
             this.updateChart()
         },
         },
         updateChart () {
         updateChart () {
@@ -76,30 +91,41 @@ export default {
                 ['22%', '65%'],
                 ['22%', '65%'],
                 ['66%', '65%']
                 ['66%', '65%']
             ]
             ]
+
             const seriesArr = this.allData.map((item, index) => {
             const seriesArr = this.allData.map((item, index) => {
                 const dataArr = []
                 const dataArr = []
-                item.data.map(inner => {
-                    console.log(inner)
+                if(item.data){
+                    item.data.map(inner => {
+                        dataArr.push({
+                            name: inner.name,
+                            value: inner.num,
+                            /*itemStyle: {
+                                color: this.colorData[index]
+                            }*/
+                        })
+                    })
+                }else{
                     dataArr.push({
                     dataArr.push({
-                        name: inner.name,
-                        value: inner.value,
-                        itemStyle: {
-                            color: inner.color
-                        }
+                        name: '暂无数据',
+                        value: 0
+
                     })
                     })
-                })
+                }
+
                 return {
                 return {
                     type: 'pie',
                     type: 'pie',
                     radius: ['28%', '42%'],
                     radius: ['28%', '42%'],
                     center: centerArr[index],
                     center: centerArr[index],
+                    color:this.colorData,
                     itemStyle: {
                     itemStyle: {
-                        borderRadius: 5,
+                        borderRadius: 2,
                         borderWidth: 2
                         borderWidth: 2
                     },
                     },
                     label: {
                     label: {
                         position: 'outer',
                         position: 'outer',
                         alignTo: 'labelLine',
                         alignTo: 'labelLine',
-                        formatter: '{c}'
+                        formatter: '{c}',
+                        color:'#ffffff'
                     },
                     },
                     data: dataArr
                     data: dataArr
                 }
                 }
@@ -132,10 +158,10 @@ export default {
                 // },
                 // },
                 legend: {
                 legend: {
                     itemWidth: this.titleFontSize * 1.5,
                     itemWidth: this.titleFontSize * 1.5,
-                    itemHeight: this.titleFontSize / 6,
+                    itemHeight: this.titleFontSize / 4,
                     itemGap: this.titleFontSize * 2.5,
                     itemGap: this.titleFontSize * 2.5,
                     textStyle: {
                     textStyle: {
-                        fontSize: this.titleFontSize / 2
+                        fontSize: this.titleFontSize / 1.3
                     }
                     }
                 }
                 }
             }
             }

-<div class="com-container">
-    <div class="com-chart" id="declarecpu_ref"></div>
+<div class="com-container" id="declarecpu_ref">
+    <LineChart :optionData="optionData"  v-if="optionData"></LineChart>
+
+<!--    <div class="com-chart" id="declarecpu_ref"></div>-->
 </div>
 </div>

 export default {
 export default {
     name: 'ResponseMonitor',
     name: 'ResponseMonitor',
     template: '',
     template: '',
-    components: {},
+    components: {
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
     data () {
     data () {
         return {
         return {
-            chartInstance: null,
+            legendData:'',
+            optionData:'',
             allData: {
             allData: {
                 polyline: {
                 polyline: {
                     title: "申报库CPU监控",
                     title: "申报库CPU监控",
                     unit: "cpu%",
                     unit: "cpu%",
                     data: [{
                     data: [{
                         name: "80.12.97.2",
                         name: "80.12.97.2",
-                        data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
+                        datas: ["12","15","21","18","20","37","45","23","12","5","7","14"]
                     }, {
                     }, {
                         name: "80.12.77.3",
                         name: "80.12.77.3",
-                        data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
+                        datas: ["22","35","41","68","70","57","45","33","24","15","7","10"]
                     }]
                     }]
                 },
                 },
                 xAxis: {
                 xAxis: {
@@ -22,94 +27,150 @@ export default {
                 }
                 }
             },
             },
             startValue: 0, // 区域缩放的起点值
             startValue: 0, // 区域缩放的起点值
-            endValue: 6, // 区域缩放的终点值
-            timerId: null // 定时器的标识
+            endValue: 9, // 区域缩放的终点值
+            timerId: null, // 定时器的标识
+            titleFontSize: 30,
+            kpiIds:'KPI20352505',
+            resId:'4c582c0603654352ba4f905e88a56863',
+            resId1:'adeeddd6023a4157be523ac5d3b60ed6',
+
+            curve: 'KPIDA0ACBBP',
+            rateTitle: 'KPIDA0ACBBK',
+            numerTitle: 'KPIDA0ACBBG'
         }
         }
     },
     },
+
     mounted () {
     mounted () {
-        this.initChart()
-        this.getData()
+
+        this.getData(this)
         window.addEventListener('resize', this.screenAdapter)
         window.addEventListener('resize', this.screenAdapter)
         this.screenAdapter()
         this.screenAdapter()
+
     },
     },
     unmounted () {
     unmounted () {
-        window.removeEventListener('resize', this.screenAdapter)
+        // window.removeEventListener('resize', this.screenAdapter)
         clearInterval(this.timerId)
         clearInterval(this.timerId)
     },
     },
     methods: {
     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'
+        getData1(that){
+            const { proxy } = Vue.getCurrentInstance();
+
+            var params = {
+                resId: that.resId1,
+                kpiIds: that.kpiIds,
+                subResId: 'vmem',
+                startTime:'',
+                endTime:'',
+                access_token:localStorage.getItem("access_token")
+            };
+            // proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
+                var res={
+                    code:'0',
+                    data:{
+                        kpiUnit:'%',
+                        names:['20:10','21:10','22:15','23:15'],
+                        series:[
+                            {
+                                name:'89.12.97.3',
+                                datas:[0.8,1,1,1,1,0.7,1,1],
+                                flag:'vmem'
+                            }
+                        ]
                     }
                     }
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
-                        }
+                }
+                if(res && res.data){
+                    let resData=res.data;
+                    that.allData.polyline.data.push(resData.series)
+                    that.updateChart()
+
+                }
+            // });
+        },
+
+        getData (that) {
+            const { proxy } = Vue.getCurrentInstance();
+            var params = {
+                resId: that.resId,
+                kpiIds: that.kpiIds,
+                subResId: 'vmem',
+                startTime:'',
+                endTime:'',
+                access_token:localStorage.getItem("access_token")
+            };
+            // proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
+                var res={
+                    code:'0',
+                    data:{
+                        kpiUnit:'%',
+                        names:['20:10','21:10','22:15','23:15'],
+                        series:[
+                            {
+                                name:'89.12.97.2',
+                                datas:[1,1,1,1,1,1,1,1],
+                                flag:'vmem'
+                            }
+                        ]
                     }
                     }
-                },
-                yAxis: {
-                    type: 'value',
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
+                }
+                if(res && res.data){
+                    let resData=res.data;
+                    that.allData = {
+                        polyline: {
+                            title: "申报库CPU监控",
+                            unit: "cpu%",
+                            data: resData.series
+                        },
+                        xAxis: {
+                            today:resData.names
                         }
                         }
-                    }
+                    };
+                    that.getData1(that)
                 }
                 }
-            }
-            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 () {
         updateChart () {
             // 半透明的颜色值
             // 半透明的颜色值
             const colorArr1 = [
             const colorArr1 = [
-                'rgba(11, 168, 44, 0.5)',
+                'rgba(35, 255, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
+                'rgba(11, 168, 44, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(250, 105, 0, 0.5)'
                 'rgba(250, 105, 0, 0.5)'
             ]
             ]
-            // 全透明的颜色值
+            //   全透明的颜色值
             const colorArr2 = [
             const colorArr2 = [
-                'rgba(11, 168, 44, 0)',
+                'rgba(35, 255, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(22, 242, 217, 0)',
                 'rgba(22, 242, 217, 0)',
+                'rgba(11, 168, 44, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(250, 105, 0, 0)'
                 'rgba(250, 105, 0, 0)'
             ]
             ]
             const timeArr = this.allData.xAxis.today
             const timeArr = this.allData.xAxis.today
-            const seriesArr = this.allData.polyline.data.map((item, index) => {
-                return {
+            const seriesArr = this.allData.polyline.data;
+            const title=this.allData.polyline.title;
+            const unit=this.allData.polyline.unit;
+
+            let seriesData=[];
+
+            $.each(seriesArr,function (index,item){
+                seriesData .push({
                     name: item.name,
                     name: item.name,
                     type: 'line',
                     type: 'line',
-                    data: item.data,
+                    data: item.datas,
                     smooth: true,
                     smooth: true,
+                    showSymbol:false,
+                    itemStyle : {
+                        normal : {
+                            color:colorArr1[index],//tooltip里的小圆点颜色
+                            lineStyle:{
+                                color:colorArr1[index],
+                                width:2,
+                            }
+                        }
+                    },
                     areaStyle: {
                     areaStyle: {
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                             {
                             {
@@ -122,84 +183,130 @@ export default {
                             } // 100%的颜色值
                             } // 100%的颜色值
                         ])
                         ])
                     }
                     }
-                }
+                })
             })
             })
+
             // 图例的数据
             // 图例的数据
             const legendArr = this.allData.polyline.data.map(item => {
             const legendArr = this.allData.polyline.data.map(item => {
                 return item.name
                 return item.name
             })
             })
-            const title = this.allData.polyline.title
-            const unit = this.allData.polyline.unit
-            const dataOption = {
+            //x轴数据
+            // let xAxisDataLength=seriesData.length;
+            // let xAxisData=[];
+            // for(let i=1;i<=xAxisDataLength;i++){
+            //     xAxisData.push(i)
+            // }
+            let xAxisData=timeArr;
+            this.optionData = {
                 title: {
                 title: {
                     text: title,
                     text: title,
                     left: 'center',
                     left: 'center',
-                    bottom: '8%'
-                },
-                xAxis: {
-                    data: timeArr
+                    bottom: '8%',
+                    textStyle: {
+                        fontSize: this.titleFontSize*0.5,
+                        color:'#ffffff'
+                    }
+
                 },
                 },
-                yAxis: {
-                    name: unit
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor:'rgba(50,50,50,0.7)',
+                    borderColor:"#333",
+                    textStyle:{
+                        color:"#fff",
+                        align:'left'
+                    }
+
                 },
                 },
                 legend: {
                 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: {
+                    data: legendArr,
+                    itemHeight:0,//图例圆圈大小设置
+                    right: '5%',
+                    top: '5%',
                     textStyle: {
                     textStyle: {
-                        fontSize: this.titleFontSize,
-                        color: 'white'
+                        color: '#ffffff',
+                        fontsize:"12px"
                     }
                     }
+
+                },
+                grid: {
+                    top: '15%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '20%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxisData,
+
+                    axisLine:{
+                        show:false,//是否显示坐标线
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                    },
+
                 },
                 },
                 yAxis: {
                 yAxis: {
-                    top: this.titleFontSize,
-                    nameTextStyle: {
-                        padding: [0, 0, -(this.titleFontSize / 2), -(this.titleFontSize)], // 修改位置
-                        fontSize: this.titleFontSize / 2,
-                        color: 'white'
+                    type: 'value',
+                    name:'cpu%',
+                    nameTextStyle:{
+                        color:'#ffffff',
+                        padding:[0,0,0,-20]
+                    },
+                    axisLabel: {
+                        color:'#ffffff',
+                        // formatter: '{value} %'//以百分比显示
+                    },
+                    axisLine:{
+                        show:true,//是否显示坐标线
+                    },
+                    splitLine:{
+                        lineStyle: {
+                            color:'#0a1b31'
+                        }
                     }
                     }
+
                 },
                 },
+                series: seriesData
+            };
+
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('declarecpu_ref').offsetWidth / 100 * 3.6
+            console.log(this.titleFontSize)
+            const adapterOption = {
                 legend: {
                 legend: {
                     itemWidth: this.titleFontSize,
                     itemWidth: this.titleFontSize,
                     itemHeight: this.titleFontSize,
                     itemHeight: this.titleFontSize,
                     itemGap: this.titleFontSize,
                     itemGap: this.titleFontSize,
                     textStyle: {
                     textStyle: {
-                        fontSize: this.titleFontSize / 1.5
+                        fontSize: this.titleFontSize / 2
                     }
                     }
                 }
                 }
             }
             }
-            this.chartInstance.setOption(adapterOption)
-            this.chartInstance.resize()
+
         },
         },
         startInterval () {
         startInterval () {
             if (this.timerId) {
             if (this.timerId) {
                 clearInterval(this.timerId)
                 clearInterval(this.timerId)
             }
             }
-            let index = 12
+            let index = 10
             /*this.timerId = setInterval(() => {
             /*this.timerId = setInterval(() => {
                 this.startValue++
                 this.startValue++
                 this.endValue++
                 this.endValue++
-                if ((this.allData.polyline.data).length > 0) {
-                    index = (this.allData.polyline.data)[0].data.length
+                if (this.allData.polyline.data.data.length > 0) {
+                    index = this.allData.polyline.data.data.length
                 }
                 }
                 if (this.endValue > index - 1) {
                 if (this.endValue > index - 1) {
                     this.startValue = 0
                     this.startValue = 0
-                    this.endValue = 6
+                    this.endValue = 9
                 }
                 }
-                console.log(this.startValue)
-                console.log(this.endValue)
                 this.updateChart()
                 this.updateChart()
             }, 5000)*/
             }, 5000)*/
         }
         }

 <div class="com-container">
 <div class="com-container">
-    <div class="com-chart" id="declarepolyline_ref"></div>
-    <div class="declarepolyline-title" :style="comtitlesizeStyle">
-        <el-row>
-            <el-col :span="24">
-                <div class="grid-content bg-purple-dark">
-                    <img src="./src/assets/img/icon-ysb.png" :style="comimgsizeStyle">
-                    <span>本月应申报</span>
-                </div>
-            </el-col>
-        </el-row>
-        <el-row>
-            <el-col :span="24">
-                <div class="grid-content bg-purple-dark" :style="comtitletextStyle">
-                    {{declareNumer}}
-                </div>
-            </el-col>
-        </el-row>
-        <el-row>
-            <el-col :span="24">
-                <div class="grid-content bg-purple-dark">
-                    <img src="./src/assets/img/icon-sbl.png" :style="comimgsizeStyle">
-                    <span>本月申报率</span>
-                </div>
-            </el-col>
-        </el-row>
-        <el-row>
-            <el-col :span="24">
-                <div class="grid-content bg-purple-dark" :style="comtitletextStyle">
-                    <span>{{declareRateLeft}}</span><span :style="comboxtextStyle">{{declareRateRight}}</span>
-                </div>
-            </el-col>
-        </el-row>
-    </div>
+    <LineChart :optionData="optionData"  v-if="optionData"></LineChart>
 </div>
 </div>

 export default {
 export default {
     name: 'declarePolyline',
     name: 'declarePolyline',
     template: '',
     template: '',
-    components: {},
+    components: {
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
     data () {
     data () {
         return {
         return {
             chartInstance: null,
             chartInstance: null,
+            chartId:'declarepolyline_ref',
+            yAxisCommon:'',
+            ySeriesCommon:'',
+            legendData:'',
+            optionData:'',
             // allData: {
             // allData: {
             //     polyline: {
             //     polyline: {
             //         data: {
             //         data: {
@@ -58,53 +67,17 @@ export default {
         }
         }
     },
     },
     mounted () {
     mounted () {
-        this.initChart()
+
         this.getData(this)
         this.getData(this)
-        window.addEventListener('resize', this.screenAdapter)
-        this.screenAdapter()
+        // window.addEventListener('resize', this.screenAdapter)
+        // this.screenAdapter()
     },
     },
     unmounted () {
     unmounted () {
-        window.removeEventListener('resize', this.screenAdapter)
+        // window.removeEventListener('resize', this.screenAdapter)
         clearInterval(this.timerId)
         clearInterval(this.timerId)
     },
     },
     methods: {
     methods: {
-        initChart () {
-            this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref'))
-            const initOption = {
-                grid: {
-                    top: '10%',
-                    left: '1%',
-                    right: '30%',
-                    bottom: '1%',
-                    containLabel: true
-                },
-                legend: {
-                    right: '2%',
-                    top: '5%'
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
-                        }
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
-                        }
-                    }
-                }
-            }
-            this.chartInstance.setOption(initOption)
-        },
+
         getData (that) {
         getData (that) {
             const { proxy } = Vue.getCurrentInstance();
             const { proxy } = Vue.getCurrentInstance();
             var params = {
             var params = {
@@ -114,10 +87,9 @@ export default {
             };
             };
             proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
             proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
                 if(res.success){
                 if(res.success){
-                    console.log(res.obj)
                     that.allData = res.obj;
                     that.allData = res.obj;
                     that.updateChart()
                     that.updateChart()
-                    that.startInterval()
+                    // that.startInterval()
                 }
                 }
             });
             });
 
 
@@ -128,6 +100,7 @@ export default {
                 'rgba(11, 168, 44, 0.5)',
                 'rgba(11, 168, 44, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
+                'rgba(35, 255, 255, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(250, 105, 0, 0.5)'
                 'rgba(250, 105, 0, 0.5)'
             ]
             ]
@@ -136,6 +109,7 @@ export default {
                 'rgba(11, 168, 44, 0)',
                 'rgba(11, 168, 44, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(22, 242, 217, 0)',
                 'rgba(22, 242, 217, 0)',
+                'rgba(35, 255, 255, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(250, 105, 0, 0)'
                 'rgba(250, 105, 0, 0)'
             ]
             ]
@@ -152,40 +126,97 @@ export default {
             const legendArr = this.allData.polyline.data.data.map(item => {
             const legendArr = this.allData.polyline.data.data.map(item => {
                 return item.name
                 return item.name
             })
             })
-            const dataOption = {
-                xAxis: {
-                    data: timeArr
+            //x轴数据
+            let xAxisDataLength=seriesData.length;
+            let xAxisData=[];
+            for(let i=1;i<=xAxisDataLength;i++){
+                xAxisData.push(i)
+            }
+            this.optionData = {
+                title: {
+                    text: ''
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor:'rgba(50,50,50,0.7)',
+                    borderColor:"#333",
+                    textStyle:{
+                        color:"#fff",
+                        align:'left'
+                    }
+
                 },
                 },
                 legend: {
                 legend: {
-                    data: legendArr
+                    data: legendArr,
+                    itemHeight:0,//图例圆圈大小设置
+                    y:'7px',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontsize:"12px"
+                    }
+
                 },
                 },
-                dataZoom: {
-                    show: false,
-                    startValue: this.startValue,
-                    endValue: this.endValue
+                grid: {
+                    top:'3%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '2%',
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxisData,
+
+                    axisLine:{
+                        show:false,//是否显示坐标线
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                    },
+
                 },
                 },
-                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%的颜色值
-                            ])
+                yAxis: {
+                    axisLabel: {
+                        color:'#ffffff',
+                        formatter: '{value} %'//以百分比显示
+                    },
+                    splitLine:{
+                        lineStyle: {
+                            color:'#0a1b31'
                         }
                         }
+                    },
+
+                },
+                series: {
+                    name: seriesName,
+                    type: 'line',
+                    data: seriesData,
+                    smooth: true,
+                    showSymbol:false,
+                    color:'#01E6E6',
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: colorArr1[3]
+                            }, // %0的颜色值
+                            {
+                                offset: 1,
+                                color: colorArr2[3]
+                            } // 100%的颜色值
+                        ])
                     }
                     }
-                ]
-            }
-            this.chartInstance.setOption(dataOption)
+                },
+                itemStyle:{
+                    showSymbol:false
+                }
+            };
+
+
         },
         },
         screenAdapter () {
         screenAdapter () {
             this.titleFontSize = document.getElementById('declarepolyline_ref').offsetWidth / 100 * 3.6
             this.titleFontSize = document.getElementById('declarepolyline_ref').offsetWidth / 100 * 3.6

+<div class="declare-report" >
+    <div class="declare-report-top"  :style="comtitlesizeStyle" id="declareReport_ref">
+        <el-row>
+            <el-col :span="24">
+                <div class="grid-content bg-purple-dark">
+                    <img src="./src/assets/images/digitalDp/icon-ysb.png" :style="comimgsizeStyle">
+                    <span class="title-ysb">本月应申报</span>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24">
+                <div class="grid-content bg-purple-dark declare-report-num" :style="comtitletextStyle">
+                    {{declareNumer}}
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+    <div class="declare-report-bottom">
+        <el-row>
+            <el-col :span="24">
+                <div class="grid-content bg-purple-dark rate-title">
+<!--                    <img src="./src/assets/img/icon-sbl.png" :style="comimgsizeStyle">-->
+                    <span>本月申报率</span>
+                </div>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-col :span="24">
+                <div class="grid-content bg-purple-dark rate-container" :style="comtitletextStyle">
+                    <div class="rate-num">
+                        <span>{{declareRateLeft}}</span><span :style="comboxtextStyle">{{declareRateRight}}</span>
+                    </div>
+
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+
+</div>

+export default {
+    name: 'declareReport',
+    template: '',
+    components: {},
+    data () {
+        return {
+            allData:{},
+            titleFontSize: 30,
+            declareRate: '0%',
+            declareRateLeft: 0,
+            declareRateRight: '%',
+            declareNumer: 0,
+            curve: 'KPIDA0ACBBP',
+            rateTitle: 'KPIDA0ACBBK',
+            numerTitle: 'KPIDA0ACBBG'
+        }
+    },
+    computed: {
+        comtitletextStyle () {
+            return {
+                color: '#23ffff',
+                fontSize: this.titleFontSize * 3 + 'px'
+            }
+        },
+        comtitlesizeStyle () {
+            return {
+                fontSize: this.titleFontSize *2 + 'px'
+            }
+        },
+        comimgsizeStyle () {
+            return {
+                width: this.titleFontSize * 3 + 'px'
+            }
+        },
+        comboxtextStyle () {
+            return {
+                fontSize: this.titleFontSize * 2 + 'px'
+            }
+        }
+    },
+    mounted () {
+        this.getData(this)
+        window.addEventListener('resize', this.screenAdapter)
+        this.screenAdapter()
+    },
+
+    methods: {
+        getData (that) {
+            const { proxy } = Vue.getCurrentInstance();
+            var params = {
+                curve: that.curve,
+                rateTitle: that.rateTitle,
+                numerTitle: that.numerTitle
+            };
+            proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
+                if(res.success){
+                    that.allData = res.obj;
+                    const declareRate = that.allData.polyline.declareRate
+                    if(declareRate.indexOf('.') > 0){
+                        that.declareRateLeft = declareRate.split('.')[0] + '.'
+                        that.declareRateRight = declareRate.split('.')[1]
+                    }
+                    that.declareNumer = that.allData.polyline.declareNumer
+
+
+                }
+            });
+
+        },
+        screenAdapter () {
+            this.titleFontSize = document.getElementById('declareReport_ref').offsetWidth / 100 * 3.6
+        }
+
+    }
+}

@@ -4,65 +4,39 @@
             <el-col :span="24">
             <el-col :span="24">
                 <div class="grid-content bg-purple-dark com-box-title">
                 <div class="grid-content bg-purple-dark com-box-title">
                     <span>
                     <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>
+                      <img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/images/digitalDp/box_title_bykk_zj_1.png"> <!-- bor1_6 -->
+<!--                      <span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span>-->
                     </span>
                     </span>
                 </div>
                 </div>
             </el-col>
             </el-col>
         </el-row>
         </el-row>
-        <el-col :span="24">
-            <div class="grid-content bg-purple-dark com-box-title">
-                <span>
-                    <img class="deduction-box-img-left" :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>
+        <el-row>
+            <el-col :span="24">
+                <div class="grid-content bg-purple-dark com-box-title">
+                    <div class="deduction-num-container">
+                        <img class="deduction-box-img-left" :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>
                     </div>
                     </div>
-                </span>
-                <span>
-                    <img class="deduction-box-img-right" :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 class="deduction-num-container">
+                         <img class="deduction-box-img-right" :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>
                     </div>
                     </div>
-                </span>
-            </div>
-        </el-col>
-<!--        <el-row>-->
-<!--            <el-col :span="12">-->
-<!--                <div class="grid-content bg-purple com-box">-->
-<!--                    <span >-->
-<!--                        <img :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> &lt;!&ndash; bor1_6 &ndash;&gt;-->
-<!--                        <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="12">-->
-<!--                <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>
+            </el-col>
+        </el-row>
+
+
     </div>
     </div>
 </div>
 </div>

@@ -19,41 +19,41 @@ export default {
     computed: {
     computed: {
         comboximgleftStyle () {
         comboximgleftStyle () {
             return {
             return {
-                height: this.titleFontSize * 3.5 + 'px',
-                marginTop: this.titleFontSize * 2.5 + 'px',
-                marginLeft: this.titleFontSize + 'px'
+                height: this.titleFontSize *10 + 'px',
+                // marginTop: this.titleFontSize * 3.5 + 'px',
+                // marginLeft: this.titleFontSize + 'px'
             }
             }
         },
         },
         comboximgrightStyle () {
         comboximgrightStyle () {
             return {
             return {
-                height: this.titleFontSize * 3.5 + 'px',
-                marginTop: this.titleFontSize * 2.5 + 'px'
+                height: this.titleFontSize *10 + 'px',
+                // marginTop: this.titleFontSize * 3.5 + 'px'
             }
             }
         },
         },
         comcontextStyle () {
         comcontextStyle () {
             return {
             return {
-                fontSize: this.titleFontSize + 'px'
+                fontSize: this.titleFontSize  + 'px'
             }
             }
         },
         },
         comtitlesizeStyle () {
         comtitlesizeStyle () {
             return {
             return {
-                height: this.titleFontSize * 1.5 + 'px',
+                height: this.titleFontSize * 7 + 'px',
                 // width: this.titleFontSize * 6 + 'px'
                 // width: this.titleFontSize * 6 + 'px'
             }
             }
         },
         },
         comtitleTextStyle () {
         comtitleTextStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 1.3 + 'px'
+                fontSize: this.titleFontSize /1.3 + 'px'
             }
             }
         },
         },
         comnumberTextStyle () {
         comnumberTextStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 1.2 + 'px'
+                fontSize: this.titleFontSize /0.5 + 'px'
             }
             }
         },
         },
         comnumberUnitStyle () {
         comnumberUnitStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 2 + 'px'
+                fontSize: this.titleFontSize / 0.6 + 'px'
             }
             }
         }
         }
     },
     },

 <div class="com-container">
 <div class="com-container">
     <div class="com-chart" id="digitalboard_down_ref">
     <div class="com-chart" id="digitalboard_down_ref">
-        <div style="margin-top: 2%" :style="comcontextStyle">
-            <el-row>
+        <div style="margin-bottom: 2%" :style="comcontextStyle">
+            <el-row class="width-86">
                 <el-col :span="12">
                 <el-col :span="12">
-                    <div class="grid-content bg-purple">
-                        <span>
+                    <div class="grid-content bg-purple" style="text-align:left;">
+                        <span >
                             <!--title_box_1.png-->
                             <!--title_box_1.png-->
-                            <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
-                            <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
+                            <img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-month-1.png">
+<!--                            <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
@@ -18,77 +18,77 @@
                 </el-col>
                 </el-col>
             </el-row>
             </el-row>
             <el-row>
             <el-row>
-                <el-col :span="3">
+               <!-- <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span >
                         <span >
-                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/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: #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 class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
-                </el-col>
+                </el-col>-->
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
+                            <span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
+                            <span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>

@@ -39,17 +39,17 @@ export default {
     computed: {
     computed: {
         comboximgStyle () {
         comboximgStyle () {
             return {
             return {
-                height: this.titleFontSize * 4.5 + 'px'
+                height: this.titleFontSize * 4.3 + 'px'
             }
             }
         },
         },
         comTitleimgStyle () {
         comTitleimgStyle () {
             return {
             return {
-                width: this.titleFontSize * 12 + 'px'
+                width: this.titleFontSize * 10 + 'px'
             }
             }
         },
         },
         comTitleSizeStyle () {
         comTitleSizeStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 1.5 + 'px'
+                fontSize: this.titleFontSize / 1.6 + 'px'
             }
             }
         },
         },
         comtitlimgStyle () {
         comtitlimgStyle () {
@@ -67,7 +67,7 @@ export default {
                 fontSize: this.titleFontSize * 3.5 + 'px',
                 fontSize: this.titleFontSize * 3.5 + 'px',
                 top: '9%',
                 top: '9%',
                 position: 'absolute',
                 position: 'absolute',
-                fontFamily: 'yjsz'
+                fontFamily: 'DSDIG'
             }
             }
         },
         },
         comcommaStyle () {
         comcommaStyle () {
@@ -76,7 +76,7 @@ export default {
                 color: '#FEFEFE',
                 color: '#FEFEFE',
                 fontSize: this.titleFontSize * 3 + 'px',
                 fontSize: this.titleFontSize * 3 + 'px',
                 top: '28%',
                 top: '28%',
-                fontFamily: 'yjsz'
+                fontFamily: 'DSDIG'
             }
             }
         }
         }
 
 
@@ -153,7 +153,6 @@ export default {
             };
             };
             proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
             proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
                 if(res.success){
                 if(res.success){
-                    console.log(res.map)
                     const map = res.map
                     const map = res.map
                     // 左边数
                     // 左边数
                     if(map.leftNumber){
                     if(map.leftNumber){
@@ -161,7 +160,7 @@ export default {
                     }
                     }
                     // 右边数
                     // 右边数
                     if(map.rightNumber){
                     if(map.rightNumber){
-                        that.undeclaredAmountNumber = map.rightNumber
+                        that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
                     }
                     }
                     that.initChart()
                     that.initChart()
                     that.updateChart()
                     that.updateChart()
@@ -182,6 +181,29 @@ export default {
                 this.declaredAmountNumber += 10
                 this.declaredAmountNumber += 10
                 this.initChart()
                 this.initChart()
             }, 2000)
             }, 2000)
+        },
+        numberFilter(val,places = 2) {
+            //value为传进来的数据 比如  12345.6789
+            //places 为需要保留的小数位数  -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
+            //数据校验
+            if (parseFloat(val).toString() == 'NaN') return '0.00'
+            // 将数值截取
+            let num = val.toString().split('.')
+            let zs = num[0]
+            let xs = num[1]
+            // 整数部分处理，增加,
+            const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+            if (xs != null) {
+                if(places == 0){
+                    return intPartFormat + '.' + xs
+                }else if(places == -1){
+                    return intPartFormat
+                }else{
+                    return intPartFormat +'.' + xs.substr(0,places)
+                }
+            } else {
+                return intPartFormat
+            }
         }
         }
 
 
     }
     }

 <div class="com-container">
 <div class="com-container">
     <div class="com-chart" id="digitalboard_top_ref">
     <div class="com-chart" id="digitalboard_top_ref">
-        <div style="margin-top: 2%" :style="comcontextStyle">
-            <el-row>
+        <div style="margin-bottom: 3%" :style="comcontextStyle">
+            <el-row class="width-86">
                 <el-col :span="12">
                 <el-col :span="12">
-                    <div class="grid-content bg-purple">
+                    <div class="grid-content bg-purple" style="text-align:left;">
                         <span>
                         <span>
                             <!--title_box_1.png-->
                             <!--title_box_1.png-->
-                            <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
-                            <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
+                            <img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-today.png">
+<!--                            <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
@@ -18,77 +18,77 @@
                 </el-col>
                 </el-col>
             </el-row>
             </el-row>
             <el-row>
             <el-row>
-                <el-col :span="3">
+               <!-- <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span >
                         <span >
-                            <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/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: #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 class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
-                </el-col>
+                </el-col>-->
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
+                            <span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
+                            <span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple com-box">
                     <div class="grid-content bg-purple com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
                 <el-col :span="3">
                 <el-col :span="3">
                     <div class="grid-content bg-purple-light com-box">
                     <div class="grid-content bg-purple-light com-box">
                         <span>
                         <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>
+                            <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
+                            <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
                         </span>
                         </span>
                     </div>
                     </div>
                 </el-col>
                 </el-col>

@@ -39,17 +39,17 @@ export default {
     computed: {
     computed: {
         comboximgStyle () {
         comboximgStyle () {
             return {
             return {
-                height: this.titleFontSize * 4.5 + 'px'
+                height: this.titleFontSize * 4.3 + 'px'
             }
             }
         },
         },
         comTitleimgStyle () {
         comTitleimgStyle () {
             return {
             return {
-                width: this.titleFontSize * 12 + 'px'
+                width: this.titleFontSize * 10 + 'px'
             }
             }
         },
         },
         comTitleSizeStyle () {
         comTitleSizeStyle () {
             return {
             return {
-                fontSize: this.titleFontSize / 1.5 + 'px'
+                fontSize: this.titleFontSize / 1.6 + 'px'
             }
             }
         },
         },
         comtitlimgStyle () {
         comtitlimgStyle () {
@@ -67,7 +67,7 @@ export default {
                 fontSize: this.titleFontSize * 3.5 + 'px',
                 fontSize: this.titleFontSize * 3.5 + 'px',
                 top: '9%',
                 top: '9%',
                 position: 'absolute',
                 position: 'absolute',
-                fontFamily: 'yjsz'
+                fontFamily: 'DSDIG'
             }
             }
         },
         },
         comcommaStyle () {
         comcommaStyle () {
@@ -76,7 +76,7 @@ export default {
                 color: '#FEFEFE',
                 color: '#FEFEFE',
                 fontSize: this.titleFontSize * 3 + 'px',
                 fontSize: this.titleFontSize * 3 + 'px',
                 top: '28%',
                 top: '28%',
-                fontFamily: 'yjsz'
+                fontFamily: 'DSDIG'
             }
             }
         }
         }
 
 
@@ -153,17 +153,14 @@ export default {
             };
             };
             proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
             proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
                 if(res.success){
                 if(res.success){
-                    console.log(res.map)
                     const map = res.map
                     const map = res.map
                     // 左边数
                     // 左边数
-                    console.log(map.leftNumber)
                     if(map.leftNumber){
                     if(map.leftNumber){
                         that.declaredAmountNumber = map.leftNumber
                         that.declaredAmountNumber = map.leftNumber
                     }
                     }
                     // 右边数
                     // 右边数
-                    console.log(map.rightNumber)
                     if(map.rightNumber){
                     if(map.rightNumber){
-                        that.undeclaredAmountNumber = map.rightNumber
+                        that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
                     }
                     }
                     that.initChart()
                     that.initChart()
                     that.updateChart()
                     that.updateChart()
@@ -184,6 +181,29 @@ export default {
                 this.declaredAmountNumber += 10
                 this.declaredAmountNumber += 10
                 this.initChart()
                 this.initChart()
             }, 2000)
             }, 2000)
+        },
+        numberFilter(val,places = 2) {
+            //value为传进来的数据 比如  12345.6789
+            //places 为需要保留的小数位数  -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
+            //数据校验
+            if (parseFloat(val).toString() == 'NaN') return '0.00'
+            // 将数值截取
+            let num = val.toString().split('.')
+            let zs = num[0]
+            let xs = num[1]
+            // 整数部分处理，增加,
+            const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
+            if (xs != null) {
+                if(places == 0){
+                    return intPartFormat + '.' + xs
+                }else if(places == -1){
+                    return intPartFormat
+                }else{
+                    return intPartFormat +'.' + xs.substr(0,places)
+                }
+            } else {
+                return intPartFormat
+            }
         }
         }
 
 
     }
     }

-<div class="com-container">
-    <div class="com-chart" id="documentcpu_ref"></div>
+<div class="com-container" id="documentcpu_ref">
+    <LineChart :optionData="optionData"  v-if="optionData"></LineChart>
 </div>
 </div>

 export default {
 export default {
     name: 'DocumentCpu',
     name: 'DocumentCpu',
     template: '',
     template: '',
-    components: {},
+    components: {
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
     data () {
     data () {
         return {
         return {
-            chartInstance: null,
+            optionData:'',
             allData: {
             allData: {
                 polyline: {
                 polyline: {
                     title: "文书库CPU监控",
                     title: "文书库CPU监控",
@@ -27,7 +31,6 @@ export default {
         }
         }
     },
     },
     mounted () {
     mounted () {
-        this.initChart()
         this.getData()
         this.getData()
         window.addEventListener('resize', this.screenAdapter)
         window.addEventListener('resize', this.screenAdapter)
         this.screenAdapter()
         this.screenAdapter()
@@ -37,46 +40,7 @@ export default {
         clearInterval(this.timerId)
         clearInterval(this.timerId)
     },
     },
     methods: {
     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,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
-                        }
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
-                        }
-                    }
-                }
-            }
-            this.chartInstance.setOption(initOption)
-        },
+
         async getData () {
         async getData () {
             // await this.$http.get()
             // await this.$http.get()
             // const { data: ret } = await this.$http.get('documentcpu')
             // const { data: ret } = await this.$http.get('documentcpu')
@@ -88,17 +52,19 @@ export default {
         updateChart () {
         updateChart () {
             // 半透明的颜色值
             // 半透明的颜色值
             const colorArr1 = [
             const colorArr1 = [
-                'rgba(11, 168, 44, 0.5)',
+                'rgba(35, 255, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
+                'rgba(11, 168, 44, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(250, 105, 0, 0.5)'
                 'rgba(250, 105, 0, 0.5)'
             ]
             ]
-            // 全透明的颜色值
+            //   全透明的颜色值
             const colorArr2 = [
             const colorArr2 = [
-                'rgba(11, 168, 44, 0)',
+                'rgba(35, 255, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(22, 242, 217, 0)',
                 'rgba(22, 242, 217, 0)',
+                'rgba(11, 168, 44, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(250, 105, 0, 0)'
                 'rgba(250, 105, 0, 0)'
             ]
             ]
@@ -109,6 +75,16 @@ export default {
                     type: 'line',
                     type: 'line',
                     data: item.data,
                     data: item.data,
                     smooth: true,
                     smooth: true,
+                    showSymbol:false,
+                    itemStyle : {
+                        normal : {
+                            color:colorArr1[index],//tooltip里的小圆点颜色
+                            lineStyle:{
+                                color:colorArr1[index],
+                                width:2,
+                            }
+                        }
+                    },
                     areaStyle: {
                     areaStyle: {
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                             {
                             {
@@ -129,29 +105,90 @@ export default {
             })
             })
             const title = this.allData.polyline.title
             const title = this.allData.polyline.title
             const unit = this.allData.polyline.unit
             const unit = this.allData.polyline.unit
-            const dataOption = {
+            const seriesData=seriesArr;
+            let xAxisData=timeArr;
+            this.optionData = {
                 title: {
                 title: {
                     text: title,
                     text: title,
                     left: 'center',
                     left: 'center',
-                    bottom: '8%'
-                },
-                xAxis: {
-                    data: timeArr
+                    bottom: '8%',
+                    textStyle: {
+                        fontSize: this.titleFontSize*0.5,
+                        color:'#ffffff'
+                    }
+
                 },
                 },
-                yAxis: {
-                    name: unit
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor:'rgba(50,50,50,0.7)',
+                    borderColor:"#333",
+                    textStyle:{
+                        color:"#fff",
+                        align:'left'
+                    }
+
                 },
                 },
                 legend: {
                 legend: {
-                    data: legendArr
+                    data: legendArr,
+                    itemHeight:0,//图例圆圈大小设置
+                    right: '5%',
+                    top: '5%',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontsize:"12px"
+                    }
+
                 },
                 },
-                dataZoom: {
-                    show: false,
-                    startValue: this.startValue,
-                    endValue: this.endValue
+                grid: {
+                    top: '15%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '20%',
+                    containLabel: true
                 },
                 },
-                series: seriesArr
-            }
-            this.chartInstance.setOption(dataOption)
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxisData,
+
+                    axisLine:{
+                        show:false,//是否显示坐标线
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                    },
+
+                },
+                yAxis: {
+                    type: 'value',
+                    name:unit,
+                    nameTextStyle:{
+                        color:'#ffffff',
+                        padding:[0,0,0,-20]
+                    },
+                    axisLabel: {
+                        color:'#ffffff',
+                        // formatter: '{value} %'//以百分比显示
+                    },
+                    axisLine:{
+                        show:true,//是否显示坐标线
+                    },
+                    splitLine:{
+                        lineStyle: {
+                            color:'#0a1b31'
+                        }
+                    }
+
+                },
+                series: seriesData
+            };
+
+
+
+
         },
         },
         screenAdapter () {
         screenAdapter () {
             this.titleFontSize = document.getElementById('documentcpu_ref').offsetWidth / 100 * 3.6
             this.titleFontSize = document.getElementById('documentcpu_ref').offsetWidth / 100 * 3.6
@@ -179,8 +216,7 @@ export default {
                     }
                     }
                 }
                 }
             }
             }
-            this.chartInstance.setOption(adapterOption)
-            this.chartInstance.resize()
+
         },
         },
         startInterval () {
         startInterval () {
             if (this.timerId) {
             if (this.timerId) {

+<div class="monitoring-bar" id="mon-bar">
+    <img :style="comtitleImgStyle" src="/vue3/src/assets/images/digitalDp/title-monitoring.png" alt="">
+    <BarChart :optionData="optionData" v-if="optionData"></BarChart>
+</div>

+export default {
+    name: 'monitoring',
+    template: '',
+    components: {
+        'BarChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/barChart/index')
+        )
+    },
+    data(){
+        return {
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/bigScreen/thirtyDayMonitor?kipId=KPI63C5B2E5',
+            declareLineData:'',
+            ySeriesCommon:[],
+            legendData:[],
+            ySeriesCommonData:[],
+            titleFontSize: 30,
+            optionData:''
+
+        }
+    },
+    computed: {
+        comtitleImgStyle () {
+            return {
+                height: this.titleFontSize * 2.1 + 'px'
+            }
+        }
+
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+
+        // 挂载完
+        Vue.onMounted(() => {
+            proxy.screenAdapter();
+            $.get(proxy.domainName +proxy.apiUrl,function (res) {
+                const data = res;
+                if (data && data.data) {
+                    let monitoringBarData=data.data;
+                    let legendData=[];
+                    $.each(monitoringBarData,function (i,v){
+                        proxy.ySeriesCommonData.unshift(v.value)
+                        legendData.push(i+1)
+                    })
+                    proxy.legendData=legendData
+                }
+                // proxy.ySeriesCommon=
+                proxy.optionInti()
+            })
+
+        })
+        const optionInti=()=>{
+            proxy.optionData = {
+                title: {
+                    text: '',
+
+                },
+                grid: {
+                    top:'4%',
+                    left: '3%',
+                    right: '4%',
+                    // bottom:'0',
+                    // bottom: '8%',
+                    containLabel: true,
+                },
+                xAxis: {
+                    type: 'category',
+                    data: props.legendData,
+                    axisLine:{
+                        show:true,//是否显示坐标线
+                        lineStyle: {
+                            color:'#0a1b31'//坐标线颜色
+                        }
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                        fontSize: 12
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    splitLine:{
+                        show:false,
+
+                    },
+                    axisLine:{
+                        show:true,//是否显示坐标线
+                        lineStyle: {
+                            color:'#0a1b31'//坐标线颜色
+                        }
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                        fontSize:12,
+                        formatter:function (value,index){
+                            if(value>=10000 &&value<10000000){
+                                value=value/10000 +"万";
+                            }else if(value>=10000000){
+                                value=value/10000000+"千万";
+                            }
+                            return value;
+                        }
+                    }
+                },
+                series: [
+                    {
+                        data: proxy.ySeriesCommonData,
+                        type: 'bar',
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(180, 180, 180, 0.1)'
+                        },
+                        barWidth:8,
+                        itemStyle:{
+                            normal:{
+                                barBorderRadius: [3,3,0,0],
+                                color:new echarts.graphic.LinearGradient(
+                                    0,0,0,1,
+                                    [
+                                        {offset:0,color:'#3ac9fb'},
+                                        {offset:1,color:'#2a81f3'}
+                                    ]
+                                )
+                                // color:"#ff0000"
+                            }
+                        }
+                    }
+                ]
+            };
+        }
+        const screenAdapter=()=>{
+            proxy.titleFontSize = document.getElementById('mon-bar').offsetWidth / 100 * 3.6
+        }
+
+
+        return{
+            optionInti,
+            screenAdapter
+        }
+    }
+}

-<div class="com-container">
-    <div class="com-chart" id="responsemonitor_ref"></div>
+<div class="com-container" id="responsemonitor_ref">
+
+<!--    <div class="com-chart" id="responsemonitor_ref"></div>-->
+    <LineChart :optionData="optionData"  v-if="optionData" ref="responseLine"></LineChart>
+
 </div>
 </div>

 export default {
 export default {
     name: 'ResponseMonitor',
     name: 'ResponseMonitor',
     template: '',
     template: '',
-    components: {},
+    props:['commandVal'],
+    components: {
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
     data () {
     data () {
         return {
         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"]
-                }
-            },
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/bigScreen/monitoring?function=',
+            optionData:'',
+            titleFontSize:'30',
+            allData: '',
+            newCommandVal:this.commandVal,
             startValue: 0, // 区域缩放的起点值
             startValue: 0, // 区域缩放的起点值
             endValue: 6, // 区域缩放的终点值
             endValue: 6, // 区域缩放的终点值
             timerId: null // 定时器的标识
             timerId: null // 定时器的标识
         }
         }
     },
     },
+    setUp(){
+        const allData=ref({});
+        // const commandVal=ref();
+        // const optionData=ref({});
+        return{
+            allData,
+            // optionData
+            // commandVal
+        }
+    },
     mounted () {
     mounted () {
-        this.initChart()
         this.getData()
         this.getData()
         window.addEventListener('resize', this.screenAdapter)
         window.addEventListener('resize', this.screenAdapter)
         this.screenAdapter()
         this.screenAdapter()
@@ -33,58 +39,60 @@ export default {
         window.removeEventListener('resize', this.screenAdapter)
         window.removeEventListener('resize', this.screenAdapter)
         clearInterval(this.timerId)
         clearInterval(this.timerId)
     },
     },
+    watch:{
+      commandVal(newValue, oldValue) {
+          this.newCommandVal=newValue
+          this.getData()
+      }
+
+    },
     methods: {
     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,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
-                        }
+        getData () {
+            let that=this;
+            // await this.$http.get()
+        // const { data: ret } = await proxy.$http.get('bigScreen/monitoring?function=')
+        $.get(this.domainName +this.apiUrl+this.newCommandVal,(ret)=>{
+            if(ret){
+                let dataArr=[];
+                let xAxisData='';
+                if(ret.concurrence){
+                    dataArr=ret.concurrence.data.y
+                    xAxisData=ret.concurrence.data.x
+                }else{
+                    for(let i=0;i<12;i++){
+                        dataArr.push('0')
                     }
                     }
-                },
-                yAxis: {
-                    type: 'value',
-                    splitLine: {
-                        show: false
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E6E8EB'
+
+                }
+
+                that.allData= {
+                    polyline: {
+                        title:"系统响应请求数监控",
+                        unit: "MB",
+                        data: {
+                            name: "请求相应数/秒",
+                            data: dataArr
                         }
                         }
+                    },
+                    xAxis: {
+                        // today: ["10", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
+                        today:xAxisData
                     }
                     }
                 }
                 }
+                that.updateChart()
+                that.startInterval()
             }
             }
-            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 () {
         updateChart () {
+            console.log("ddd",this.allData)
             // 半透明的颜色值
             // 半透明的颜色值
             const colorArr1 = [
             const colorArr1 = [
                 'rgba(11, 168, 44, 0.5)',
                 'rgba(11, 168, 44, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(44, 110, 255, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
                 'rgba(22, 242, 217, 0.5)',
+                'rgba(35, 255, 255, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(254, 33, 30, 0.5)',
                 'rgba(250, 105, 0, 0.5)'
                 'rgba(250, 105, 0, 0.5)'
             ]
             ]
@@ -93,61 +101,112 @@ export default {
                 'rgba(11, 168, 44, 0)',
                 'rgba(11, 168, 44, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(44, 110, 255, 0)',
                 'rgba(22, 242, 217, 0)',
                 'rgba(22, 242, 217, 0)',
+                'rgba(35, 255, 255, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(254, 33, 30, 0)',
                 'rgba(250, 105, 0, 0)'
                 'rgba(250, 105, 0, 0)'
             ]
             ]
             const timeArr = this.allData.xAxis.today
             const timeArr = this.allData.xAxis.today
             const seriesData = this.allData.polyline.data.data
             const seriesData = this.allData.polyline.data.data
             const seriesName = this.allData.polyline.data.name
             const seriesName = this.allData.polyline.data.name
-            console.log(seriesName)
             // 图例的数据
             // 图例的数据
-            const legendArr = this.allData.polyline.data.data.map(item => {
-                return item.name
-            })
+            // const legendArr = this.allData.polyline.data.map(item => {
+            //     return item.name
+            // })
+            const legendArr=[];
+            legendArr.push(seriesName);
             const title = this.allData.polyline.title
             const title = this.allData.polyline.title
-            //   const unit = this.allData.polyline.unit
-            const dataOption = {
+
+
+            this.optionData = {
                 title: {
                 title: {
                     text: title,
                     text: title,
                     left: '10%',
                     left: '10%',
                     textStyle: {
                     textStyle: {
-                        color: '#F1F2F5'
+                        fontSize: this.titleFontSize*0.5,
+                        color:'#ffffff'
                     }
                     }
                 },
                 },
-                xAxis: {
-                    data: timeArr
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor:'rgba(50,50,50,0.7)',
+                    borderColor:"#333",
+                    textStyle:{
+                        color:"#fff",
+                        align:'left'
+                    }
+
                 },
                 },
                 legend: {
                 legend: {
-                    data: legendArr
+                    data: legendArr,
+                    itemHeight:0,//图例圆圈大小设置
+                    top:'10%',
+                    right:'20%',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontsize:"12px"
+                    }
+
                 },
                 },
-                dataZoom: {
-                    show: false,
-                    startValue: this.startValue,
-                    endValue: this.endValue
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true,
                 },
                 },
-                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%的颜色值
-                            ])
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: timeArr,
+
+                    axisLine:{
+                        show:false,//是否显示坐标线
+                    },
+                    axisTick: {
+                        show: false //是否显示坐标刻度
+                    },
+                    axisLabel:{
+                        color:'#ffffff',
+                    },
+
+                },
+                yAxis: {
+                    axisLabel: {
+                        color:'#ffffff',
+                    },
+                    splitLine:{
+                        lineStyle: {
+                            color:'#0a1b31'
                         }
                         }
+                    },
+
+                },
+                series: {
+                    name: seriesName,
+                    type: 'line',
+                    data: seriesData,
+                    smooth: true,
+                    showSymbol:false,
+                    color:colorArr1[1],
+                    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)
+                },
+                itemStyle:{
+                    showSymbol:false
+                }
+            };
+
         },
         },
+
         screenAdapter () {
         screenAdapter () {
             this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
             this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
             const adapterOption = {
             const adapterOption = {
@@ -165,8 +224,7 @@ export default {
                     }
                     }
                 }
                 }
             }
             }
-            this.chartInstance.setOption(adapterOption)
-            this.chartInstance.resize()
+
         },
         },
         startInterval () {
         startInterval () {
             if (this.timerId) {
             if (this.timerId) {

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

@@ -70,14 +70,22 @@ export default {
                         show: false
                         show: false
                     }
                     }
                 },
                 },
-                yAxis: {
-                    type: 'category',
-                    axisLabel: {
-                        textStyle: {
-                            color: '#E2E1E6'
-                        }
-                    }
-                },
+                yAxis:
+                    {
+                        type: 'category',
+                        axisLabel: {
+                            textStyle: {
+                                color: '#E2E1E6'
+                            }
+                        },
+                        axisLine:{
+                            show:false,//是否显示坐标线
+                        },
+                        axisTick: {
+                            show: false //是否显示坐标刻度
+                        },
+                    },
+
                 series: [
                 series: [
                     {
                     {
                         type: 'bar',
                         type: 'bar',
@@ -88,10 +96,18 @@ export default {
                         label: {
                         label: {
                             show: true,
                             show: true,
                             position: 'right',
                             position: 'right',
-                            testStyle: {
-                                color: 'white'
-                            }
+
+                            textStyle: {
+                                color: 'rgba(0,0,0,0)'
+                            },
+                            height:26,
+                            width: 26,
+                            offset:[-10,0],
+                            backgroundColor: {
+                                image: '/vue3/src/assets/images/digitalDp/pro-bg.png'
+                            },
                         },
                         },
+
                         itemStyle: {
                         itemStyle: {
                             // 颜色渐变 指明渐变方向，指明不同百分比之下颜色的值 LinearGradient(x1, y1, x2, y2, [])
                             // 颜色渐变 指明渐变方向，指明不同百分比之下颜色的值 LinearGradient(x1, y1, x2, y2, [])
                             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -122,7 +138,6 @@ export default {
                 kpiIdValue: that.kpiIdValue
                 kpiIdValue: that.kpiIdValue
             };
             };
             proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
             proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
-                console.log(res.data)
                 if(res.success){
                 if(res.success){
                     that.allData = res.data
                     that.allData = res.data
                     that.updateChart()
                     that.updateChart()
@@ -139,9 +154,24 @@ export default {
                 return item.value
                 return item.value
             })
             })
             const dataOption = {
             const dataOption = {
-                yAxis: {
+                yAxis: [{
                     data: sellerNames
                     data: sellerNames
                 },
                 },
+                    {
+                        data:sellerValues,
+                        axisLine:{
+                            show:false,//是否显示坐标线
+                        },
+                        axisTick: {
+                            show: false //是否显示坐标刻度
+                        },
+                        axisLabel: {
+                            textStyle: {
+                                color: '#ffffff'
+                            }
+                        },
+                    }
+                ],
                 series: [
                 series: [
                     {
                     {
                         data: sellerValues
                         data: sellerValues

 <div class="screen-container" id="bgscreen_ref">
 <div class="screen-container" id="bgscreen_ref">
     <header class="screen-header" :style="screenheaderStyle">
     <header class="screen-header" :style="screenheaderStyle">
         <div>
         <div>
-            <img style="width: 100%" src="/vue3/src/assets/img/header_border_dark.png" alt="">
+            <img style="width: 100%" src="/vue3/src/assets/images/digitalDp/head-bg.png" alt="">
         </div>
         </div>
-        <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
+<!--        <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>-->
         <div class="title-left">
         <div class="title-left">
-            <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
+            <img src="/vue3/src/assets/images/digitalDp/icon-time.png" :style="timelogoStyle" class="timelog">
             <span :style="datetimeStyle" >{{dateTime}}</span>
             <span :style="datetimeStyle" >{{dateTime}}</span>
         </div>
         </div>
     </header>
     </header>
@@ -17,37 +17,73 @@
             </div>
             </div>
             <!-- 本月业务量 折线图-->
             <!-- 本月业务量 折线图-->
             <div id="left-bottom">
             <div id="left-bottom">
-                <TrendPolyline></TrendPolyline>
+<!--                <TrendPolyline></TrendPolyline>-->
+                <DeclareLine :colorData="colorData"></DeclareLine>
             </div>
             </div>
         </section>
         </section>
 
 
         <section class="screen-middle">
         <section class="screen-middle">
-            <div id="middle-top">
-                <!-- 今日已申报数 图板 -->
-                <DigitalBoardTop></DigitalBoardTop>
-            </div>
-            <div id="middle-center">
-                <!-- 本月已申报数 图板 -->
-                <DigitalBoardDown></DigitalBoardDown>
+            <div class="middle-left">
+                <div class="middle-left-declare">
+                    <div id="middle-top">
+                        <!-- 今日已申报数 图板 -->
+                        <DigitalBoardTop></DigitalBoardTop>
+                    </div>
+                    <div id="middle-center">
+                        <!-- 本月已申报数 图板 -->
+                        <DigitalBoardDown></DigitalBoardDown>
+                    </div>
+                </div>
+                <div class="middle-left-declare-rate">
+                    <div id="middle-bottom">
+                        <!-- 本月申报率折线图 -->
+                        <DeclarePolyline></DeclarePolyline>
+                    </div>
+                </div>
+
+
             </div>
             </div>
-            <div id="middle-bottom">
-                <!-- 本月申报率折线图 -->
-                <DeclarePolyline></DeclarePolyline>
+            <div class="middle-right">
+                <div class="declare-top">
+                    <!--本月应申报-->
+                    <DeclareReport></DeclareReport>
+                </div>
+                <div class="deduction-bottom">
+                    <!-- 本月扣款情况 图板 -->
+                    <Deduction></Deduction>
+                </div>
             </div>
             </div>
+
         </section>
         </section>
 
 
         <section class="screen-right">
         <section class="screen-right">
             <div id="right-top">
             <div id="right-top">
-                <!-- 本月扣款情况 图板 -->
-                <Deduction></Deduction>
+                <!--访问监控 柱状图-->
+                <Monitoring></Monitoring>
             </div>
             </div>
             <div id="right-center">
             <div id="right-center">
                 <!-- 业务可用性 折线 -->
                 <!-- 业务可用性 折线 -->
                 <Availability></Availability>
                 <Availability></Availability>
             </div>
             </div>
             <div id="right-bottom">
             <div id="right-bottom">
+                <div class="cpu-dropdown">
+                    <el-dropdown @command="handleCommand"  >
+                        <span class="el-dropdown-link">
+                              {{commandName}}
+                              <i class="icon-arrow"></i>
+                        </span>
+                        <template #dropdown>
+                            <el-dropdown-menu class="cpuDropdown">
+                                <el-dropdown-item command="max">最大值</el-dropdown-item>
+                                <el-dropdown-item command="avg">平均值</el-dropdown-item>
+                                <el-dropdown-item command="min">最小值</el-dropdown-item>
+
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </div>
                 <!-- 系统响应监控 折线 -->
                 <!-- 系统响应监控 折线 -->
-                <ResponseMonitor></ResponseMonitor>
+                <ResponseMonitor :commandVal="commandVal" ref="responseRef"></ResponseMonitor>
             </div>
             </div>
         </section>
         </section>
     </div>
     </div>
@@ -67,7 +103,7 @@
         </div>
         </div>
         <div id="bottom-four">
         <div id="bottom-four">
             <!-- 带宽占用监控 折线 -->
             <!-- 带宽占用监控 折线 -->
-            <BandwidthCpu></BandwidthCpu>
+            <BandwidthCpu :commandVal="commandVal" ref="bandwidthRef" ></BandwidthCpu>
         </div>
         </div>
     </section>
     </section>
 </div>
 </div>

@@ -20,8 +20,17 @@ export default {
         'DocumentCpu': Vue.defineAsyncComponent(
         'DocumentCpu': Vue.defineAsyncComponent(
             () => myImport('views/dp/components/documentCpu/index')
             () => myImport('views/dp/components/documentCpu/index')
         ),
         ),
-        'TrendPolyline': Vue.defineAsyncComponent(
-            () => myImport('views/dp/components/trendPolyline/index')
+        // 'TrendPolyline': Vue.defineAsyncComponent(
+        //     () => myImport('views/dp/components/trendPolyline/index')
+        // ),
+        'DeclareLine': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/declareLine/index')
+        ),
+        'Monitoring': Vue.defineAsyncComponent(
+            () => myImport('views/dp/components/monitoring/index')
+        ),
+        'DeclareReport': Vue.defineAsyncComponent(
+            () => myImport('views/dp/components/declareReport/index')
         ),
         ),
         'BusinessVolume': Vue.defineAsyncComponent(
         'BusinessVolume': Vue.defineAsyncComponent(
             () => myImport('views/dp/components/businessVolume/index')
             () => myImport('views/dp/components/businessVolume/index')
@@ -42,7 +51,10 @@ export default {
     data () {
     data () {
         return {
         return {
             titleFontSize: 30,
             titleFontSize: 30,
-            dateTime: '00-00-00 00:00:00'
+            dateTime: '00-00-00 00:00:00',
+            colorData:['#0D45FE','#00FFB9','#A35CFF'],
+            commandName:'最大值',
+            commandVal:'max'
         }
         }
     },
     },
     computed: {
     computed: {
@@ -75,6 +87,21 @@ export default {
         },
         },
         timeFormat (number) {
         timeFormat (number) {
             return number.length == 1 ? ('0' + number) : number
             return number.length == 1 ? ('0' + number) : number
+        },
+        handleCommand(command){
+            console.log("newVal",command)
+            this.commandVal=command;
+            console.log("ne",this.commandVal)
+            if(command=='max'){
+                this.commandName="最大值";
+            }else if(command=='min'){
+                this.commandName="最小值";
+            }else{
+                this.commandName="平均值";
+            }
+            // this.$refs.responseRef.getData();
+            // this.$refs.bandwidthRef.getData();
+
         }
         }
     },
     },
     mounted () {
     mounted () {

@@ -6,20 +6,24 @@
     <div class="asset-overview yxqk">
     <div class="asset-overview yxqk">
         <div class="asset-overview-tip">
         <div class="asset-overview-tip">
             <div class="tip yxqk_tips_div">
             <div class="tip yxqk_tips_div">
-                <p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
+                <div class="asset-tip">
+                    <p @mouseover="showTip" @mouseleave="hideTip"> <i class="tip-i"></i> <span>资产总量</span></p>
+                    <!--悬浮提示信息-->
+                    <div class="yxqk_tips_container" v-show="isShow" >
+                        <ul class="items" id="yxjk_resource_type_count_tips" >
+                            <div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
+                                <li v-for="(item,index) in assetOverviewDataAll">
+                                    <i :class="'icon-'+item.code"></i>
+                                    <span >{{item.name}}：{{item.num}}台</span>
+                                </li>
+                            </div>
+                        </ul>
+                    </div>
+                </div>
+
                 <b id="yxjk_total_resource">{{totalData}}</b>
                 <b id="yxjk_total_resource">{{totalData}}</b>
 
 
-                <!--悬浮提示信息-->
-                <div class="yxqk_tips_container" v-show="isShow" >
-                    <ul class="items" id="yxjk_resource_type_count_tips" >
-                        <div id="yxjk_resource_type_count_tips_tmpl" class="tipDiv">
-                            <li v-for="(item,index) in assetOverviewDataAll">
-                                <i :class="'icon-'+item.code"></i>
-                                <span >{{item.resTypeName}}：{{item.num}}台</span>
-                            </li>
-                        </div>
-                    </ul>
-                </div>
+
 
 
             </div>
             </div>
             <div id="all_resource_status" :class="['yxqk__pie',pieClass]">
             <div id="all_resource_status" :class="['yxqk__pie',pieClass]">
@@ -38,7 +42,7 @@
                         <li :class="'list-'+index" v-for="(item,index) in assetOverviewData">
                         <li :class="'list-'+index" v-for="(item,index) in assetOverviewData">
                             <img :src="'src/assets/images/zjdp/'+item.code+'.png'">
                             <img :src="'src/assets/images/zjdp/'+item.code+'.png'">
                             <div style="margin-left: .02rem;">
                             <div style="margin-left: .02rem;">
-                                <p>{{item.resTypeName}}</p>
+                                <p>{{item.name}}</p>
                                 <div class="listNum">
                                 <div class="listNum">
                                     <b>{{item.num}}</b><span>台</span>
                                     <b>{{item.num}}</b><span>台</span>
                                 </div>
                                 </div>

@@ -20,7 +20,8 @@ export default {
         // 挂载完
         // 挂载完
         Vue.onMounted(() => {
         Vue.onMounted(() => {
             $.get(proxy.domainName +proxy.apiUrl,function (res) {
             $.get(proxy.domainName +proxy.apiUrl,function (res) {
-                const data = res.map;
+                const data = res;
+                // const data = res.object;
                 //状态
                 //状态
                 if(data && data.healthStatus){
                 if(data && data.healthStatus){
                     if(data.healthStatus == '2'){//问题
                     if(data.healthStatus == '2'){//问题
@@ -34,19 +35,19 @@ export default {
                     proxy.healthStatusName=data.healthStatusName;
                     proxy.healthStatusName=data.healthStatusName;
                 }
                 }
                 //资源总量
                 //资源总量
-                if(data && data.total){
-                    proxy.totalData=data.total;
+                if(data && data.count){
+                    proxy.totalData=data.count;
                 }
                 }
                 //分类总量
                 //分类总量
-                if(data && data.data){
+                if(data && data.object){
                     // //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
                     // //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
                     // var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER'];
                     // var tipsResTypes = ['HUAWEI_CLOUD','ALI_CLOUD','VIRTUALIZATION','HOST_MINICOMPUTER_PARTITION','STORAGE','NETHARDWARE_ROUTER'];
                     let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
                     let huawei = 0, ali = 0, vmware = 0, minicomputer_partition = 0, storage = 0, router = 0;
                     const showData = [];//展示的类型
                     const showData = [];//展示的类型
                     //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
                     //华为云、阿里云、Vmware、小型机分区、存储、路由器资源总量统计量
                     // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
                     // 遍历过滤出以上6种类型的统计，因为是固定6种，所以先写死
-                    $.each(data.data,function (i,v) {
-                        const resType = v.resType;
+                    $.each(data.object,function (i,v) {
+                        const resType = v.code;
                         if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
                         if(resType.indexOf("HUAWEI_CLOUD_PLAT") >= 0 ) { huawei += v.num; }
                         if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
                         if(resType.indexOf("ALI_CLOUD_PLAT") >= 0 ) { ali += v.num; }
                         if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
                         if(resType.indexOf("VIRTUALIZATION_VMWARE") >= 0 ) { vmware += v.num; }
@@ -54,16 +55,16 @@ export default {
                         if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
                         if(resType.indexOf('HUAWEI_CLOUD_STORAGE') >= 0) { storage += v.num; }
                         if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
                         if(resType == 'NETHARDWARE_ROUTER' ) { router += v.num; }
                     });
                     });
-                    showData.push({resTypeName:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
-                    showData.push({resTypeName:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
-                    showData.push({resTypeName:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
-                    showData.push({resTypeName:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
-                    showData.push({resTypeName:"存储",num:storage,code:'STORAGE'});
-                    showData.push({resTypeName:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
+                    showData.push({name:"华为云",num:huawei,code:'HUAWEI_CLOUD_PLAT'});
+                    showData.push({name:"阿里云",num:ali,code:'ALI_CLOUD_PLAT'});
+                    showData.push({name:"Vmware",num:vmware,code:'VIRTUALIZATION_VMWARE'});
+                    showData.push({name:"小型机分区",num:minicomputer_partition,code:'HOST_MINICOMPUTER'});
+                    showData.push({name:"存储",num:storage,code:'STORAGE'});
+                    showData.push({name:"路由器",num:router,code:'NETHARDWARE_ROUTER'});
                     //类型统计
                     //类型统计
 
 
                     proxy.assetOverviewData=showData;
                     proxy.assetOverviewData=showData;
-                    proxy.assetOverviewDataAll=data.data;
+                    proxy.assetOverviewDataAll=data.object;
 
 
                     //悬浮提示
                     //悬浮提示
 
 

-<div class="barChart">
-  <div id="bar-echart" style="width:100%;height:225px;"></div>
-</div>
+<div id="bar-echart" style="width:100%;height:100%;"></div>

 export default {
 export default {
     name: 'barChart',
     name: 'barChart',
     template: '',
     template: '',
+    props:['optionData'],
     components: {
     components: {
     },
     },
     data(){
     data(){
         return {
         return {
             domainName:'http://192.168.0.159:8080/api-web',
             domainName:'http://192.168.0.159:8080/api-web',
+            chartId:'bar-echart'
 
 
         }
         }
     },
     },
@@ -13,11 +15,10 @@ export default {
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
         // 挂载完
         // 挂载完
         Vue.onMounted(() => {
         Vue.onMounted(() => {
-            const chartDom = document.getElementById('bar-echart');
+            const chartDom=proxy.$el
             const myChart = echarts.init(chartDom);
             const myChart = echarts.init(chartDom);
-            let option;
-
-            option = {
+            let option=props.optionData;
+            /*option = {
                 title: {
                 title: {
                     text: '近30天访问量',
                     text: '近30天访问量',
                     x:'center',
                     x:'center',
@@ -29,7 +30,7 @@ export default {
                 },
                 },
                 xAxis: {
                 xAxis: {
                     type: 'category',
                     type: 'category',
-                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    data: props.legendData,
                     axisLine:{
                     axisLine:{
                         show:true,//是否显示坐标线
                         show:true,//是否显示坐标线
                         lineStyle: {
                         lineStyle: {
@@ -58,35 +59,27 @@ export default {
                     },
                     },
                     axisLabel:{
                     axisLabel:{
                         color:'#ffffff',
                         color:'#ffffff',
-                        fontSize:12
-                    },
-                },
-                series: [
-                    {
-                        data: [120, 200, 150, 80, 70, 110, 130],
-                        type: 'bar',
-                        showBackground: true,
-                        backgroundStyle: {
-                            color: 'rgba(180, 180, 180, 0.2)'
-                        },
-                        itemStyle:{
-                            normal:{
-                                barBorderRadius: [3,3,0,0],
-                                color:new echarts.graphic.LinearGradient(
-                                    0,0,0,1,
-                                    [
-                                        {offset:0,color:'#3ac9fb'},
-                                        {offset:1,color:'#2a81f3'}
-                                    ]
-                                )
-                                // color:"#ff0000"
+                        fontSize:12,
+                        formatter:function (value,index){
+                            if(value>=10000 &&value<10000000){
+                                value=value/10000 +"万";
+                            }else if(value>=10000000){
+                                value=value/10000000+"千万";
                             }
                             }
+                            return value;
                         }
                         }
                     }
                     }
-                ]
-            };
+                },
+                series: props.seriesData
+            };*/
 
 
+
+            window.addEventListener('resize', function () {
+
+                myChart.resize();
+            });
             option && myChart.setOption(option);
             option && myChart.setOption(option);
+
         })
         })
         return{
         return{
 
 

@@ -21,7 +21,7 @@
                 </div>
                 </div>
             </div>
             </div>
             <div class="declare-today-num">
             <div class="declare-today-num">
-                <Digital :numm="56631" :numLen="7"></Digital>
+                <Digital v-if="declaredToday" :numm="declaredToday" :numLen="7"></Digital>
             </div>
             </div>
         </div>
         </div>
         <div class="declare-today">
         <div class="declare-today">
@@ -33,28 +33,22 @@
                 </div>
                 </div>
             </div>
             </div>
             <div class="declare-today-num">
             <div class="declare-today-num">
-                <Digital :numm="5640397" :numLen="7"></Digital>
+                <Digital v-if="declaredMonth" :numm="declaredMonth" :numLen="7"></Digital>
             </div>
             </div>
         </div>
         </div>
         <div class="declare-today">
         <div class="declare-today">
             <div class="declare-title">
             <div class="declare-title">
                 <div class="declare-bg volume-today"></div>
                 <div class="declare-bg volume-today"></div>
             </div>
             </div>
-            <div class="volume-today-container">
-                <span class="volume-text">网络发票</span>
-                <span class="volume-proportion" :style="styleVolume"></span>
-                <span class="volume-num">{{volumeNum}}</span>
+            <div v-if="volumdData" class="volume-today-container" v-for="(item,index) in volumeData">
+                <span class="volume-text">{{item.name}}</span>
+                <span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span>
+                <span class="volume-num">{{item.num1}}</span>
             </div>
             </div>
-            <div class="volume-today-container">
-                <span class="volume-text">涉税文书</span>
-                <span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
-                <span class="volume-num num-doc">{{volumeNumDoc}}</span>
-            </div>
-            <div class="volume-today-container">
-                    <span class="volume-text">网上申报</span>
-                <span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
-                <span class="volume-num num-net">{{volumeNumNet}}</span>
+            <div class="volume-today-container" v-else style="justify-content: center;">
+                <span>暂无数据</span>
             </div>
             </div>
+
         </div>
         </div>
     </div>
     </div>
     <div class="declare-right">
     <div class="declare-right">

@@ -8,15 +8,20 @@ export default {
     },
     },
     data(){
     data(){
         return {
         return {
-            domainName:'http://192.168.0.245:8180/api-web',
+            domainName:sessionStorage.getItem('domainName'),
+            apiUrl:'/api-web/bigScreen/digitalBoardData',//本月已申报/未申报
+            apiUrl1:'/api-web/bigScreen/findPortfolio',//今日业务量
+            volumeData:'',//业务量数据
             declareData:'',
             declareData:'',
             reportable:0,//本月应申报
             reportable:0,//本月应申报
             reportableToday:0,//本日申报未导入
             reportableToday:0,//本日申报未导入
+            declaredToday:0,//今日已申报数
             reportableMonth:0, //本月未申报数
             reportableMonth:0, //本月未申报数
-            declarationRate:0.94,//申报率
-            volumeNumDoc:0,//涉税文书业务量
-            volumeNumNet:0,//网上申报业务量
-            volumeNum:0, //业务量数
+            declaredMonth:0,//本月已申报数
+            declarationRate:0.00,//申报率
+            // volumeNumDoc:0,//涉税文书业务量
+            // volumeNumNet:0,//网上申报业务量
+            // volumeNum:0, //业务量数
             styleVolume:'',//业务量style样式
             styleVolume:'',//业务量style样式
             styleVolumeDoc:'',
             styleVolumeDoc:'',
             styleVolumeNet:'',
             styleVolumeNet:'',
@@ -29,41 +34,64 @@ export default {
         const {proxy} = Vue.getCurrentInstance();
         const {proxy} = Vue.getCurrentInstance();
         // 挂载完
         // 挂载完
         Vue.onMounted(() => {
         Vue.onMounted(() => {
-            proxy.reportable=proxy.numberFilter('1006105',-1);
-            proxy.reportableToday=proxy.numberFilter('1006506',-1);
-            proxy.reportableMonth=proxy.numberFilter('2848',-1);
+            $.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD',function (res) {
+                const data = res;
+                if(data && data.map){
+                    let reportableMonth=data.map.rightNumber;
+                    proxy.declaredMonth=data.map.leftNumber;
+                    proxy.reportableMonth=proxy.numberFilter(reportableMonth,-1);
 
 
-            proxy.volumeNum=proxy.numberFilter('5765404',-1);
-            proxy.volumeNumDoc=proxy.numberFilter('5458044',-1);
-            proxy.volumeNumNet=proxy.numberFilter('698423',-1);
+                    let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);
+                    proxy.reportable=proxy.numberFilter(reportable,-1);
+                    let declarationRate=(parseInt(proxy.declaredMonth) /reportable).toFixed(2);
+                    proxy.opactiyNumMath=declarationRate*proxy.opactiyNumTotal
 
 
-            proxy.opactiyNumMath=proxy.declarationRate*proxy.opactiyNumTotal
+                    if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
+                        proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
 
 
-            if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
-                proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
+                    }else{
+                        proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
 
 
-            }else{
-                proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
+                    }
+                    proxy.declarationRate=declarationRate*100+'%';
 
 
-            }
-            proxy.declarationRate=proxy.declarationRate*100+'%';
+                }
 
 
-            let num1=5765404;
-            let num2=5458044;
-            let num3=698423;
+            })
 
 
-            proxy.styleVolume='width:'+proxy.eleWidthNum(num1,num1,num2,num3)+'px'
-            proxy.styleVolumeDoc='width:'+proxy.eleWidthNum(num2,num1,num2,num3)+'px'
-            proxy.styleVolumeNet='width:'+proxy.eleWidthNum(num3,num1,num2,num3)+'px'
+            $.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBS&kipValue2=KPIDA0ACBBE',function (res) {
+                const data = res;
+                if(data && data.map){
+                    let reportableToday=data.map.rightNumber;
+                    proxy.declaredToday=data.map.leftNumber;
+                    proxy.reportableToday=proxy.numberFilter(reportableToday,-1);
+                }
+            })
 
 
+            //业务量
+            $.get(proxy.domainName +proxy.apiUrl1,function (res) {
+                const data = res;
+                if(data && data.data){
+                    let volumeData=data.data;
+                    let maxVal=0;
+                    $.each(volumeData,function (i,v){
+                        v.num1=proxy.numberFilter(v.num,-1)
+                        if(v.num>maxVal){
+                            maxVal=v.num;
+                        }
+                    })
+                    $.each(volumeData,function (i,v){
+                        v.styleVolume='width:'+proxy.eleWidthNum(v.num,maxVal)+'px'
+                    })
+                    proxy.volumeData=volumeData;
 
 
+                }
 
 
+            })
 
 
         })
         })
-        const eleWidthNum=(num,num1,num2,num3)=>{
-            let maxNum = num1>num2?(num1>num3?num1:num3):(num2>num3?num2:num3);
+        const eleWidthNum=(num,maxNum)=>{
             let widthNum=Math.ceil((num*150)/maxNum)
             let widthNum=Math.ceil((num*150)/maxNum)
-            console.log("aaa",num,widthNum)
             let widthData=0;
             let widthData=0;
             if(widthNum!='' && widthNum!=null && widthNum!=undefined){
             if(widthNum!='' && widthNum!=null && widthNum!=undefined){
                 widthData=widthNum;
                 widthData=widthNum;

 <div class="declare-lineChart">
 <div class="declare-lineChart">
-    <LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :chartId="chartId"></LineChart>
+    <LineChart :optionData="optionData"  v-if="optionData"></LineChart>
 </div>
 </div>