monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 78c8b3dec630120975d0df368d825659bd4b06dc 2 parents 87ce0796 32c55c7e

Merge branch 'master-v32-lushangqing' into 'master' 

电子税务局大屏页面搭建



See merge request !43
Inline Side-by-side
Showing 75 changed files with 1848 additions and 900 deletions
@@ -19,6 +19,8 @@ @@ -19,6 +19,8 @@
19 19
20 @import "../css/digitalboard.css"; 20 @import "../css/digitalboard.css";
21 21
  22 +@import "../css/declareReport.css";
  23 +
22 /*zj大屏*/ 24 /*zj大屏*/
23 @import "../css/zjbigscreen.css"; 25 @import "../css/zjbigscreen.css";
24 26
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 width: 100%; 22 width: 100%;
23 height: 100%; 23 height: 100%;
24 padding: 0 0.2%; 24 padding: 0 0.2%;
25 - background: url(bg_backgroud.png); 25 + background: url('/vue3/src/assets/images/digitalDp/bg_backgroud.png');
26 background-size: 100% 100%; 26 background-size: 100% 100%;
27 color: #fff; 27 color: #fff;
28 box-sizing: border-box; 28 box-sizing: border-box;
@@ -74,20 +74,47 @@ @@ -74,20 +74,47 @@
74 margin-top: 0.5%; 74 margin-top: 0.5%;
75 margin-left: 0.2%; 75 margin-left: 0.2%;
76 margin-right: 0.2%; 76 margin-right: 0.2%;
  77 + display:flex;
  78 +}
  79 +.middle-left{
  80 + width:80%;
  81 + display: flex;
  82 + flex-flow: column;
  83 + justify-content: space-around;
  84 +}
  85 +.width-86{
  86 + width:86%;
  87 + margin-bottom: 10px;
  88 +}
  89 +.middle-right{
  90 + flex: 1;
  91 + position: relative;
  92 + left: -5%;
  93 + display: flex;
  94 + flex-flow: column;
  95 + justify-content: space-around;
  96 +}
  97 +.deduction-bottom{
  98 + height:40%;
  99 + position: relative;
77 } 100 }
78 .screen-middle #middle-top { 101 .screen-middle #middle-top {
79 width: 100%; 102 width: 100%;
80 - height: 32%; 103 + /*height: 32%;*/
81 position: relative; 104 position: relative;
82 } 105 }
83 .screen-middle #middle-center { 106 .screen-middle #middle-center {
84 width: 100%; 107 width: 100%;
85 - height: 32%; 108 + /*height: 32%;*/
86 position: relative; 109 position: relative;
87 } 110 }
  111 +.middle-left-declare-rate{
  112 + height: 36%;
  113 +
  114 +}
88 .screen-middle #middle-bottom { 115 .screen-middle #middle-bottom {
89 width: 100%; 116 width: 100%;
90 - height: 36%; 117 + height: 100%;
91 position: relative; 118 position: relative;
92 } 119 }
93 120
@@ -103,18 +130,42 @@ @@ -103,18 +130,42 @@
103 } 130 }
104 131
105 .screen-right #right-top { 132 .screen-right #right-top {
106 - height: 26%; 133 + height: 32%;
107 position: relative; 134 position: relative;
108 } 135 }
109 .screen-right #right-center { 136 .screen-right #right-center {
110 - height: 37%; 137 + height: 35%;
111 position: relative; 138 position: relative;
112 } 139 }
113 .screen-right #right-bottom { 140 .screen-right #right-bottom {
114 - height: 37%; 141 + height: 33%;
  142 + position: relative;
  143 +}
  144 +.screen-right #right-top .monitoring-bar{
  145 + height: 100%;
115 position: relative; 146 position: relative;
  147 + text-align: left;
  148 +}
  149 +.cpu-dropdown{
  150 + text-align: right;
  151 +}
  152 +.cpu-dropdown .el-dropdown .el-dropdown-selfdefine{
  153 + color:#ffffff;
  154 + cursor: pointer;
  155 + margin-right: 15px;
116 } 156 }
117 157
  158 +.el-dropdown__popper .el-dropdown-menu{
  159 + background-color: rgba(0,0,0,0.5);
  160 + border:none;
  161 +}
  162 +.el-dropdown-menu__item{
  163 + color:#ffffff;
  164 +}
  165 +.el-dropdown__popper.el-popper[role="tooltip"]{
  166 + border:none;
  167 + background-color: rgba(0,0,0,0);
  168 +}
118 .screen-bottom { 169 .screen-bottom {
119 width: 100%; 170 width: 100%;
120 height: 34%; 171 height: 34%;
@@ -140,3 +191,12 @@ @@ -140,3 +191,12 @@
140 width: 25%; 191 width: 25%;
141 position: relative; 192 position: relative;
142 } 193 }
  194 +.icon-arrow{
  195 + background-image: url("/vue3/src/assets/images/digitalDp/icon-arrow.png");
  196 + width:12px;
  197 + height:12px;
  198 + background-size: 100%;
  199 + display: inline-block;
  200 + background-repeat: no-repeat;
  201 + background-position: center;
  202 +}
1 .declare-container,.declare-lineChart{ 1 .declare-container,.declare-lineChart{
2 - background: url("/vue3/src/assets/images/zjdp/img-bg.png");  
3 - background-position: center; 2 + /* background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;*/
4 4
5 } 5 }
6 .declare-container{ 6 .declare-container{
  1 +.declare-report .grid-content{
  2 + display: flex;
  3 + align-items: center;
  4 + justify-content: center;
  5 + padding: 5px 0;
  6 +}
  7 +.declare-report .declare-report-num{
  8 + background-image: url("/vue3/src/assets/images/digitalDp/text-bg.png");
  9 + background-repeat: no-repeat;
  10 + background-position: center;
  11 + background-size: contain;
  12 + margin-top: 20px;
  13 +}
  14 +.declare-report .grid-content img{
  15 + padding-right:10%;
  16 + border-right:1px solid #ffffff;
  17 + border-radius: 1px;
  18 +}
  19 +.declare-report .grid-content .title-ysb{
  20 + padding-left:10%;
  21 +}
  22 +.declare-report-top,.declare-report-bottom{
  23 + margin-top: 14%;
  24 + text-align: center;
  25 +}
  26 +.declare-report .rate-title{
  27 + position: absolute;
  28 + width: 100%;
  29 + top: 7px;
  30 +}
  31 +.declare-report .grid-content.rate-container{
  32 + background-image: url("/vue3/src/assets/images/digitalDp/icon-rate.png");
  33 + background-repeat: no-repeat;
  34 + height: 156px;
  35 + background-position: center top;
  36 +}
  37 +.declare-report .rate-container .rate-num{
  38 + margin-top:10px;
  39 +}
@@ -2,37 +2,41 @@ @@ -2,37 +2,41 @@
2 text-align: center; 2 text-align: center;
3 } 3 }
4 .deduction-box-title { 4 .deduction-box-title {
5 - position: absolute; 5 + /*position: absolute;
6 left: 2%; 6 left: 2%;
7 - top: 1%; 7 + top: 1%;*/
8 } 8 }
9 .deduction-title-size { 9 .deduction-title-size {
10 - position: absolute; 10 + /* position: absolute;
11 left: 9%; 11 left: 9%;
12 - top: 22%; 12 + top: 22%;*/
  13 +}
  14 +.deduction-num-container{
  15 + position: relative;
  16 + margin-top: 12%;
13 } 17 }
14 .deduction-box-text-left { 18 .deduction-box-text-left {
15 position: absolute; 19 position: absolute;
16 - left: 17%;  
17 - top: 47%; 20 + top: 20%;
  21 + width:100%;
18 } 22 }
19 .deduction-box-text-right { 23 .deduction-box-text-right {
20 position: absolute; 24 position: absolute;
21 - left: 53%;  
22 - top: 47%; 25 + top: 20%;
  26 + width:100%;
23 } 27 }
24 .deduction-text-number { 28 .deduction-text-number {
25 color: #01E6E6; 29 color: #01E6E6;
26 } 30 }
27 31
28 .deduction-box-img-left { 32 .deduction-box-img-left {
29 - position: absolute; 33 + /* position: absolute;
30 left: 10%; 34 left: 10%;
31 - top: 5%; 35 + top: 5%;*/
32 } 36 }
33 37
34 .deduction-box-img-right { 38 .deduction-box-img-right {
35 - position: absolute; 39 + /* position: absolute;
36 left: 50%; 40 left: 50%;
37 - top: 5%; 41 + top: 5%;*/
38 } 42 }
@@ -8,7 +8,9 @@ @@ -8,7 +8,9 @@
8 position: absolute; 8 position: absolute;
9 color: #FEFEFE; 9 color: #FEFEFE;
10 top: 1%; 10 top: 1%;
11 - left: 6%; 11 + left: 2%;
  12 + letter-spacing: 1px;
  13 + font-weight: bold;
12 } 14 }
13 15
14 @font-face{ 16 @font-face{
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 flex: 1; 27 flex: 1;
28 } 28 }
29 .tabItem{ 29 .tabItem{
30 - padding:5px 30px; 30 + padding:0px 53px;
31 border-bottom: 3px solid #1ac045; 31 border-bottom: 3px solid #1ac045;
32 background-color: #0c1532; 32 background-color: #0c1532;
33 border-radius: 3px; 33 border-radius: 3px;
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 cursor: pointer; 36 cursor: pointer;
37 font-family: "PingFang SC"; 37 font-family: "PingFang SC";
38 box-sizing: border-box; 38 box-sizing: border-box;
39 - height: 43px; 39 + height: 40px;
40 align-items: center; 40 align-items: center;
41 display: flex; 41 display: flex;
42 } 42 }
@@ -64,7 +64,7 @@ @@ -64,7 +64,7 @@
64 } 64 }
65 .listItem-icon{ 65 .listItem-icon{
66 position: absolute; 66 position: absolute;
67 - top:53%; 67 + top:52%;
68 } 68 }
69 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{ 69 .listItem:nth-child(1) .listItem-num,.listItem:nth-child(1) .listItem-icon{
70 right: -20px; 70 right: -20px;
@@ -94,7 +94,7 @@ @@ -94,7 +94,7 @@
94 .listItem:nth-child(3) .listItem-icon-name{ 94 .listItem:nth-child(3) .listItem-icon-name{
95 left: 14%; 95 left: 14%;
96 } 96 }
97 -.listItem:nth-child(3) .listItem-icon-name{ 97 +.listItem:nth-child(4) .listItem-icon-name{
98 left: -28%; 98 left: -28%;
99 } 99 }
100 .healthList{ 100 .healthList{
@@ -3,6 +3,7 @@ body{font-size: 15px;} @@ -3,6 +3,7 @@ body{font-size: 15px;}
3 background-image: url("/vue3/src/assets/images/zjdp/img-bg.png"); 3 background-image: url("/vue3/src/assets/images/zjdp/img-bg.png");
4 background-position: center; 4 background-position: center;
5 background-size: cover; 5 background-size: cover;
  6 + font-family: "PingFang SC";
6 } 7 }
7 .screen-bg{ 8 .screen-bg{
8 background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png"); 9 background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
@@ -55,9 +56,15 @@ body{font-size: 15px;} @@ -55,9 +56,15 @@ body{font-size: 15px;}
55 56
56 .declare-chart{ 57 .declare-chart{
57 display: flex; 58 display: flex;
58 - height: 560px; 59 + height: 550px;
59 60
60 } 61 }
  62 +.declare-lineChart{
  63 + height:100%;
  64 +}
  65 +.monitoring-bar{
  66 + height:50%;
  67 +}
61 .screen-nav{ 68 .screen-nav{
62 margin-bottom: 30px; 69 margin-bottom: 30px;
63 padding-right: 20px; 70 padding-right: 20px;
@@ -69,8 +76,11 @@ body{font-size: 15px;} @@ -69,8 +76,11 @@ body{font-size: 15px;}
69 .performance-lineChart{ 76 .performance-lineChart{
70 margin-top:30px; 77 margin-top:30px;
71 } 78 }
  79 +.screen-res{
  80 + width:45%;
  81 +}
72 .screen-performance{ 82 .screen-performance{
73 - flex:1; 83 + width:55%;
74 } 84 }
75 .performance-container .container-title{ 85 .performance-container .container-title{
76 margin-left:40px; 86 margin-left:40px;
@@ -104,12 +104,6 @@ const routes = [{ @@ -104,12 +104,6 @@ const routes = [{
104 path: '/zjdaping', 104 path: '/zjdaping',
105 name: 'zjdaping', 105 name: 'zjdaping',
106 component: () => myImport('views/zjdaping/index') 106 component: () => myImport('views/zjdaping/index')
107 - },  
108 - {  
109 - path:'/zjdapingchart',  
110 - name:'zjdapingchart',  
111 - component: () => myImport('views/zjdaping/components/barChart/index')  
112 -  
113 } 107 }
114 ]; 108 ];
115 109
1 -<div class="com-container">  
2 - <div class="com-chart" id="availability_ref"></div> 1 +<div class="com-container available-chart" id="availability_ref" style="text-align: left" >
  2 + <img :style="comtitleImgStyle" src="/vue3/src/assets/images/digitalDp/title-availability.png" alt="">
  3 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
  4 + <!--<div class="com-chart" ></div>
3 <div class="topfive-box-title"> 5 <div class="topfive-box-title">
4 - <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> <!-- bor1_6 --> 6 + <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> &lt;!&ndash; bor1_6 &ndash;&gt;
5 <span :style="comtitleTextStyle" class="available-title-size">业务可用性</span> 7 <span :style="comtitleTextStyle" class="available-title-size">业务可用性</span>
6 - </div> 8 + </div>-->
7 </div> 9 </div>
1 export default { 1 export default {
2 - name: 'Availability', 2 + name: 'availability',
3 template: '', 3 template: '',
4 - components: {},  
5 - data () { 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
  9 + data(){
6 return { 10 return {
7 - chartInstance: null,  
8 - allData: {  
9 - polyline: {  
10 - title: "业务可用性",  
11 - unit: "%",  
12 - data: {  
13 - name: "占比",  
14 - data: ["67","70","80","71","90","92","72","70","56","45","89","100"]  
15 - }  
16 - },  
17 - xAxis: {  
18 - 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"]  
19 - }  
20 - },  
21 - titleFontSize: 20,  
22 - startValue: 0, // 区域缩放的起点值  
23 - endValue: 6, // 区域缩放的终点值  
24 - timerId: null // 定时器的标识 11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/sxview/getBusinessAvailability',
  13 + resourceStatisticsData:'',
  14 + optionData:'',
  15 + ySeriesCommon:[],
  16 + titleFontSize: 30,
  17 +
25 } 18 }
26 }, 19 },
27 - mounted () {  
28 - this.initChart()  
29 - this.getData()  
30 - window.addEventListener('resize', this.screenAdapter)  
31 - this.screenAdapter()  
32 - },  
33 - unmounted () {  
34 - window.removeEventListener('resize', this.screenAdapter)  
35 - clearInterval(this.timerId)  
36 - },  
37 computed: { 20 computed: {
38 comtitleTextStyle () { 21 comtitleTextStyle () {
39 return { 22 return {
@@ -42,159 +25,290 @@ export default { @@ -42,159 +25,290 @@ export default {
42 }, 25 },
43 comtitleImgStyle () { 26 comtitleImgStyle () {
44 return { 27 return {
45 - // height: this.titleFontSize + 'px',  
46 - width: this.titleFontSize * 8 + 'px' 28 + height: this.titleFontSize * 2.1 + 'px'
47 } 29 }
48 } 30 }
49 }, 31 },
50 - methods: {  
51 - initChart () {  
52 - this.chartInstance = echarts.init(document.getElementById('availability_ref'))  
53 - const initOption = {  
54 - grid: {  
55 - top: '25%',  
56 - left: '3%',  
57 - right: '6%',  
58 - bottom: '3%',  
59 - containLabel: true  
60 - },  
61 - legend: {  
62 - right: '2%',  
63 - top: '5%' 32 + setup(props, {attrs, slots, emit}) {
  33 + const {proxy} = Vue.getCurrentInstance();
  34 +
  35 +
  36 + // 挂载完
  37 +
  38 + Vue.onMounted(() => {
  39 + proxy.screenAdapter();
  40 + proxy.getData();
  41 +
  42 + })
  43 + const getData=()=> {
  44 + $.get(proxy.domainName + proxy.apiUrl, function (res) {
  45 + const data = res;
  46 + if (data && data.data) {
  47 + let resData = data.data;
  48 +
  49 + }
  50 + // proxy.optionInit();
  51 +
  52 + })
  53 +
  54 + proxy.optionInit();
  55 + }
  56 +
  57 + const optionInit=()=>{
  58 +
  59 + let data3=[350, 350, 350, 350, 350, 350, 350];
  60 + let data4=[220, 182, 191, 234, 290, 330, 310];
  61 + let data2=[100, 100, 100, 100, 100, 100, 100];
  62 + let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
  63 +
  64 + let min1=proxy.calMin([data1,data2]);
  65 + let max1=proxy.calMax([data1,data2]);
  66 + let min2=proxy.calMin([data3,data4]);
  67 + let max2=proxy.calMax([data3,data4]);
  68 + //业务双y轴数据
  69 + proxy.ySeriesCommon=[
  70 + {
  71 + name:'可用性',
  72 + type: 'line',
  73 + smooth:true,
  74 + // stack: 'Total',
  75 + show:false,
  76 + data:data3,
  77 + yAxisIndex:1,
  78 + showSymbol:false,
  79 + itemStyle : {
  80 + normal : {
  81 + color:"#97d5f4",//tooltip里的小圆点颜色
  82 + lineStyle:{
  83 + color:'#97d5f4',
  84 + width:1
  85 + }
  86 + }
  87 + },
  88 + areaStyle: {
  89 + // color:'rgba(151,213,244,0.4)',
  90 + normal:{
  91 + color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
  92 + offset: 0,
  93 + color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明
  94 + }, {
  95 + offset: 1,
  96 + color: 'rgba(151,213,244,0.1)'
  97 + }])
  98 + }
  99 +
  100 + },
64 }, 101 },
65 - xAxis: {  
66 - type: 'category',  
67 - boundaryGap: false,  
68 - axisLabel: {  
69 - textStyle: {  
70 - color: '#E6E8EB' 102 + {
  103 + name:'成功率',
  104 + type: 'line',
  105 + smooth:true,
  106 + // stack: 'Total',
  107 + show:false,
  108 + data:data1,
  109 + yAxisIndex:0,
  110 + showSymbol:false,
  111 + itemStyle : {
  112 + normal : {
  113 + color:"#efe0a7",//tooltip里的小圆点颜色
  114 + lineStyle:{
  115 + color:'#efe0a7',
  116 + width:1
  117 + }
71 } 118 }
72 - } 119 + },
  120 + areaStyle: {
  121 + color:'rgba(239,224,167,0)'
  122 + },
73 }, 123 },
74 - yAxis: {  
75 - type: 'value',  
76 - splitLine: {  
77 - show: false 124 + {
  125 + name:'响应率',
  126 + type: 'line',
  127 + smooth:true,
  128 + // stack: 'Total',
  129 + show:false,
  130 + data:data2,
  131 + yAxisIndex:0,
  132 + showSymbol:false,
  133 + itemStyle : {
  134 + normal : {
  135 + color:"#e5abd1",//tooltip里的小圆点颜色
  136 + lineStyle:{
  137 + color:'#e5abd1',
  138 + width:1
  139 + }
  140 + }
78 }, 141 },
79 - axisLabel: {  
80 - textStyle: {  
81 - color: '#E6E8EB' 142 + areaStyle: {
  143 + color:'rgba(229,171,209,0)'
  144 + },
  145 + },
  146 + {
  147 + name:'交易量',
  148 + type: 'line',
  149 + smooth:true,
  150 + // stack: 'Total',
  151 + show:false,
  152 + data:data4,
  153 + yAxisIndex:1,
  154 + showSymbol:false,
  155 + itemStyle : {
  156 + normal : {
  157 + color:"#97aaff",//tooltip里的小圆点颜色
  158 + lineStyle:{
  159 + color:'#97aaff',
  160 + width:1,
  161 + }
82 } 162 }
83 - } 163 + },
  164 + areaStyle: {
  165 + color:'rgba(151,170,255,0)'
  166 + },
84 } 167 }
85 - }  
86 - this.chartInstance.setOption(initOption)  
87 - },  
88 - getData () {  
89 - // await this.$http.get()  
90 - // const { data: ret } = await this.$http.get('responsemonitor')  
91 - // this.allData = ret  
92 - // console.log(ret)  
93 - this.updateChart()  
94 - this.startInterval()  
95 - },  
96 - updateChart () {  
97 - // 半透明的颜色值  
98 - const colorArr1 = [  
99 - 'rgba(11, 168, 44, 0.5)',  
100 - 'rgba(44, 110, 255, 0.5)',  
101 - 'rgba(22, 242, 217, 0.5)',  
102 - 'rgba(254, 33, 30, 0.5)',  
103 - 'rgba(250, 105, 0, 0.5)'  
104 ] 168 ]
105 - // 全透明的颜色值  
106 - const colorArr2 = [  
107 - 'rgba(11, 168, 44, 0)',  
108 - 'rgba(44, 110, 255, 0)',  
109 - 'rgba(22, 242, 217, 0)',  
110 - 'rgba(254, 33, 30, 0)',  
111 - 'rgba(250, 105, 0, 0)'  
112 - ]  
113 - const timeArr = this.allData.xAxis.today  
114 - const seriesData = this.allData.polyline.data.data  
115 - const seriesName = this.allData.polyline.data.name  
116 - // 图例的数据  
117 - const legendArr = this.allData.polyline.data.data.map(item => {  
118 - return item.name 169 + // let xAxisDataLength=proxy.ySeriesCommon[0].length;
  170 + let xAxisData=[];
  171 + for(let i=0;i<=24;i++){
  172 + if(i%4==0){
  173 + xAxisData.push(i+':00')
  174 +
  175 + }
  176 + }
  177 + let legendData=[];
  178 + $.each(proxy.ySeriesCommon,function (i,v){
  179 + legendData.push(v.name)
119 }) 180 })
120 - console.log(legendArr)  
121 - const title = this.allData.polyline.title  
122 - const unit = this.allData.polyline.unit  
123 - const dataOption = {  
124 - // title: {  
125 - // text: '{Sunny| 业务可用性 }',  
126 - // show: true  
127 - // },  
128 - xAxis: {  
129 - data: timeArr 181 + proxy.legendData=legendData;
  182 + proxy.optionData = {
  183 + title: {
  184 + text: ''
  185 + },
  186 + tooltip: {
  187 + trigger: 'axis',
  188 + backgroundColor:'rgba(50,50,50,0.7)',
  189 + borderColor:"#333",
  190 + textStyle:{
  191 + color:"#fff",
  192 + align:'left'
  193 + }
  194 +
130 }, 195 },
131 legend: { 196 legend: {
132 - data: legendArr 197 + data: proxy.legendData,
  198 + itemHeight:0,//图例圆圈大小设置
  199 + y:'0px',
  200 + textStyle: {
  201 + color: '#ffffff',
  202 + fontsize:"12px"
  203 + }
  204 +
133 }, 205 },
134 - dataZoom: {  
135 - show: false,  
136 - startValue: this.startValue,  
137 - endValue: this.endValue 206 + grid: {
  207 + top:'15%',
  208 + left: '3%',
  209 + right: '4%',
  210 + // bottom: '3%',
  211 + containLabel: true,
138 }, 212 },
139 - series: [ 213 + xAxis: {
  214 + type: 'category',
  215 + boundaryGap: false,
  216 + data: xAxisData,
  217 +
  218 + axisLine:{
  219 + show:false,//是否显示坐标线
  220 + },
  221 + axisTick: {
  222 + show: false //是否显示坐标刻度
  223 + },
  224 + axisLabel:{
  225 + color:'#ffffff',
  226 + },
  227 +
  228 + },
  229 + yAxis:[
140 { 230 {
141 - name: seriesName,  
142 - type: 'line',  
143 - data: seriesData,  
144 - smooth: true,  
145 - areaStyle: {  
146 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
147 - {  
148 - offset: 0,  
149 - color: colorArr1[2]  
150 - }, // %0的颜色值  
151 - {  
152 - offset: 1,  
153 - color: colorArr2[2]  
154 - } // 100%的颜色值  
155 - ]) 231 +
  232 + type: 'value',
  233 + axisLabel: {
  234 + formatter: '{value} %'//以百分比显示
  235 + },
  236 + splitLine:{
  237 + lineStyle: {
  238 + color:'#0a1b31'
  239 + }
  240 + },
  241 + min:0,
  242 + max:100,
  243 + splitNumber:5,
  244 + interval:(100-0)/5
  245 + }, {
  246 + name: '单位:万',
  247 + type: 'value',
  248 + axisLabel: {
  249 + show: true,
  250 + interval: 'right',//居中显示
  251 + },
  252 + splitLine:{
  253 + lineStyle: {
  254 + color:'#0a1b31'
  255 + }
  256 + },
  257 + min:min2,
  258 + max:max2,
  259 + splitNumber:5,
  260 + interval:(max2-min2)/5
  261 + },
  262 + ],
  263 + series: proxy.ySeriesCommon,
  264 + itemStyle:{
  265 + showSymbol:false
  266 + }
  267 + };
  268 + }
  269 + //计算最大值
  270 + const calMax=(arr)=>{
  271 + let max=0;
  272 + arr.forEach((el)=>{
  273 + el.forEach((el1)=>{
  274 + if(!(el1 === undefined || el1 === '')){
  275 + if(max<el1){
  276 + max=el1;
156 } 277 }
157 } 278 }
158 - ]  
159 - }  
160 - this.chartInstance.setOption(dataOption)  
161 - },  
162 - screenAdapter () {  
163 - this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6  
164 - const adapterOption = {  
165 - legend: {  
166 - itemWidth: this.titleFontSize,  
167 - itemHeight: this.titleFontSize,  
168 - itemGap: this.titleFontSize,  
169 - textStyle: {  
170 - fontSize: this.titleFontSize / 2 279 + })
  280 + })
  281 + let maxint=Math.ceil(max/9.5);
  282 + let maxval=maxint * 10;//让显示的刻度是整数
  283 + return maxval;
  284 + }
  285 + //计算最小值
  286 + const calMin=(arr)=>{
  287 + let min=0;
  288 + arr.forEach((el)=>{
  289 + el.forEach((el1)=>{
  290 + if(!(el1 === undefined || el1 === '')){
  291 + if(min>el1){
  292 + min=el1;
  293 + }
171 } 294 }
172 - }  
173 - }  
174 - this.chartInstance.setOption(adapterOption)  
175 - this.chartInstance.resize()  
176 - },  
177 - startInterval () {  
178 - if (this.timerId) {  
179 - clearInterval(this.timerId)  
180 - }  
181 - let index = 12  
182 - /*this.timerId = setInterval(() => {  
183 - this.startValue++  
184 - this.endValue++  
185 - // this.allData.polyline.data  
186 - // console.log((this.allData.polyline.data)[0].data.length)  
187 - if ((this.allData.polyline.data).length > 0) {  
188 - index = (this.allData.polyline.data)[0].data.length  
189 - }  
190 - if (this.endValue > index - 1) {  
191 - this.startValue = 0  
192 - this.endValue = 6  
193 - }  
194 - console.log(this.startValue)  
195 - console.log(this.endValue)  
196 - this.updateChart()  
197 - }, 5000)*/ 295 + })
  296 + })
  297 + let minint=Math.floor(min/10);
  298 + let minval=minint * 10;//让显示的刻度是整数
  299 + return minval;
  300 + }
  301 +
  302 + const screenAdapter=()=>{
  303 + proxy.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
  304 + }
  305 +
  306 + return{
  307 + calMax,
  308 + calMin,
  309 + optionInit,
  310 + getData,
  311 + screenAdapter
198 } 312 }
199 } 313 }
200 -} 314 +}
1 -<div class="com-container">  
2 - <div class="com-chart" id="bandwidthcpu_ref"></div> 1 +<div class="com-container"id="bandwidthcpu_ref">
  2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
3 </div> 3 </div>
1 export default { 1 export default {
2 name: 'BandwidthCpu', 2 name: 'BandwidthCpu',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + optionData:'',
8 allData: { 12 allData: {
9 polyline: { 13 polyline: {
10 title: "带宽占用监控", 14 title: "带宽占用监控",
@@ -27,7 +31,6 @@ export default { @@ -27,7 +31,6 @@ export default {
27 } 31 }
28 }, 32 },
29 mounted () { 33 mounted () {
30 - this.initChart()  
31 this.getData() 34 this.getData()
32 window.addEventListener('resize', this.screenAdapter) 35 window.addEventListener('resize', this.screenAdapter)
33 this.screenAdapter() 36 this.screenAdapter()
@@ -37,46 +40,7 @@ export default { @@ -37,46 +40,7 @@ export default {
37 clearInterval(this.timerId) 40 clearInterval(this.timerId)
38 }, 41 },
39 methods: { 42 methods: {
40 - initChart () {  
41 - this.chartInstance = echarts.init(document.getElementById('bandwidthcpu_ref'))  
42 - const initOption = {  
43 - grid: {  
44 - top: '15%',  
45 - left: '5%',  
46 - right: '4%',  
47 - bottom: '20%',  
48 - containLabel: true  
49 - },  
50 - legend: {  
51 - right: '10%',  
52 - top: '5%',  
53 - textStyle: {  
54 - color: 'wihte'  
55 - }  
56 - },  
57 - xAxis: {  
58 - type: 'category',  
59 - boundaryGap: false,  
60 - axisLabel: {  
61 - textStyle: {  
62 - color: '#E6E8EB'  
63 - }  
64 - }  
65 - },  
66 - yAxis: {  
67 - type: 'value',  
68 - splitLine: {  
69 - show: false  
70 - },  
71 - axisLabel: {  
72 - textStyle: {  
73 - color: '#E6E8EB'  
74 - }  
75 - }  
76 - }  
77 - }  
78 - this.chartInstance.setOption(initOption)  
79 - }, 43 +
80 async getData () { 44 async getData () {
81 // await this.$http.get() 45 // await this.$http.get()
82 // const { data: ret } = await this.$http.get('bandwidthcpu') 46 // const { data: ret } = await this.$http.get('bandwidthcpu')
@@ -88,17 +52,19 @@ export default { @@ -88,17 +52,19 @@ export default {
88 updateChart () { 52 updateChart () {
89 // 半透明的颜色值 53 // 半透明的颜色值
90 const colorArr1 = [ 54 const colorArr1 = [
91 - 'rgba(11, 168, 44, 0.5)', 55 + 'rgba(35, 255, 255, 0.5)',
92 'rgba(44, 110, 255, 0.5)', 56 'rgba(44, 110, 255, 0.5)',
93 'rgba(22, 242, 217, 0.5)', 57 'rgba(22, 242, 217, 0.5)',
  58 + 'rgba(11, 168, 44, 0.5)',
94 'rgba(254, 33, 30, 0.5)', 59 'rgba(254, 33, 30, 0.5)',
95 'rgba(250, 105, 0, 0.5)' 60 'rgba(250, 105, 0, 0.5)'
96 ] 61 ]
97 - // 全透明的颜色值 62 + // 全透明的颜色值
98 const colorArr2 = [ 63 const colorArr2 = [
99 - 'rgba(11, 168, 44, 0)', 64 + 'rgba(35, 255, 255, 0)',
100 'rgba(44, 110, 255, 0)', 65 'rgba(44, 110, 255, 0)',
101 'rgba(22, 242, 217, 0)', 66 'rgba(22, 242, 217, 0)',
  67 + 'rgba(11, 168, 44, 0)',
102 'rgba(254, 33, 30, 0)', 68 'rgba(254, 33, 30, 0)',
103 'rgba(250, 105, 0, 0)' 69 'rgba(250, 105, 0, 0)'
104 ] 70 ]
@@ -109,6 +75,16 @@ export default { @@ -109,6 +75,16 @@ export default {
109 type: 'line', 75 type: 'line',
110 data: item.data, 76 data: item.data,
111 smooth: true, 77 smooth: true,
  78 + showSymbol:false,
  79 + itemStyle : {
  80 + normal : {
  81 + color:colorArr1[index],//tooltip里的小圆点颜色
  82 + lineStyle:{
  83 + color:colorArr1[index],
  84 + width:2,
  85 + }
  86 + }
  87 + },
112 areaStyle: { 88 areaStyle: {
113 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 89 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
114 { 90 {
@@ -129,29 +105,86 @@ export default { @@ -129,29 +105,86 @@ export default {
129 }) 105 })
130 const title = this.allData.polyline.title 106 const title = this.allData.polyline.title
131 const unit = this.allData.polyline.unit 107 const unit = this.allData.polyline.unit
132 - const dataOption = { 108 + const seriesData=seriesArr;
  109 + let xAxisData=timeArr;
  110 + this.optionData = {
133 title: { 111 title: {
134 text: title, 112 text: title,
135 left: 'center', 113 left: 'center',
136 - bottom: '8%'  
137 - },  
138 - xAxis: {  
139 - data: timeArr 114 + bottom: '8%',
  115 + textStyle: {
  116 + fontSize: this.titleFontSize*0.5,
  117 + color:'#ffffff'
  118 + }
  119 +
140 }, 120 },
141 - yAxis: {  
142 - name: unit 121 + tooltip: {
  122 + trigger: 'axis',
  123 + backgroundColor:'rgba(50,50,50,0.7)',
  124 + borderColor:"#333",
  125 + textStyle:{
  126 + color:"#fff",
  127 + align:'left'
  128 + }
  129 +
143 }, 130 },
144 legend: { 131 legend: {
145 - data: legendArr 132 + data: legendArr,
  133 + itemHeight:0,//图例圆圈大小设置
  134 + right: '5%',
  135 + top: '5%',
  136 + textStyle: {
  137 + color: '#ffffff',
  138 + fontsize:"12px"
  139 + }
  140 +
146 }, 141 },
147 - dataZoom: {  
148 - show: false,  
149 - startValue: this.startValue,  
150 - endValue: this.endValue 142 + grid: {
  143 + top: '15%',
  144 + left: '3%',
  145 + right: '4%',
  146 + bottom: '20%',
  147 + containLabel: true
151 }, 148 },
152 - series: seriesArr  
153 - }  
154 - this.chartInstance.setOption(dataOption) 149 + xAxis: {
  150 + type: 'category',
  151 + boundaryGap: false,
  152 + data: xAxisData,
  153 +
  154 + axisLine:{
  155 + show:false,//是否显示坐标线
  156 + },
  157 + axisTick: {
  158 + show: false //是否显示坐标刻度
  159 + },
  160 + axisLabel:{
  161 + color:'#ffffff',
  162 + },
  163 +
  164 + },
  165 + yAxis: {
  166 + type: 'value',
  167 + name:unit,
  168 + nameTextStyle:{
  169 + color:'#ffffff',
  170 + padding:[0,0,0,-20]
  171 + },
  172 + axisLabel: {
  173 + color:'#ffffff',
  174 + // formatter: '{value} %'//以百分比显示
  175 + },
  176 + axisLine:{
  177 + show:true,//是否显示坐标线
  178 + },
  179 + splitLine:{
  180 + lineStyle: {
  181 + color:'#0a1b31'
  182 + }
  183 + }
  184 +
  185 + },
  186 + series: seriesData
  187 + };
155 }, 188 },
156 screenAdapter () { 189 screenAdapter () {
157 this.titleFontSize = document.getElementById('bandwidthcpu_ref').offsetWidth / 100 * 3.6 190 this.titleFontSize = document.getElementById('bandwidthcpu_ref').offsetWidth / 100 * 3.6
@@ -182,8 +215,7 @@ export default { @@ -182,8 +215,7 @@ export default {
182 } 215 }
183 } 216 }
184 } 217 }
185 - this.chartInstance.setOption(adapterOption)  
186 - this.chartInstance.resize() 218 +
187 }, 219 },
188 startInterval () { 220 startInterval () {
189 if (this.timerId) { 221 if (this.timerId) {
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="volume_ref"></div> 2 <div class="com-chart" id="volume_ref"></div>
3 <div class="busniess-box-title"> 3 <div class="busniess-box-title">
4 - <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="busniess-title-img"> <!-- bor1_6 -->  
5 - <span :style="comtitleTextStyle" class="busniess-title-size">本月业务量</span> 4 + <img :style="comtitleImgStyle" src="./src/assets/images/digitalDp/title-volume.png" class="busniess-title-img"> <!-- bor1_6 -->
  5 +<!-- <span :style="comtitleTextStyle" class="busniess-title-size">本月业务量</span>-->
6 </div> 6 </div>
7 <div class="busniess-circle-text" :style="comcircletextStyle"> 7 <div class="busniess-circle-text" :style="comcircletextStyle">
8 <div class="busniess-circle-left">今日<br/>业务量</div> 8 <div class="busniess-circle-left">今日<br/>业务量</div>
@@ -4,6 +4,8 @@ export default { @@ -4,6 +4,8 @@ export default {
4 components: {}, 4 components: {},
5 data () { 5 data () {
6 return { 6 return {
  7 + domainName:sessionStorage.getItem('domainName'),
  8 + apiUrl:'/api-web/bigScreen/findPortfolio',//今日业务量
7 chartInstance: null, 9 chartInstance: null,
8 allData: [{ 10 allData: [{
9 name: "今日业务量", 11 name: "今日业务量",
@@ -20,23 +22,24 @@ export default { @@ -20,23 +22,24 @@ export default {
20 { name: "网络发票",value: "712204", color: "#A35CFF"} 22 { name: "网络发票",value: "712204", color: "#A35CFF"}
21 ] 23 ]
22 }], 24 }],
  25 + colorData:['#0D45FE','#00FFB9','#A35CFF'],
23 titleFontSize: 30 26 titleFontSize: 30
24 } 27 }
25 }, 28 },
26 computed: { 29 computed: {
27 comtitleTextStyle () { 30 comtitleTextStyle () {
28 return { 31 return {
29 - fontSize: this.titleFontSize / 1.3 + 'px' 32 + fontSize: this.titleFontSize / 1 + 'px'
30 } 33 }
31 }, 34 },
32 comtitleImgStyle () { 35 comtitleImgStyle () {
33 return { 36 return {
34 - height: this.titleFontSize * 1.5 + 'px' 37 + height: this.titleFontSize * 2.1 + 'px'
35 } 38 }
36 }, 39 },
37 comcircletextStyle () { 40 comcircletextStyle () {
38 return { 41 return {
39 - fontSize: this.titleFontSize / 1.8 + 'px' 42 + fontSize: this.titleFontSize / 1.3 + 'px'
40 } 43 }
41 } 44 }
42 }, 45 },
@@ -58,7 +61,7 @@ export default { @@ -58,7 +61,7 @@ export default {
58 top: '20%', 61 top: '20%',
59 left: 'center', 62 left: 'center',
60 textStyle: { 63 textStyle: {
61 - color: 'wihte' 64 + color: '#ffffff'
62 } 65 }
63 } 66 }
64 } 67 }
@@ -67,8 +70,21 @@ export default { @@ -67,8 +70,21 @@ export default {
67 async getData () { 70 async getData () {
68 // await this.$http.get() 71 // await this.$http.get()
69 // const { data: ret } = await this.$http.get('volume') 72 // const { data: ret } = await this.$http.get('volume')
70 - // this.allData = ret  
71 - // console.log(ret) 73 + const { data: ret } = await $.get(this.domainName +this.apiUrl)
  74 + //本月业务量
  75 + // const { data: ret1 } = await $.get(this.domainName +this.apiUrl1)
  76 + let retData=[];
  77 + retData.push({
  78 + name:'今日业务量',
  79 + data:ret
  80 + })
  81 + retData.push({
  82 + name:'本月业务量',
  83 + data:ret
  84 + })
  85 + this.allData = retData
  86 +
  87 + console.log('111',this.allData)
72 this.updateChart() 88 this.updateChart()
73 }, 89 },
74 updateChart () { 90 updateChart () {
@@ -82,28 +98,32 @@ export default { @@ -82,28 +98,32 @@ export default {
82 console.log(inner) 98 console.log(inner)
83 dataArr.push({ 99 dataArr.push({
84 name: inner.name, 100 name: inner.name,
85 - value: inner.value,  
86 - itemStyle: {  
87 - color: inner.color  
88 - } 101 + value: inner.num,
  102 + /*itemStyle: {
  103 + color: this.colorData[index]
  104 + }*/
89 }) 105 })
90 }) 106 })
91 return { 107 return {
92 type: 'pie', 108 type: 'pie',
93 radius: ['28%', '42%'], 109 radius: ['28%', '42%'],
94 center: centerArr[index], 110 center: centerArr[index],
  111 + color:this.colorData,
95 itemStyle: { 112 itemStyle: {
96 - borderRadius: 5, 113 + borderRadius: 2,
97 borderWidth: 2 114 borderWidth: 2
98 }, 115 },
99 label: { 116 label: {
100 position: 'outer', 117 position: 'outer',
101 alignTo: 'labelLine', 118 alignTo: 'labelLine',
102 - formatter: '{c}' 119 + formatter: '{c}',
  120 + color:'#ffffff'
103 }, 121 },
104 data: dataArr 122 data: dataArr
105 } 123 }
106 }) 124 })
  125 + console.log("8**",seriesArr)
  126 +
107 const dataOption = { 127 const dataOption = {
108 series: seriesArr 128 series: seriesArr
109 } 129 }
@@ -132,10 +152,10 @@ export default { @@ -132,10 +152,10 @@ export default {
132 // }, 152 // },
133 legend: { 153 legend: {
134 itemWidth: this.titleFontSize * 1.5, 154 itemWidth: this.titleFontSize * 1.5,
135 - itemHeight: this.titleFontSize / 6, 155 + itemHeight: this.titleFontSize / 4,
136 itemGap: this.titleFontSize * 2.5, 156 itemGap: this.titleFontSize * 2.5,
137 textStyle: { 157 textStyle: {
138 - fontSize: this.titleFontSize / 2 158 + fontSize: this.titleFontSize / 1.3
139 } 159 }
140 } 160 }
141 } 161 }
1 -<div class="com-container">  
2 - <div class="com-chart" id="declarecpu_ref"></div> 1 +<div class="com-container" id="declarecpu_ref">
  2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
  3 +
  4 +<!-- <div class="com-chart" id="declarecpu_ref"></div>-->
3 </div> 5 </div>
1 export default { 1 export default {
2 name: 'ResponseMonitor', 2 name: 'ResponseMonitor',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + legendData:'',
  12 + optionData:'',
8 allData: { 13 allData: {
9 polyline: { 14 polyline: {
10 title: "申报库CPU监控", 15 title: "申报库CPU监控",
@@ -22,94 +27,88 @@ export default { @@ -22,94 +27,88 @@ export default {
22 } 27 }
23 }, 28 },
24 startValue: 0, // 区域缩放的起点值 29 startValue: 0, // 区域缩放的起点值
25 - endValue: 6, // 区域缩放的终点值  
26 - timerId: null // 定时器的标识 30 + endValue: 9, // 区域缩放的终点值
  31 + timerId: null, // 定时器的标识
  32 + titleFontSize: 30,
  33 +
  34 + curve: 'KPIDA0ACBBP',
  35 + rateTitle: 'KPIDA0ACBBK',
  36 + numerTitle: 'KPIDA0ACBBG'
27 } 37 }
28 }, 38 },
  39 +
29 mounted () { 40 mounted () {
30 - this.initChart()  
31 - this.getData() 41 +
  42 + this.getData(this)
32 window.addEventListener('resize', this.screenAdapter) 43 window.addEventListener('resize', this.screenAdapter)
33 this.screenAdapter() 44 this.screenAdapter()
  45 +
34 }, 46 },
35 unmounted () { 47 unmounted () {
36 - window.removeEventListener('resize', this.screenAdapter) 48 + // window.removeEventListener('resize', this.screenAdapter)
37 clearInterval(this.timerId) 49 clearInterval(this.timerId)
38 }, 50 },
39 methods: { 51 methods: {
40 - initChart () {  
41 - // this.chartInstance = this.$echarts.init(this.$refs.declarecpu_ref, 'chalk')  
42 - this.chartInstance = echarts.init(document.getElementById('declarecpu_ref'))  
43 - const initOption = {  
44 - grid: {  
45 - top: '15%',  
46 - left: '3%',  
47 - right: '4%',  
48 - bottom: '20%',  
49 - containLabel: true  
50 - },  
51 - legend: {  
52 - right: '10%',  
53 - top: '5%',  
54 - textStyle: {  
55 - color: 'wihte'  
56 - }  
57 - },  
58 - xAxis: {  
59 - type: 'category',  
60 - boundaryGap: false,  
61 - axisLabel: {  
62 - textStyle: {  
63 - color: '#E6E8EB'  
64 - }  
65 - }  
66 - },  
67 - yAxis: {  
68 - type: 'value',  
69 - splitLine: {  
70 - show: false  
71 - },  
72 - axisLabel: {  
73 - textStyle: {  
74 - color: '#E6E8EB'  
75 - }  
76 - } 52 +
  53 + getData (that) {
  54 + const { proxy } = Vue.getCurrentInstance();
  55 + /* var params = {
  56 + curve: that.curve,
  57 + rateTitle: that.rateTitle,
  58 + numerTitle: that.numerTitle
  59 + };
  60 + proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
  61 + if(res.success){
  62 + console.log('9**',res.obj)
  63 + that.allData = res.obj;
  64 + that.updateChart()
77 } 65 }
78 - }  
79 - this.chartInstance.setOption(initOption)  
80 - },  
81 - async getData () {  
82 - // await this.$http.get()  
83 - // const { data: ret } = await this.$http.get('declarecpu')  
84 - // this.allData = ret  
85 - // console.log(ret)  
86 - this.updateChart()  
87 - this.startInterval() 66 + });*/
  67 + that.updateChart()
  68 +
  69 +
88 }, 70 },
89 updateChart () { 71 updateChart () {
90 // 半透明的颜色值 72 // 半透明的颜色值
91 const colorArr1 = [ 73 const colorArr1 = [
92 - 'rgba(11, 168, 44, 0.5)', 74 + 'rgba(35, 255, 255, 0.5)',
93 'rgba(44, 110, 255, 0.5)', 75 'rgba(44, 110, 255, 0.5)',
94 'rgba(22, 242, 217, 0.5)', 76 'rgba(22, 242, 217, 0.5)',
  77 + 'rgba(11, 168, 44, 0.5)',
95 'rgba(254, 33, 30, 0.5)', 78 'rgba(254, 33, 30, 0.5)',
96 'rgba(250, 105, 0, 0.5)' 79 'rgba(250, 105, 0, 0.5)'
97 ] 80 ]
98 - // 全透明的颜色值 81 + // 全透明的颜色值
99 const colorArr2 = [ 82 const colorArr2 = [
100 - 'rgba(11, 168, 44, 0)', 83 + 'rgba(35, 255, 255, 0)',
101 'rgba(44, 110, 255, 0)', 84 'rgba(44, 110, 255, 0)',
102 'rgba(22, 242, 217, 0)', 85 'rgba(22, 242, 217, 0)',
  86 + 'rgba(11, 168, 44, 0)',
103 'rgba(254, 33, 30, 0)', 87 'rgba(254, 33, 30, 0)',
104 'rgba(250, 105, 0, 0)' 88 'rgba(250, 105, 0, 0)'
105 ] 89 ]
106 const timeArr = this.allData.xAxis.today 90 const timeArr = this.allData.xAxis.today
107 - const seriesArr = this.allData.polyline.data.map((item, index) => {  
108 - return { 91 + const seriesArr = this.allData.polyline.data;
  92 +
  93 + this.declareNumer = this.allData.polyline.declareNumer
  94 + let seriesData=[];
  95 +
  96 + $.each(seriesArr,function (index,item){
  97 + seriesData .push({
109 name: item.name, 98 name: item.name,
110 type: 'line', 99 type: 'line',
111 data: item.data, 100 data: item.data,
112 smooth: true, 101 smooth: true,
  102 + showSymbol:false,
  103 + itemStyle : {
  104 + normal : {
  105 + color:colorArr1[index],//tooltip里的小圆点颜色
  106 + lineStyle:{
  107 + color:colorArr1[index],
  108 + width:2,
  109 + }
  110 + }
  111 + },
113 areaStyle: { 112 areaStyle: {
114 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 113 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
115 { 114 {
@@ -122,84 +121,130 @@ export default { @@ -122,84 +121,130 @@ export default {
122 } // 100%的颜色值 121 } // 100%的颜色值
123 ]) 122 ])
124 } 123 }
125 - } 124 + })
126 }) 125 })
  126 +
127 // 图例的数据 127 // 图例的数据
128 const legendArr = this.allData.polyline.data.map(item => { 128 const legendArr = this.allData.polyline.data.map(item => {
129 return item.name 129 return item.name
130 }) 130 })
131 - const title = this.allData.polyline.title  
132 - const unit = this.allData.polyline.unit  
133 - const dataOption = { 131 + //x轴数据
  132 + // let xAxisDataLength=seriesData.length;
  133 + // let xAxisData=[];
  134 + // for(let i=1;i<=xAxisDataLength;i++){
  135 + // xAxisData.push(i)
  136 + // }
  137 + let xAxisData=timeArr;
  138 + this.optionData = {
134 title: { 139 title: {
135 - text: title, 140 + text: '申报库CPU监控',
136 left: 'center', 141 left: 'center',
137 - bottom: '8%'  
138 - },  
139 - xAxis: {  
140 - data: timeArr 142 + bottom: '8%',
  143 + textStyle: {
  144 + fontSize: this.titleFontSize*0.5,
  145 + color:'#ffffff'
  146 + }
  147 +
141 }, 148 },
142 - yAxis: {  
143 - name: unit 149 + tooltip: {
  150 + trigger: 'axis',
  151 + backgroundColor:'rgba(50,50,50,0.7)',
  152 + borderColor:"#333",
  153 + textStyle:{
  154 + color:"#fff",
  155 + align:'left'
  156 + }
  157 +
144 }, 158 },
145 legend: { 159 legend: {
146 - data: legendArr  
147 - },  
148 - dataZoom: {  
149 - show: false,  
150 - startValue: this.startValue,  
151 - endValue: this.endValue  
152 - },  
153 - series: seriesArr  
154 - }  
155 - this.chartInstance.setOption(dataOption)  
156 - },  
157 - screenAdapter () {  
158 - this.titleFontSize = document.getElementById('declarecpu_ref').offsetWidth / 100 * 3.6  
159 - const adapterOption = {  
160 - title: { 160 + data: legendArr,
  161 + itemHeight:0,//图例圆圈大小设置
  162 + right: '5%',
  163 + top: '5%',
161 textStyle: { 164 textStyle: {
162 - fontSize: this.titleFontSize,  
163 - color: 'white' 165 + color: '#ffffff',
  166 + fontsize:"12px"
164 } 167 }
  168 +
  169 + },
  170 + grid: {
  171 + top: '15%',
  172 + left: '3%',
  173 + right: '4%',
  174 + bottom: '20%',
  175 + containLabel: true
  176 + },
  177 + xAxis: {
  178 + type: 'category',
  179 + boundaryGap: false,
  180 + data: xAxisData,
  181 +
  182 + axisLine:{
  183 + show:false,//是否显示坐标线
  184 + },
  185 + axisTick: {
  186 + show: false //是否显示坐标刻度
  187 + },
  188 + axisLabel:{
  189 + color:'#ffffff',
  190 + },
  191 +
165 }, 192 },
166 yAxis: { 193 yAxis: {
167 - top: this.titleFontSize,  
168 - nameTextStyle: {  
169 - padding: [0, 0, -(this.titleFontSize / 2), -(this.titleFontSize)], // 修改位置  
170 - fontSize: this.titleFontSize / 2,  
171 - color: 'white' 194 + type: 'value',
  195 + name:'cpu%',
  196 + nameTextStyle:{
  197 + color:'#ffffff',
  198 + padding:[0,0,0,-20]
  199 + },
  200 + axisLabel: {
  201 + color:'#ffffff',
  202 + // formatter: '{value} %'//以百分比显示
  203 + },
  204 + axisLine:{
  205 + show:true,//是否显示坐标线
  206 + },
  207 + splitLine:{
  208 + lineStyle: {
  209 + color:'#0a1b31'
  210 + }
172 } 211 }
  212 +
173 }, 213 },
  214 + series: seriesData
  215 + };
  216 +
  217 + },
  218 + screenAdapter () {
  219 + this.titleFontSize = document.getElementById('declarecpu_ref').offsetWidth / 100 * 3.6
  220 + console.log(this.titleFontSize)
  221 + const adapterOption = {
174 legend: { 222 legend: {
175 itemWidth: this.titleFontSize, 223 itemWidth: this.titleFontSize,
176 itemHeight: this.titleFontSize, 224 itemHeight: this.titleFontSize,
177 itemGap: this.titleFontSize, 225 itemGap: this.titleFontSize,
178 textStyle: { 226 textStyle: {
179 - fontSize: this.titleFontSize / 1.5 227 + fontSize: this.titleFontSize / 2
180 } 228 }
181 } 229 }
182 } 230 }
183 - this.chartInstance.setOption(adapterOption)  
184 - this.chartInstance.resize() 231 +
185 }, 232 },
186 startInterval () { 233 startInterval () {
187 if (this.timerId) { 234 if (this.timerId) {
188 clearInterval(this.timerId) 235 clearInterval(this.timerId)
189 } 236 }
190 - let index = 12 237 + let index = 10
191 /*this.timerId = setInterval(() => { 238 /*this.timerId = setInterval(() => {
192 this.startValue++ 239 this.startValue++
193 this.endValue++ 240 this.endValue++
194 - if ((this.allData.polyline.data).length > 0) {  
195 - index = (this.allData.polyline.data)[0].data.length 241 + if (this.allData.polyline.data.data.length > 0) {
  242 + index = this.allData.polyline.data.data.length
196 } 243 }
197 if (this.endValue > index - 1) { 244 if (this.endValue > index - 1) {
198 this.startValue = 0 245 this.startValue = 0
199 - this.endValue = 6 246 + this.endValue = 9
200 } 247 }
201 - console.log(this.startValue)  
202 - console.log(this.endValue)  
203 this.updateChart() 248 this.updateChart()
204 }, 5000)*/ 249 }, 5000)*/
205 } 250 }
1 <div class="com-container"> 1 <div class="com-container">
2 - <div class="com-chart" id="declarepolyline_ref"></div>  
3 - <div class="declarepolyline-title" :style="comtitlesizeStyle">  
4 - <el-row>  
5 - <el-col :span="24">  
6 - <div class="grid-content bg-purple-dark">  
7 - <img src="./src/assets/img/icon-ysb.png" :style="comimgsizeStyle">  
8 - <span>本月应申报</span>  
9 - </div>  
10 - </el-col>  
11 - </el-row>  
12 - <el-row>  
13 - <el-col :span="24">  
14 - <div class="grid-content bg-purple-dark" :style="comtitletextStyle">  
15 - {{declareNumer}}  
16 - </div>  
17 - </el-col>  
18 - </el-row>  
19 - <el-row>  
20 - <el-col :span="24">  
21 - <div class="grid-content bg-purple-dark">  
22 - <img src="./src/assets/img/icon-sbl.png" :style="comimgsizeStyle">  
23 - <span>本月申报率</span>  
24 - </div>  
25 - </el-col>  
26 - </el-row>  
27 - <el-row>  
28 - <el-col :span="24">  
29 - <div class="grid-content bg-purple-dark" :style="comtitletextStyle">  
30 - <span>{{declareRateLeft}}</span><span :style="comboxtextStyle">{{declareRateRight}}</span>  
31 - </div>  
32 - </el-col>  
33 - </el-row>  
34 - </div> 2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
35 </div> 3 </div>
1 export default { 1 export default {
2 name: 'declarePolyline', 2 name: 'declarePolyline',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 chartInstance: null, 11 chartInstance: null,
  12 + chartId:'declarepolyline_ref',
  13 + yAxisCommon:'',
  14 + ySeriesCommon:'',
  15 + legendData:'',
  16 + optionData:'',
8 // allData: { 17 // allData: {
9 // polyline: { 18 // polyline: {
10 // data: { 19 // data: {
@@ -58,53 +67,17 @@ export default { @@ -58,53 +67,17 @@ export default {
58 } 67 }
59 }, 68 },
60 mounted () { 69 mounted () {
61 - this.initChart() 70 +
62 this.getData(this) 71 this.getData(this)
63 - window.addEventListener('resize', this.screenAdapter)  
64 - this.screenAdapter() 72 + // window.addEventListener('resize', this.screenAdapter)
  73 + // this.screenAdapter()
65 }, 74 },
66 unmounted () { 75 unmounted () {
67 - window.removeEventListener('resize', this.screenAdapter) 76 + // window.removeEventListener('resize', this.screenAdapter)
68 clearInterval(this.timerId) 77 clearInterval(this.timerId)
69 }, 78 },
70 methods: { 79 methods: {
71 - initChart () {  
72 - this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref'))  
73 - const initOption = {  
74 - grid: {  
75 - top: '10%',  
76 - left: '1%',  
77 - right: '30%',  
78 - bottom: '1%',  
79 - containLabel: true  
80 - },  
81 - legend: {  
82 - right: '2%',  
83 - top: '5%'  
84 - },  
85 - xAxis: {  
86 - type: 'category',  
87 - boundaryGap: false,  
88 - axisLabel: {  
89 - textStyle: {  
90 - color: '#E6E8EB'  
91 - }  
92 - }  
93 - },  
94 - yAxis: {  
95 - type: 'value',  
96 - splitLine: {  
97 - show: false  
98 - },  
99 - axisLabel: {  
100 - textStyle: {  
101 - color: '#E6E8EB'  
102 - }  
103 - }  
104 - }  
105 - }  
106 - this.chartInstance.setOption(initOption)  
107 - }, 80 +
108 getData (that) { 81 getData (that) {
109 const { proxy } = Vue.getCurrentInstance(); 82 const { proxy } = Vue.getCurrentInstance();
110 var params = { 83 var params = {
@@ -114,10 +87,10 @@ export default { @@ -114,10 +87,10 @@ export default {
114 }; 87 };
115 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) { 88 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
116 if(res.success){ 89 if(res.success){
117 - console.log(res.obj) 90 + console.log('9**',res.obj)
118 that.allData = res.obj; 91 that.allData = res.obj;
119 that.updateChart() 92 that.updateChart()
120 - that.startInterval() 93 + // that.startInterval()
121 } 94 }
122 }); 95 });
123 96
@@ -128,6 +101,7 @@ export default { @@ -128,6 +101,7 @@ export default {
128 'rgba(11, 168, 44, 0.5)', 101 'rgba(11, 168, 44, 0.5)',
129 'rgba(44, 110, 255, 0.5)', 102 'rgba(44, 110, 255, 0.5)',
130 'rgba(22, 242, 217, 0.5)', 103 'rgba(22, 242, 217, 0.5)',
  104 + 'rgba(35, 255, 255, 0.5)',
131 'rgba(254, 33, 30, 0.5)', 105 'rgba(254, 33, 30, 0.5)',
132 'rgba(250, 105, 0, 0.5)' 106 'rgba(250, 105, 0, 0.5)'
133 ] 107 ]
@@ -136,6 +110,7 @@ export default { @@ -136,6 +110,7 @@ export default {
136 'rgba(11, 168, 44, 0)', 110 'rgba(11, 168, 44, 0)',
137 'rgba(44, 110, 255, 0)', 111 'rgba(44, 110, 255, 0)',
138 'rgba(22, 242, 217, 0)', 112 'rgba(22, 242, 217, 0)',
  113 + 'rgba(35, 255, 255, 0)',
139 'rgba(254, 33, 30, 0)', 114 'rgba(254, 33, 30, 0)',
140 'rgba(250, 105, 0, 0)' 115 'rgba(250, 105, 0, 0)'
141 ] 116 ]
@@ -152,40 +127,96 @@ export default { @@ -152,40 +127,96 @@ export default {
152 const legendArr = this.allData.polyline.data.data.map(item => { 127 const legendArr = this.allData.polyline.data.data.map(item => {
153 return item.name 128 return item.name
154 }) 129 })
155 - const dataOption = {  
156 - xAxis: {  
157 - data: timeArr 130 + //x轴数据
  131 + let xAxisDataLength=seriesData.length;
  132 + let xAxisData=[];
  133 + for(let i=1;i<=xAxisDataLength;i++){
  134 + xAxisData.push(i)
  135 + }
  136 + this.optionData = {
  137 + title: {
  138 + text: ''
  139 + },
  140 + tooltip: {
  141 + trigger: 'axis',
  142 + backgroundColor:'rgba(50,50,50,0.7)',
  143 + borderColor:"#333",
  144 + textStyle:{
  145 + color:"#fff",
  146 + align:'left'
  147 + }
  148 +
158 }, 149 },
159 legend: { 150 legend: {
160 - data: legendArr 151 + data: legendArr,
  152 + itemHeight:0,//图例圆圈大小设置
  153 + y:'7px',
  154 + textStyle: {
  155 + color: '#ffffff',
  156 + fontsize:"12px"
  157 + }
  158 +
161 }, 159 },
162 - dataZoom: {  
163 - show: false,  
164 - startValue: this.startValue,  
165 - endValue: this.endValue 160 + grid: {
  161 + left: '3%',
  162 + right: '4%',
  163 + bottom: '3%',
  164 + containLabel: true,
  165 + },
  166 + xAxis: {
  167 + type: 'category',
  168 + boundaryGap: false,
  169 + data: xAxisData,
  170 +
  171 + axisLine:{
  172 + show:false,//是否显示坐标线
  173 + },
  174 + axisTick: {
  175 + show: false //是否显示坐标刻度
  176 + },
  177 + axisLabel:{
  178 + color:'#ffffff',
  179 + },
  180 +
166 }, 181 },
167 - series: [  
168 - {  
169 - name: seriesName,  
170 - type: 'line',  
171 - data: seriesData,  
172 - smooth: true,  
173 - areaStyle: {  
174 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
175 - {  
176 - offset: 0,  
177 - color: colorArr1[1]  
178 - }, // %0的颜色值  
179 - {  
180 - offset: 1,  
181 - color: colorArr2[1]  
182 - } // 100%的颜色值  
183 - ]) 182 + yAxis: {
  183 + axisLabel: {
  184 + color:'#ffffff',
  185 + formatter: '{value} %'//以百分比显示
  186 + },
  187 + splitLine:{
  188 + lineStyle: {
  189 + color:'#0a1b31'
184 } 190 }
  191 + },
  192 +
  193 + },
  194 + series: {
  195 + name: seriesName,
  196 + type: 'line',
  197 + data: seriesData,
  198 + smooth: true,
  199 + showSymbol:false,
  200 + color:'#01E6E6',
  201 + areaStyle: {
  202 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  203 + {
  204 + offset: 0,
  205 + color: colorArr1[3]
  206 + }, // %0的颜色值
  207 + {
  208 + offset: 1,
  209 + color: colorArr2[3]
  210 + } // 100%的颜色值
  211 + ])
185 } 212 }
186 - ]  
187 - }  
188 - this.chartInstance.setOption(dataOption) 213 + },
  214 + itemStyle:{
  215 + showSymbol:false
  216 + }
  217 + };
  218 +
  219 +
189 }, 220 },
190 screenAdapter () { 221 screenAdapter () {
191 this.titleFontSize = document.getElementById('declarepolyline_ref').offsetWidth / 100 * 3.6 222 this.titleFontSize = document.getElementById('declarepolyline_ref').offsetWidth / 100 * 3.6
  1 +<div class="declare-report">
  2 + <div class="declare-report-top" :style="comtitlesizeStyle">
  3 + <el-row>
  4 + <el-col :span="24">
  5 + <div class="grid-content bg-purple-dark">
  6 + <img src="./src/assets/images/digitalDp/icon-ysb.png" :style="comimgsizeStyle">
  7 + <span class="title-ysb">本月应申报</span>
  8 + </div>
  9 + </el-col>
  10 + </el-row>
  11 + <el-row>
  12 + <el-col :span="24">
  13 + <div class="grid-content bg-purple-dark declare-report-num" :style="comtitletextStyle">
  14 + {{declareNumer}}
  15 + </div>
  16 + </el-col>
  17 + </el-row>
  18 + </div>
  19 + <div class="declare-report-bottom">
  20 + <el-row>
  21 + <el-col :span="24">
  22 + <div class="grid-content bg-purple-dark rate-title">
  23 +<!-- <img src="./src/assets/img/icon-sbl.png" :style="comimgsizeStyle">-->
  24 + <span>本月申报率</span>
  25 + </div>
  26 + </el-col>
  27 + </el-row>
  28 + <el-row>
  29 + <el-col :span="24">
  30 + <div class="grid-content bg-purple-dark rate-container" :style="comtitletextStyle">
  31 + <div class="rate-num">
  32 + <span>{{declareRateLeft}}</span><span :style="comboxtextStyle">{{declareRateRight}}</span>
  33 + </div>
  34 +
  35 + </div>
  36 + </el-col>
  37 + </el-row>
  38 + </div>
  39 +
  40 +</div>
  1 +export default {
  2 + name: 'declarePolyline',
  3 + template: '',
  4 + components: {},
  5 + data () {
  6 + return {
  7 + allData:{},
  8 + titleFontSize: 30,
  9 + declareRate: '0%',
  10 + declareRateLeft: 0,
  11 + declareRateRight: '%',
  12 + declareNumer: 0,
  13 + curve: 'KPIDA0ACBBP',
  14 + rateTitle: 'KPIDA0ACBBK',
  15 + numerTitle: 'KPIDA0ACBBG'
  16 + }
  17 + },
  18 + computed: {
  19 + comtitletextStyle () {
  20 + return {
  21 + color: '#23ffff',
  22 + fontSize: this.titleFontSize / 1.2 + 'px'
  23 + }
  24 + },
  25 + comtitlesizeStyle () {
  26 + return {
  27 + fontSize: this.titleFontSize / 2 + 'px'
  28 + }
  29 + },
  30 + comimgsizeStyle () {
  31 + return {
  32 + width: this.titleFontSize / 1.5 + 'px'
  33 + }
  34 + },
  35 + comboxtextStyle () {
  36 + return {
  37 + fontSize: this.titleFontSize / 3 + 'px'
  38 + }
  39 + }
  40 + },
  41 + mounted () {
  42 + this.getData(this)
  43 + },
  44 +
  45 + methods: {
  46 + getData (that) {
  47 + const { proxy } = Vue.getCurrentInstance();
  48 + var params = {
  49 + curve: that.curve,
  50 + rateTitle: that.rateTitle,
  51 + numerTitle: that.numerTitle
  52 + };
  53 + proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
  54 + if(res.success){
  55 + console.log('111',res.obj)
  56 + that.allData = res.obj;
  57 + const declareRate = that.allData.polyline.declareRate
  58 + if(declareRate.indexOf('.') > 0){
  59 + that.declareRateLeft = declareRate.split('.')[0] + '.'
  60 + that.declareRateRight = declareRate.split('.')[1]
  61 + }
  62 + that.declareNumer = that.allData.polyline.declareNumer
  63 +
  64 +
  65 + }
  66 + });
  67 +
  68 + }
  69 +
  70 + }
  71 +}
@@ -4,65 +4,39 @@ @@ -4,65 +4,39 @@
4 <el-col :span="24"> 4 <el-col :span="24">
5 <div class="grid-content bg-purple-dark com-box-title"> 5 <div class="grid-content bg-purple-dark com-box-title">
6 <span> 6 <span>
7 - <img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/img/box_title_bykk_zj_1.png"> <!-- bor1_6 -->  
8 - <span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span> 7 + <img :style="comtitlesizeStyle" class="deduction-box-title" src="./src/assets/images/digitalDp/box_title_bykk_zj_1.png"> <!-- bor1_6 -->
  8 +<!-- <span :style="comtitleTextStyle" class="deduction-title-size">本月扣款情况</span>-->
9 </span> 9 </span>
10 </div> 10 </div>
11 </el-col> 11 </el-col>
12 </el-row> 12 </el-row>
13 - <el-col :span="24">  
14 - <div class="grid-content bg-purple-dark com-box-title">  
15 - <span>  
16 - <img class="deduction-box-img-left" :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> <!-- bor1_6 -->  
17 - <div class="deduction-box-text-left" :style="comnumberTextStyle">  
18 - <div>  
19 - <span class="deduction-text-number">{{deductionAmount}}</span>  
20 - <span :style="comnumberUnitStyle">亿元</span>  
21 - </div>  
22 - <div>本月扣款金额</div> 13 + <el-row>
  14 + <el-col :span="24">
  15 + <div class="grid-content bg-purple-dark com-box-title">
  16 + <div class="deduction-num-container">
  17 + <img class="deduction-box-img-left" :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> <!-- bor1_6 -->
  18 + <div class="deduction-box-text-left" :style="comnumberTextStyle">
  19 + <div>
  20 + <span class="deduction-text-number">{{deductionAmount}}</span>
  21 + <span :style="comnumberUnitStyle">亿元</span>
  22 + </div>
  23 + <div>本月扣款金额</div>
  24 + </div>
23 </div> 25 </div>
24 - </span>  
25 - <span>  
26 - <img class="deduction-box-img-right" :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">  
27 - <div class="deduction-box-text-right" :style="comnumberTextStyle">  
28 - <div>  
29 - <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>  
30 - <span :style="comnumberUnitStyle">万笔</span>  
31 - </div>  
32 - <div>本月扣款笔数</div> 26 + <div class="deduction-num-container">
  27 + <img class="deduction-box-img-right" :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">
  28 + <div class="deduction-box-text-right" :style="comnumberTextStyle">
  29 + <div>
  30 + <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>
  31 + <span :style="comnumberUnitStyle">万笔</span>
  32 + </div>
  33 + <div>本月扣款笔数</div>
  34 + </div>
33 </div> 35 </div>
34 - </span>  
35 - </div>  
36 - </el-col>  
37 -<!-- <el-row>-->  
38 -<!-- <el-col :span="12">-->  
39 -<!-- <div class="grid-content bg-purple com-box">-->  
40 -<!-- <span >-->  
41 -<!-- <img :style="comboximgleftStyle" src="./src/assets/img/box_bykk_zj.png"> &lt;!&ndash; bor1_6 &ndash;&gt;-->  
42 -<!-- <div class="deduction-box-text-left" :style="comnumberTextStyle">-->  
43 -<!-- <div>-->  
44 -<!-- <span class="deduction-text-number">{{deductionAmount}}</span>-->  
45 -<!-- <span :style="comnumberUnitStyle">亿元</span>-->  
46 -<!-- </div>-->  
47 -<!-- <div>本月扣款金额</div>-->  
48 -<!-- </div>-->  
49 -<!-- </span>-->  
50 -<!-- </div>-->  
51 -<!-- </el-col>-->  
52 -<!-- <el-col :span="12">-->  
53 -<!-- <div class="grid-content bg-purple-light">-->  
54 -<!-- <span >-->  
55 -<!-- <img :style="comboximgrightStyle" src="./src/assets/img/box_bykk_zj.png">-->  
56 -<!-- <div class="deduction-box-text-right" :style="comnumberTextStyle">-->  
57 -<!-- <div>-->  
58 -<!-- <span class="deduction-text-number">&nbsp;&nbsp;&nbsp;{{deductionNumber}}</span>-->  
59 -<!-- <span :style="comnumberUnitStyle">万笔</span>-->  
60 -<!-- </div>-->  
61 -<!-- <div>本月扣款笔数</div>-->  
62 -<!-- </div>-->  
63 -<!-- </span>-->  
64 -<!-- </div>-->  
65 -<!-- </el-col>-->  
66 -<!-- </el-row>--> 36 + </div>
  37 + </el-col>
  38 + </el-row>
  39 +
  40 +
67 </div> 41 </div>
68 </div> 42 </div>
@@ -6,7 +6,7 @@ export default { @@ -6,7 +6,7 @@ export default {
6 return { 6 return {
7 chartInstance: null, 7 chartInstance: null,
8 allData: null, 8 allData: null,
9 - titleFontSize: 20, 9 + titleFontSize: 30,
10 // 扣款金额 10 // 扣款金额
11 deductionAmount: '0.00', 11 deductionAmount: '0.00',
12 // 扣款笔数 12 // 扣款笔数
@@ -19,41 +19,41 @@ export default { @@ -19,41 +19,41 @@ export default {
19 computed: { 19 computed: {
20 comboximgleftStyle () { 20 comboximgleftStyle () {
21 return { 21 return {
22 - height: this.titleFontSize * 3.5 + 'px',  
23 - marginTop: this.titleFontSize * 2.5 + 'px',  
24 - marginLeft: this.titleFontSize + 'px' 22 + height: this.titleFontSize * 12.5 + 'px',
  23 + // marginTop: this.titleFontSize * 3.5 + 'px',
  24 + // marginLeft: this.titleFontSize + 'px'
25 } 25 }
26 }, 26 },
27 comboximgrightStyle () { 27 comboximgrightStyle () {
28 return { 28 return {
29 - height: this.titleFontSize * 3.5 + 'px',  
30 - marginTop: this.titleFontSize * 2.5 + 'px' 29 + height: this.titleFontSize * 12.5 + 'px',
  30 + // marginTop: this.titleFontSize * 3.5 + 'px'
31 } 31 }
32 }, 32 },
33 comcontextStyle () { 33 comcontextStyle () {
34 return { 34 return {
35 - fontSize: this.titleFontSize + 'px' 35 + fontSize: this.titleFontSize *3.5 + 'px'
36 } 36 }
37 }, 37 },
38 comtitlesizeStyle () { 38 comtitlesizeStyle () {
39 return { 39 return {
40 - height: this.titleFontSize * 1.5 + 'px', 40 + height: this.titleFontSize * 8.5 + 'px',
41 // width: this.titleFontSize * 6 + 'px' 41 // width: this.titleFontSize * 6 + 'px'
42 } 42 }
43 }, 43 },
44 comtitleTextStyle () { 44 comtitleTextStyle () {
45 return { 45 return {
46 - fontSize: this.titleFontSize / 1.3 + 'px' 46 + fontSize: this.titleFontSize *3.3 + 'px'
47 } 47 }
48 }, 48 },
49 comnumberTextStyle () { 49 comnumberTextStyle () {
50 return { 50 return {
51 - fontSize: this.titleFontSize / 1.2 + 'px' 51 + fontSize: this.titleFontSize *3.2 + 'px'
52 } 52 }
53 }, 53 },
54 comnumberUnitStyle () { 54 comnumberUnitStyle () {
55 return { 55 return {
56 - fontSize: this.titleFontSize / 2 + 'px' 56 + fontSize: this.titleFontSize * 2 + 'px'
57 } 57 }
58 } 58 }
59 }, 59 },
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="digitalboard_down_ref"> 2 <div class="com-chart" id="digitalboard_down_ref">
3 - <div style="margin-top: 2%" :style="comcontextStyle">  
4 - <el-row> 3 + <div style="margin-bottom: 2%" :style="comcontextStyle">
  4 + <el-row class="width-86">
5 <el-col :span="12"> 5 <el-col :span="12">
6 - <div class="grid-content bg-purple">  
7 - <span> 6 + <div class="grid-content bg-purple" style="text-align:left;">
  7 + <span >
8 <!--title_box_1.png--> 8 <!--title_box_1.png-->
9 <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png"> 9 <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
10 <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span> 10 <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
@@ -18,77 +18,77 @@ @@ -18,77 +18,77 @@
18 </el-col> 18 </el-col>
19 </el-row> 19 </el-row>
20 <el-row> 20 <el-row>
21 - <el-col :span="3"> 21 + <!-- <el-col :span="3">
22 <div class="grid-content bg-purple com-box"> 22 <div class="grid-content bg-purple com-box">
23 <span > 23 <span >
24 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png"> 24 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
25 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #FEFEFE;" v-if="mustBitFalg > 0">{{mustBit}}</span> 25 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #FEFEFE;" v-if="mustBitFalg > 0">{{mustBit}}</span>
26 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span> 26 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span>
27 </span> 27 </span>
28 </div> 28 </div>
29 - </el-col> 29 + </el-col>-->
30 <el-col :span="3"> 30 <el-col :span="3">
31 <div class="grid-content bg-purple-light com-box"> 31 <div class="grid-content bg-purple-light com-box">
32 <span> 32 <span>
33 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
34 - <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>  
35 - <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>  
36 - <span :style="comcommaStyle" style=" left: 24%;" v-if="isOneCommaShow">,</span> 33 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  34 + <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
  35 + <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
  36 + <span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
37 </span> 37 </span>
38 </div> 38 </div>
39 </el-col> 39 </el-col>
40 <el-col :span="3"> 40 <el-col :span="3">
41 <div class="grid-content bg-purple com-box"> 41 <div class="grid-content bg-purple com-box">
42 <span> 42 <span>
43 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
44 - <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>  
45 - <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span> 43 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  44 + <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
  45 + <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
46 </span> 46 </span>
47 </div> 47 </div>
48 </el-col> 48 </el-col>
49 <el-col :span="3"> 49 <el-col :span="3">
50 <div class="grid-content bg-purple-light com-box"> 50 <div class="grid-content bg-purple-light com-box">
51 <span> 51 <span>
52 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
53 - <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>  
54 - <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span> 52 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  53 + <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
  54 + <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
55 </span> 55 </span>
56 </div> 56 </div>
57 </el-col> 57 </el-col>
58 <el-col :span="3"> 58 <el-col :span="3">
59 <div class="grid-content bg-purple com-box"> 59 <div class="grid-content bg-purple com-box">
60 <span> 60 <span>
61 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
62 - <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>  
63 - <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>  
64 - <span :style="comcommaStyle" style="left: 61.5%;" v-if="isTwoCommaShow">,</span> 61 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  62 + <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
  63 + <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
  64 + <span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
65 </span> 65 </span>
66 </div> 66 </div>
67 </el-col> 67 </el-col>
68 <el-col :span="3"> 68 <el-col :span="3">
69 <div class="grid-content bg-purple-light com-box"> 69 <div class="grid-content bg-purple-light com-box">
70 <span> 70 <span>
71 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
72 - <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>  
73 - <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span> 71 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  72 + <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
  73 + <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
74 </span> 74 </span>
75 </div> 75 </div>
76 </el-col> 76 </el-col>
77 <el-col :span="3"> 77 <el-col :span="3">
78 <div class="grid-content bg-purple com-box"> 78 <div class="grid-content bg-purple com-box">
79 <span> 79 <span>
80 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
81 - <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>  
82 - <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span> 80 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  81 + <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
  82 + <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
83 </span> 83 </span>
84 </div> 84 </div>
85 </el-col> 85 </el-col>
86 <el-col :span="3"> 86 <el-col :span="3">
87 <div class="grid-content bg-purple-light com-box"> 87 <div class="grid-content bg-purple-light com-box">
88 <span> 88 <span>
89 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
90 - <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>  
91 - <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span> 89 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  90 + <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
  91 + <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
92 </span> 92 </span>
93 </div> 93 </div>
94 </el-col> 94 </el-col>
@@ -67,7 +67,7 @@ export default { @@ -67,7 +67,7 @@ export default {
67 fontSize: this.titleFontSize * 3.5 + 'px', 67 fontSize: this.titleFontSize * 3.5 + 'px',
68 top: '9%', 68 top: '9%',
69 position: 'absolute', 69 position: 'absolute',
70 - fontFamily: 'yjsz' 70 + fontFamily: 'DSDIG'
71 } 71 }
72 }, 72 },
73 comcommaStyle () { 73 comcommaStyle () {
@@ -76,7 +76,7 @@ export default { @@ -76,7 +76,7 @@ export default {
76 color: '#FEFEFE', 76 color: '#FEFEFE',
77 fontSize: this.titleFontSize * 3 + 'px', 77 fontSize: this.titleFontSize * 3 + 'px',
78 top: '28%', 78 top: '28%',
79 - fontFamily: 'yjsz' 79 + fontFamily: 'DSDIG'
80 } 80 }
81 } 81 }
82 82
@@ -161,7 +161,7 @@ export default { @@ -161,7 +161,7 @@ export default {
161 } 161 }
162 // 右边数 162 // 右边数
163 if(map.rightNumber){ 163 if(map.rightNumber){
164 - that.undeclaredAmountNumber = map.rightNumber 164 + that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
165 } 165 }
166 that.initChart() 166 that.initChart()
167 that.updateChart() 167 that.updateChart()
@@ -182,6 +182,30 @@ export default { @@ -182,6 +182,30 @@ export default {
182 this.declaredAmountNumber += 10 182 this.declaredAmountNumber += 10
183 this.initChart() 183 this.initChart()
184 }, 2000) 184 }, 2000)
  185 + },
  186 + numberFilter(val,places = 2) {
  187 + //value为传进来的数据 比如 12345.6789
  188 + //places 为需要保留的小数位数 -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
  189 + //数据校验
  190 + if (parseFloat(val).toString() == 'NaN') return '0.00'
  191 + // 将数值截取
  192 + let num = val.toString().split('.')
  193 + let zs = num[0]
  194 + let xs = num[1]
  195 + // 整数部分处理，增加,
  196 + const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  197 + console.log("444",intPartFormat)
  198 + if (xs != null) {
  199 + if(places == 0){
  200 + return intPartFormat + '.' + xs
  201 + }else if(places == -1){
  202 + return intPartFormat
  203 + }else{
  204 + return intPartFormat +'.' + xs.substr(0,places)
  205 + }
  206 + } else {
  207 + return intPartFormat
  208 + }
185 } 209 }
186 210
187 } 211 }
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="digitalboard_top_ref"> 2 <div class="com-chart" id="digitalboard_top_ref">
3 - <div style="margin-top: 2%" :style="comcontextStyle">  
4 - <el-row> 3 + <div style="margin-bottom: 3%" :style="comcontextStyle">
  4 + <el-row class="width-86">
5 <el-col :span="12"> 5 <el-col :span="12">
6 - <div class="grid-content bg-purple"> 6 + <div class="grid-content bg-purple" style="text-align:left;">
7 <span> 7 <span>
8 <!--title_box_1.png--> 8 <!--title_box_1.png-->
9 <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png"> 9 <img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
@@ -18,77 +18,77 @@ @@ -18,77 +18,77 @@
18 </el-col> 18 </el-col>
19 </el-row> 19 </el-row>
20 <el-row> 20 <el-row>
21 - <el-col :span="3"> 21 + <!-- <el-col :span="3">
22 <div class="grid-content bg-purple com-box"> 22 <div class="grid-content bg-purple com-box">
23 <span > 23 <span >
24 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png"> 24 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
25 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #FEFEFE;" v-if="mustBitFalg > 0">{{mustBit}}</span> 25 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #FEFEFE;" v-if="mustBitFalg > 0">{{mustBit}}</span>
26 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span> 26 <span class="com-box-value" :style="combitnumberStyle" style="left: 2.5%;color: #97969B;" v-if="mustBitFalg == 0">{{mustBit}}</span>
27 </span> 27 </span>
28 </div> 28 </div>
29 - </el-col> 29 + </el-col>-->
30 <el-col :span="3"> 30 <el-col :span="3">
31 <div class="grid-content bg-purple-light com-box"> 31 <div class="grid-content bg-purple-light com-box">
32 <span> 32 <span>
33 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
34 - <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>  
35 - <span class="com-box-value" :style="combitnumberStyle" style="left: 15%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>  
36 - <span :style="comcommaStyle" style=" left: 24%;" v-if="isOneCommaShow">,</span> 33 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  34 + <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
  35 + <span class="com-box-value" :style="combitnumberStyle" style="left: 3%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
  36 + <span :style="comcommaStyle" style=" left: 11.5%;" v-if="isOneCommaShow">,</span>
37 </span> 37 </span>
38 </div> 38 </div>
39 </el-col> 39 </el-col>
40 <el-col :span="3"> 40 <el-col :span="3">
41 <div class="grid-content bg-purple com-box"> 41 <div class="grid-content bg-purple com-box">
42 <span> 42 <span>
43 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
44 - <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>  
45 - <span class="com-box-value" :style="combitnumberStyle" style="left: 27.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span> 43 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  44 + <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
  45 + <span class="com-box-value" :style="combitnumberStyle" style="left: 15.5%;color: #97969B;" v-if="hundredThousandBitFalg == 0">{{hundredThousandBit}}</span>
46 </span> 46 </span>
47 </div> 47 </div>
48 </el-col> 48 </el-col>
49 <el-col :span="3"> 49 <el-col :span="3">
50 <div class="grid-content bg-purple-light com-box"> 50 <div class="grid-content bg-purple-light com-box">
51 <span> 51 <span>
52 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
53 - <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>  
54 - <span class="com-box-value" :style="combitnumberStyle" style="left: 40%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span> 52 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  53 + <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
  54 + <span class="com-box-value" :style="combitnumberStyle" style="left: 28%;color: #97969B;" v-if="tenThousandBitFalg == 0">{{tenThousandBit}}</span>
55 </span> 55 </span>
56 </div> 56 </div>
57 </el-col> 57 </el-col>
58 <el-col :span="3"> 58 <el-col :span="3">
59 <div class="grid-content bg-purple com-box"> 59 <div class="grid-content bg-purple com-box">
60 <span> 60 <span>
61 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
62 - <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>  
63 - <span class="com-box-value" :style="combitnumberStyle" style="left: 52.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>  
64 - <span :style="comcommaStyle" style="left: 61.5%;" v-if="isTwoCommaShow">,</span> 61 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  62 + <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
  63 + <span class="com-box-value" :style="combitnumberStyle" style="left: 40.5%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
  64 + <span :style="comcommaStyle" style="left: 49%;" v-if="isTwoCommaShow">,</span>
65 </span> 65 </span>
66 </div> 66 </div>
67 </el-col> 67 </el-col>
68 <el-col :span="3"> 68 <el-col :span="3">
69 <div class="grid-content bg-purple-light com-box"> 69 <div class="grid-content bg-purple-light com-box">
70 <span> 70 <span>
71 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
72 - <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>  
73 - <span class="com-box-value" :style="combitnumberStyle" style="left: 65%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span> 71 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  72 + <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
  73 + <span class="com-box-value" :style="combitnumberStyle" style="left: 53%;color: #97969B;" v-if="hundredBitFalg == 0">{{hundredBit}}</span>
74 </span> 74 </span>
75 </div> 75 </div>
76 </el-col> 76 </el-col>
77 <el-col :span="3"> 77 <el-col :span="3">
78 <div class="grid-content bg-purple com-box"> 78 <div class="grid-content bg-purple com-box">
79 <span> 79 <span>
80 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
81 - <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>  
82 - <span class="com-box-value" :style="combitnumberStyle" style="left: 77.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span> 80 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  81 + <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
  82 + <span class="com-box-value" :style="combitnumberStyle" style="left: 66.5%;color: #97969B;" v-if="tenBitFalg == 0">{{tenBit}}</span>
83 </span> 83 </span>
84 </div> 84 </div>
85 </el-col> 85 </el-col>
86 <el-col :span="3"> 86 <el-col :span="3">
87 <div class="grid-content bg-purple-light com-box"> 87 <div class="grid-content bg-purple-light com-box">
88 <span> 88 <span>
89 - <img :style="comboximgStyle" src="./src/assets/img/bit_box_2.png">  
90 - <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>  
91 - <span class="com-box-value" :style="combitnumberStyle" style="left: 90%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span> 89 + <img :style="comboximgStyle" src="./src/assets/images/digitalDp/bit_box_2.png">
  90 + <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
  91 + <span class="com-box-value" :style="combitnumberStyle" style="left: 78%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
92 </span> 92 </span>
93 </div> 93 </div>
94 </el-col> 94 </el-col>
@@ -67,7 +67,7 @@ export default { @@ -67,7 +67,7 @@ export default {
67 fontSize: this.titleFontSize * 3.5 + 'px', 67 fontSize: this.titleFontSize * 3.5 + 'px',
68 top: '9%', 68 top: '9%',
69 position: 'absolute', 69 position: 'absolute',
70 - fontFamily: 'yjsz' 70 + fontFamily: 'DSDIG'
71 } 71 }
72 }, 72 },
73 comcommaStyle () { 73 comcommaStyle () {
@@ -76,7 +76,7 @@ export default { @@ -76,7 +76,7 @@ export default {
76 color: '#FEFEFE', 76 color: '#FEFEFE',
77 fontSize: this.titleFontSize * 3 + 'px', 77 fontSize: this.titleFontSize * 3 + 'px',
78 top: '28%', 78 top: '28%',
79 - fontFamily: 'yjsz' 79 + fontFamily: 'DSDIG'
80 } 80 }
81 } 81 }
82 82
@@ -163,7 +163,7 @@ export default { @@ -163,7 +163,7 @@ export default {
163 // 右边数 163 // 右边数
164 console.log(map.rightNumber) 164 console.log(map.rightNumber)
165 if(map.rightNumber){ 165 if(map.rightNumber){
166 - that.undeclaredAmountNumber = map.rightNumber 166 + that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
167 } 167 }
168 that.initChart() 168 that.initChart()
169 that.updateChart() 169 that.updateChart()
@@ -184,6 +184,30 @@ export default { @@ -184,6 +184,30 @@ export default {
184 this.declaredAmountNumber += 10 184 this.declaredAmountNumber += 10
185 this.initChart() 185 this.initChart()
186 }, 2000) 186 }, 2000)
  187 + },
  188 + numberFilter(val,places = 2) {
  189 + //value为传进来的数据 比如 12345.6789
  190 + //places 为需要保留的小数位数 -1为清空小数 0为保留全部位数的小数 传入多少即为多少 不传默认保留两位小数 传进来多少就截取多少
  191 + //数据校验
  192 + if (parseFloat(val).toString() == 'NaN') return '0.00'
  193 + // 将数值截取
  194 + let num = val.toString().split('.')
  195 + let zs = num[0]
  196 + let xs = num[1]
  197 + // 整数部分处理，增加,
  198 + const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  199 + console.log("444",intPartFormat)
  200 + if (xs != null) {
  201 + if(places == 0){
  202 + return intPartFormat + '.' + xs
  203 + }else if(places == -1){
  204 + return intPartFormat
  205 + }else{
  206 + return intPartFormat +'.' + xs.substr(0,places)
  207 + }
  208 + } else {
  209 + return intPartFormat
  210 + }
187 } 211 }
188 212
189 } 213 }
1 -<div class="com-container">  
2 - <div class="com-chart" id="documentcpu_ref"></div> 1 +<div class="com-container" id="documentcpu_ref">
  2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
3 </div> 3 </div>
1 export default { 1 export default {
2 name: 'DocumentCpu', 2 name: 'DocumentCpu',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + optionData:'',
8 allData: { 12 allData: {
9 polyline: { 13 polyline: {
10 title: "文书库CPU监控", 14 title: "文书库CPU监控",
@@ -27,7 +31,6 @@ export default { @@ -27,7 +31,6 @@ export default {
27 } 31 }
28 }, 32 },
29 mounted () { 33 mounted () {
30 - this.initChart()  
31 this.getData() 34 this.getData()
32 window.addEventListener('resize', this.screenAdapter) 35 window.addEventListener('resize', this.screenAdapter)
33 this.screenAdapter() 36 this.screenAdapter()
@@ -37,46 +40,7 @@ export default { @@ -37,46 +40,7 @@ export default {
37 clearInterval(this.timerId) 40 clearInterval(this.timerId)
38 }, 41 },
39 methods: { 42 methods: {
40 - initChart () {  
41 - this.chartInstance = echarts.init(document.getElementById('documentcpu_ref'))  
42 - const initOption = {  
43 - grid: {  
44 - top: '15%',  
45 - left: '3%',  
46 - right: '4%',  
47 - bottom: '20%',  
48 - containLabel: true  
49 - },  
50 - legend: {  
51 - right: '10%',  
52 - top: '5%',  
53 - textStyle: {  
54 - color: 'wihte'  
55 - }  
56 - },  
57 - xAxis: {  
58 - type: 'category',  
59 - boundaryGap: false,  
60 - axisLabel: {  
61 - textStyle: {  
62 - color: '#E6E8EB'  
63 - }  
64 - }  
65 - },  
66 - yAxis: {  
67 - type: 'value',  
68 - splitLine: {  
69 - show: false  
70 - },  
71 - axisLabel: {  
72 - textStyle: {  
73 - color: '#E6E8EB'  
74 - }  
75 - }  
76 - }  
77 - }  
78 - this.chartInstance.setOption(initOption)  
79 - }, 43 +
80 async getData () { 44 async getData () {
81 // await this.$http.get() 45 // await this.$http.get()
82 // const { data: ret } = await this.$http.get('documentcpu') 46 // const { data: ret } = await this.$http.get('documentcpu')
@@ -88,17 +52,19 @@ export default { @@ -88,17 +52,19 @@ export default {
88 updateChart () { 52 updateChart () {
89 // 半透明的颜色值 53 // 半透明的颜色值
90 const colorArr1 = [ 54 const colorArr1 = [
91 - 'rgba(11, 168, 44, 0.5)', 55 + 'rgba(35, 255, 255, 0.5)',
92 'rgba(44, 110, 255, 0.5)', 56 'rgba(44, 110, 255, 0.5)',
93 'rgba(22, 242, 217, 0.5)', 57 'rgba(22, 242, 217, 0.5)',
  58 + 'rgba(11, 168, 44, 0.5)',
94 'rgba(254, 33, 30, 0.5)', 59 'rgba(254, 33, 30, 0.5)',
95 'rgba(250, 105, 0, 0.5)' 60 'rgba(250, 105, 0, 0.5)'
96 ] 61 ]
97 - // 全透明的颜色值 62 + // 全透明的颜色值
98 const colorArr2 = [ 63 const colorArr2 = [
99 - 'rgba(11, 168, 44, 0)', 64 + 'rgba(35, 255, 255, 0)',
100 'rgba(44, 110, 255, 0)', 65 'rgba(44, 110, 255, 0)',
101 'rgba(22, 242, 217, 0)', 66 'rgba(22, 242, 217, 0)',
  67 + 'rgba(11, 168, 44, 0)',
102 'rgba(254, 33, 30, 0)', 68 'rgba(254, 33, 30, 0)',
103 'rgba(250, 105, 0, 0)' 69 'rgba(250, 105, 0, 0)'
104 ] 70 ]
@@ -109,6 +75,16 @@ export default { @@ -109,6 +75,16 @@ export default {
109 type: 'line', 75 type: 'line',
110 data: item.data, 76 data: item.data,
111 smooth: true, 77 smooth: true,
  78 + showSymbol:false,
  79 + itemStyle : {
  80 + normal : {
  81 + color:colorArr1[index],//tooltip里的小圆点颜色
  82 + lineStyle:{
  83 + color:colorArr1[index],
  84 + width:2,
  85 + }
  86 + }
  87 + },
112 areaStyle: { 88 areaStyle: {
113 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 89 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
114 { 90 {
@@ -129,29 +105,90 @@ export default { @@ -129,29 +105,90 @@ export default {
129 }) 105 })
130 const title = this.allData.polyline.title 106 const title = this.allData.polyline.title
131 const unit = this.allData.polyline.unit 107 const unit = this.allData.polyline.unit
132 - const dataOption = { 108 + const seriesData=seriesArr;
  109 + let xAxisData=timeArr;
  110 + this.optionData = {
133 title: { 111 title: {
134 text: title, 112 text: title,
135 left: 'center', 113 left: 'center',
136 - bottom: '8%'  
137 - },  
138 - xAxis: {  
139 - data: timeArr 114 + bottom: '8%',
  115 + textStyle: {
  116 + fontSize: this.titleFontSize*0.5,
  117 + color:'#ffffff'
  118 + }
  119 +
140 }, 120 },
141 - yAxis: {  
142 - name: unit 121 + tooltip: {
  122 + trigger: 'axis',
  123 + backgroundColor:'rgba(50,50,50,0.7)',
  124 + borderColor:"#333",
  125 + textStyle:{
  126 + color:"#fff",
  127 + align:'left'
  128 + }
  129 +
143 }, 130 },
144 legend: { 131 legend: {
145 - data: legendArr 132 + data: legendArr,
  133 + itemHeight:0,//图例圆圈大小设置
  134 + right: '5%',
  135 + top: '5%',
  136 + textStyle: {
  137 + color: '#ffffff',
  138 + fontsize:"12px"
  139 + }
  140 +
146 }, 141 },
147 - dataZoom: {  
148 - show: false,  
149 - startValue: this.startValue,  
150 - endValue: this.endValue 142 + grid: {
  143 + top: '15%',
  144 + left: '3%',
  145 + right: '4%',
  146 + bottom: '20%',
  147 + containLabel: true
151 }, 148 },
152 - series: seriesArr  
153 - }  
154 - this.chartInstance.setOption(dataOption) 149 + xAxis: {
  150 + type: 'category',
  151 + boundaryGap: false,
  152 + data: xAxisData,
  153 +
  154 + axisLine:{
  155 + show:false,//是否显示坐标线
  156 + },
  157 + axisTick: {
  158 + show: false //是否显示坐标刻度
  159 + },
  160 + axisLabel:{
  161 + color:'#ffffff',
  162 + },
  163 +
  164 + },
  165 + yAxis: {
  166 + type: 'value',
  167 + name:unit,
  168 + nameTextStyle:{
  169 + color:'#ffffff',
  170 + padding:[0,0,0,-20]
  171 + },
  172 + axisLabel: {
  173 + color:'#ffffff',
  174 + // formatter: '{value} %'//以百分比显示
  175 + },
  176 + axisLine:{
  177 + show:true,//是否显示坐标线
  178 + },
  179 + splitLine:{
  180 + lineStyle: {
  181 + color:'#0a1b31'
  182 + }
  183 + }
  184 +
  185 + },
  186 + series: seriesData
  187 + };
  188 +
  189 +
  190 +
  191 +
155 }, 192 },
156 screenAdapter () { 193 screenAdapter () {
157 this.titleFontSize = document.getElementById('documentcpu_ref').offsetWidth / 100 * 3.6 194 this.titleFontSize = document.getElementById('documentcpu_ref').offsetWidth / 100 * 3.6
@@ -179,8 +216,7 @@ export default { @@ -179,8 +216,7 @@ export default {
179 } 216 }
180 } 217 }
181 } 218 }
182 - this.chartInstance.setOption(adapterOption)  
183 - this.chartInstance.resize() 219 +
184 }, 220 },
185 startInterval () { 221 startInterval () {
186 if (this.timerId) { 222 if (this.timerId) {
  1 +<div class="monitoring-bar" id="mon-bar">
  2 + <img :style="comtitleImgStyle" src="/vue3/src/assets/images/digitalDp/title-monitoring.png" alt="">
  3 + <BarChart :optionData="optionData" v-if="optionData"></BarChart>
  4 +</div>
  1 +export default {
  2 + name: 'monitoring',
  3 + template: '',
  4 + components: {
  5 + 'BarChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/barChart/index')
  7 + )
  8 + },
  9 + data(){
  10 + return {
  11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/bigScreen/thirtyDayMonitor?kipId=KPI63C5B2E5',
  13 + declareLineData:'',
  14 + ySeriesCommon:[],
  15 + legendData:[],
  16 + ySeriesCommonData:[],
  17 + titleFontSize: 30,
  18 + optionData:''
  19 +
  20 + }
  21 + },
  22 + computed: {
  23 + comtitleImgStyle () {
  24 + return {
  25 + height: this.titleFontSize * 2.1 + 'px'
  26 + }
  27 + }
  28 +
  29 + },
  30 + setup(props, {attrs, slots, emit}) {
  31 + const {proxy} = Vue.getCurrentInstance();
  32 +
  33 + // 挂载完
  34 + Vue.onMounted(() => {
  35 + proxy.screenAdapter();
  36 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
  37 + const data = res;
  38 + if (data && data.data) {
  39 + let monitoringBarData=data.data;
  40 + let legendData=[];
  41 + $.each(monitoringBarData,function (i,v){
  42 + proxy.ySeriesCommonData.unshift(v.value)
  43 + legendData.push(i+1)
  44 + })
  45 + proxy.legendData=legendData
  46 + }
  47 + // proxy.ySeriesCommon=
  48 + proxy.optionInti()
  49 + })
  50 +
  51 + })
  52 + const optionInti=()=>{
  53 + proxy.optionData = {
  54 + title: {
  55 + text: '',
  56 +
  57 + },
  58 + grid: {
  59 + top:'4%',
  60 + left: '3%',
  61 + right: '4%',
  62 + // bottom:'0',
  63 + // bottom: '8%',
  64 + containLabel: true,
  65 + },
  66 + xAxis: {
  67 + type: 'category',
  68 + data: props.legendData,
  69 + axisLine:{
  70 + show:true,//是否显示坐标线
  71 + lineStyle: {
  72 + color:'#0a1b31'//坐标线颜色
  73 + }
  74 + },
  75 + axisTick: {
  76 + show: false //是否显示坐标刻度
  77 + },
  78 + axisLabel:{
  79 + color:'#ffffff',
  80 + fontSize: 12
  81 + },
  82 + },
  83 + yAxis: {
  84 + type: 'value',
  85 + splitLine:{
  86 + show:false,
  87 +
  88 + },
  89 + axisLine:{
  90 + show:true,//是否显示坐标线
  91 + lineStyle: {
  92 + color:'#0a1b31'//坐标线颜色
  93 + }
  94 + },
  95 + axisLabel:{
  96 + color:'#ffffff',
  97 + fontSize:12,
  98 + formatter:function (value,index){
  99 + if(value>=10000 &&value<10000000){
  100 + value=value/10000 +"万";
  101 + }else if(value>=10000000){
  102 + value=value/10000000+"千万";
  103 + }
  104 + return value;
  105 + }
  106 + }
  107 + },
  108 + series: [
  109 + {
  110 + data: proxy.ySeriesCommonData,
  111 + type: 'bar',
  112 + showBackground: true,
  113 + backgroundStyle: {
  114 + color: 'rgba(180, 180, 180, 0.1)'
  115 + },
  116 + barWidth:8,
  117 + itemStyle:{
  118 + normal:{
  119 + barBorderRadius: [3,3,0,0],
  120 + color:new echarts.graphic.LinearGradient(
  121 + 0,0,0,1,
  122 + [
  123 + {offset:0,color:'#3ac9fb'},
  124 + {offset:1,color:'#2a81f3'}
  125 + ]
  126 + )
  127 + // color:"#ff0000"
  128 + }
  129 + }
  130 + }
  131 + ]
  132 + };
  133 + }
  134 + const screenAdapter=()=>{
  135 + proxy.titleFontSize = document.getElementById('mon-bar').offsetWidth / 100 * 3.6
  136 + }
  137 +
  138 +
  139 + return{
  140 + optionInti,
  141 + screenAdapter
  142 + }
  143 + }
  144 +}
1 -<div class="com-container">  
2 - <div class="com-chart" id="responsemonitor_ref"></div> 1 +<div class="com-container" id="responsemonitor_ref">
  2 + <div class="cpu-dropdown">
  3 + <el-dropdown @command="handleCommand" >
  4 + <span class="el-dropdown-link">
  5 + 请选择
  6 + <i class="icon-arrow"></i>
  7 + </span>
  8 + <template #dropdown>
  9 + <el-dropdown-menu>
  10 + <el-dropdown-item command="max">最大值</el-dropdown-item>
  11 + <el-dropdown-item command="ave">平均值</el-dropdown-item>
  12 + <el-dropdown-item command="min">最小值</el-dropdown-item>
  13 +
  14 + </el-dropdown-menu>
  15 + </template>
  16 + </el-dropdown>
  17 + </div>
  18 +<!-- <div class="com-chart" id="responsemonitor_ref"></div>-->
  19 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
  20 +
3 </div> 21 </div>
1 export default { 1 export default {
2 name: 'ResponseMonitor', 2 name: 'ResponseMonitor',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + optionData:'',
  12 + titleFontSize:'30',
8 allData: { 13 allData: {
9 polyline: { 14 polyline: {
10 title: "系统响应请求数监控", 15 title: "系统响应请求数监控",
@@ -35,7 +40,7 @@ export default { @@ -35,7 +40,7 @@ export default {
35 }, 40 },
36 methods: { 41 methods: {
37 initChart () { 42 initChart () {
38 - this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref')) 43 + /* this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref'))
39 const initOption = { 44 const initOption = {
40 grid: { 45 grid: {
41 top: '15%', 46 top: '15%',
@@ -69,7 +74,7 @@ export default { @@ -69,7 +74,7 @@ export default {
69 } 74 }
70 } 75 }
71 } 76 }
72 - this.chartInstance.setOption(initOption) 77 + this.chartInstance.setOption(initOption)*/
73 }, 78 },
74 async getData () { 79 async getData () {
75 // await this.$http.get() 80 // await this.$http.get()
@@ -85,6 +90,7 @@ export default { @@ -85,6 +90,7 @@ export default {
85 'rgba(11, 168, 44, 0.5)', 90 'rgba(11, 168, 44, 0.5)',
86 'rgba(44, 110, 255, 0.5)', 91 'rgba(44, 110, 255, 0.5)',
87 'rgba(22, 242, 217, 0.5)', 92 'rgba(22, 242, 217, 0.5)',
  93 + 'rgba(35, 255, 255, 0.5)',
88 'rgba(254, 33, 30, 0.5)', 94 'rgba(254, 33, 30, 0.5)',
89 'rgba(250, 105, 0, 0.5)' 95 'rgba(250, 105, 0, 0.5)'
90 ] 96 ]
@@ -93,6 +99,7 @@ export default { @@ -93,6 +99,7 @@ export default {
93 'rgba(11, 168, 44, 0)', 99 'rgba(11, 168, 44, 0)',
94 'rgba(44, 110, 255, 0)', 100 'rgba(44, 110, 255, 0)',
95 'rgba(22, 242, 217, 0)', 101 'rgba(22, 242, 217, 0)',
  102 + 'rgba(35, 255, 255, 0)',
96 'rgba(254, 33, 30, 0)', 103 'rgba(254, 33, 30, 0)',
97 'rgba(250, 105, 0, 0)' 104 'rgba(250, 105, 0, 0)'
98 ] 105 ]
@@ -101,52 +108,102 @@ export default { @@ -101,52 +108,102 @@ export default {
101 const seriesName = this.allData.polyline.data.name 108 const seriesName = this.allData.polyline.data.name
102 console.log(seriesName) 109 console.log(seriesName)
103 // 图例的数据 110 // 图例的数据
104 - const legendArr = this.allData.polyline.data.data.map(item => {  
105 - return item.name  
106 - }) 111 + // const legendArr = this.allData.polyline.data.map(item => {
  112 + // return item.name
  113 + // })
  114 + const legendArr=[];
  115 + legendArr.push(seriesName);
107 const title = this.allData.polyline.title 116 const title = this.allData.polyline.title
108 - // const unit = this.allData.polyline.unit  
109 - const dataOption = { 117 +
  118 +
  119 + this.optionData = {
110 title: { 120 title: {
111 text: title, 121 text: title,
112 left: '10%', 122 left: '10%',
113 textStyle: { 123 textStyle: {
114 - color: '#F1F2F5' 124 + fontSize: this.titleFontSize*0.5,
  125 + color:'#ffffff'
115 } 126 }
116 }, 127 },
117 - xAxis: {  
118 - data: timeArr 128 + tooltip: {
  129 + trigger: 'axis',
  130 + backgroundColor:'rgba(50,50,50,0.7)',
  131 + borderColor:"#333",
  132 + textStyle:{
  133 + color:"#fff",
  134 + align:'left'
  135 + }
  136 +
119 }, 137 },
120 legend: { 138 legend: {
121 - data: legendArr 139 + data: legendArr,
  140 + itemHeight:0,//图例圆圈大小设置
  141 + top:'10%',
  142 + right:'20%',
  143 + textStyle: {
  144 + color: '#ffffff',
  145 + fontsize:"12px"
  146 + }
  147 +
122 }, 148 },
123 - dataZoom: {  
124 - show: false,  
125 - startValue: this.startValue,  
126 - endValue: this.endValue 149 + grid: {
  150 + left: '3%',
  151 + right: '4%',
  152 + bottom: '3%',
  153 + containLabel: true,
127 }, 154 },
128 - series: [  
129 - {  
130 - name: seriesName,  
131 - type: 'line',  
132 - data: seriesData,  
133 - smooth: true,  
134 - areaStyle: {  
135 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
136 - {  
137 - offset: 0,  
138 - color: colorArr1[2]  
139 - }, // %0的颜色值  
140 - {  
141 - offset: 1,  
142 - color: colorArr2[2]  
143 - } // 100%的颜色值  
144 - ]) 155 + xAxis: {
  156 + type: 'category',
  157 + boundaryGap: false,
  158 + data: timeArr,
  159 +
  160 + axisLine:{
  161 + show:false,//是否显示坐标线
  162 + },
  163 + axisTick: {
  164 + show: false //是否显示坐标刻度
  165 + },
  166 + axisLabel:{
  167 + color:'#ffffff',
  168 + },
  169 +
  170 + },
  171 + yAxis: {
  172 + axisLabel: {
  173 + color:'#ffffff',
  174 + },
  175 + splitLine:{
  176 + lineStyle: {
  177 + color:'#0a1b31'
145 } 178 }
  179 + },
  180 +
  181 + },
  182 + series: {
  183 + name: seriesName,
  184 + type: 'line',
  185 + data: seriesData,
  186 + smooth: true,
  187 + showSymbol:false,
  188 + color:colorArr1[1],
  189 + areaStyle: {
  190 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  191 + {
  192 + offset: 0,
  193 + color: colorArr1[1]
  194 + }, // %0的颜色值
  195 + {
  196 + offset: 1,
  197 + color: colorArr2[1]
  198 + } // 100%的颜色值
  199 + ])
146 } 200 }
147 - ]  
148 - }  
149 - this.chartInstance.setOption(dataOption) 201 + },
  202 + itemStyle:{
  203 + showSymbol:false
  204 + }
  205 + };
  206 +
150 }, 207 },
151 screenAdapter () { 208 screenAdapter () {
152 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6 209 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
@@ -165,8 +222,7 @@ export default { @@ -165,8 +222,7 @@ export default {
165 } 222 }
166 } 223 }
167 } 224 }
168 - this.chartInstance.setOption(adapterOption)  
169 - this.chartInstance.resize() 225 +
170 }, 226 },
171 startInterval () { 227 startInterval () {
172 if (this.timerId) { 228 if (this.timerId) {
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="topfive_ref"></div> 2 <div class="com-chart" id="topfive_ref"></div>
3 <div class="topfive-box-title"> 3 <div class="topfive-box-title">
4 - <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->  
5 - <span :style="comtitleTextStyle" class="topfive-title-size">涉税文书TOP5业务量</span> 4 + <img :style="comtitleImgStyle" src="./src/assets/images/digitalDp/title-topfive.png" class="topfive-title-img"> <!-- bor1_6 -->
  5 +<!-- <span :style="comtitleTextStyle" class="topfive-title-size">涉税文书TOP5业务量</span>-->
6 </div> 6 </div>
7 </div> 7 </div>
@@ -70,14 +70,22 @@ export default { @@ -70,14 +70,22 @@ export default {
70 show: false 70 show: false
71 } 71 }
72 }, 72 },
73 - yAxis: {  
74 - type: 'category',  
75 - axisLabel: {  
76 - textStyle: {  
77 - color: '#E2E1E6'  
78 - }  
79 - }  
80 - }, 73 + yAxis:
  74 + {
  75 + type: 'category',
  76 + axisLabel: {
  77 + textStyle: {
  78 + color: '#E2E1E6'
  79 + }
  80 + },
  81 + axisLine:{
  82 + show:false,//是否显示坐标线
  83 + },
  84 + axisTick: {
  85 + show: false //是否显示坐标刻度
  86 + },
  87 + },
  88 +
81 series: [ 89 series: [
82 { 90 {
83 type: 'bar', 91 type: 'bar',
@@ -88,10 +96,18 @@ export default { @@ -88,10 +96,18 @@ export default {
88 label: { 96 label: {
89 show: true, 97 show: true,
90 position: 'right', 98 position: 'right',
91 - testStyle: {  
92 - color: 'white'  
93 - } 99 +
  100 + textStyle: {
  101 + color: 'rgba(0,0,0,0)'
  102 + },
  103 + height:26,
  104 + width: 26,
  105 + offset:[-10,0],
  106 + backgroundColor: {
  107 + image: '/vue3/src/assets/images/digitalDp/pro-bg.png'
  108 + },
94 }, 109 },
  110 +
95 itemStyle: { 111 itemStyle: {
96 // 颜色渐变 指明渐变方向，指明不同百分比之下颜色的值 LinearGradient(x1, y1, x2, y2, []) 112 // 颜色渐变 指明渐变方向，指明不同百分比之下颜色的值 LinearGradient(x1, y1, x2, y2, [])
97 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ 113 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -139,9 +155,24 @@ export default { @@ -139,9 +155,24 @@ export default {
139 return item.value 155 return item.value
140 }) 156 })
141 const dataOption = { 157 const dataOption = {
142 - yAxis: { 158 + yAxis: [{
143 data: sellerNames 159 data: sellerNames
144 }, 160 },
  161 + {
  162 + data:sellerValues,
  163 + axisLine:{
  164 + show:false,//是否显示坐标线
  165 + },
  166 + axisTick: {
  167 + show: false //是否显示坐标刻度
  168 + },
  169 + axisLabel: {
  170 + textStyle: {
  171 + color: '#ffffff'
  172 + }
  173 + },
  174 + }
  175 + ],
145 series: [ 176 series: [
146 { 177 {
147 data: sellerValues 178 data: sellerValues
1 <div class="screen-container" id="bgscreen_ref"> 1 <div class="screen-container" id="bgscreen_ref">
2 <header class="screen-header" :style="screenheaderStyle"> 2 <header class="screen-header" :style="screenheaderStyle">
3 <div> 3 <div>
4 - <img style="width: 100%" src="/vue3/src/assets/img/header_border_dark.png" alt=""> 4 + <img style="width: 100%" src="/vue3/src/assets/images/digitalDp/header_border_dark.png" alt="">
5 </div> 5 </div>
6 <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span> 6 <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
7 <div class="title-left"> 7 <div class="title-left">
@@ -17,29 +17,49 @@ @@ -17,29 +17,49 @@
17 </div> 17 </div>
18 <!-- 本月业务量 折线图--> 18 <!-- 本月业务量 折线图-->
19 <div id="left-bottom"> 19 <div id="left-bottom">
20 - <TrendPolyline></TrendPolyline> 20 +<!-- <TrendPolyline></TrendPolyline>-->
  21 + <DeclareLine :colorData="colorData"></DeclareLine>
21 </div> 22 </div>
22 </section> 23 </section>
23 24
24 <section class="screen-middle"> 25 <section class="screen-middle">
25 - <div id="middle-top">  
26 - <!-- 今日已申报数 图板 -->  
27 - <DigitalBoardTop></DigitalBoardTop>  
28 - </div>  
29 - <div id="middle-center">  
30 - <!-- 本月已申报数 图板 -->  
31 - <DigitalBoardDown></DigitalBoardDown> 26 + <div class="middle-left">
  27 + <div class="middle-left-declare">
  28 + <div id="middle-top">
  29 + <!-- 今日已申报数 图板 -->
  30 + <DigitalBoardTop></DigitalBoardTop>
  31 + </div>
  32 + <div id="middle-center">
  33 + <!-- 本月已申报数 图板 -->
  34 + <DigitalBoardDown></DigitalBoardDown>
  35 + </div>
  36 + </div>
  37 + <div class="middle-left-declare-rate">
  38 + <div id="middle-bottom">
  39 + <!-- 本月申报率折线图 -->
  40 + <DeclarePolyline></DeclarePolyline>
  41 + </div>
  42 + </div>
  43 +
  44 +
32 </div> 45 </div>
33 - <div id="middle-bottom">  
34 - <!-- 本月申报率折线图 -->  
35 - <DeclarePolyline></DeclarePolyline> 46 + <div class="middle-right">
  47 + <div class="declare-top">
  48 + <!--本月应申报-->
  49 + <DeclareReport></DeclareReport>
  50 + </div>
  51 + <div class="deduction-bottom">
  52 + <!-- 本月扣款情况 图板 -->
  53 + <Deduction></Deduction>
  54 + </div>
36 </div> 55 </div>
  56 +
37 </section> 57 </section>
38 58
39 <section class="screen-right"> 59 <section class="screen-right">
40 <div id="right-top"> 60 <div id="right-top">
41 - <!-- 本月扣款情况 图板 -->  
42 - <Deduction></Deduction> 61 + <!--访问监控 柱状图-->
  62 + <Monitoring></Monitoring>
43 </div> 63 </div>
44 <div id="right-center"> 64 <div id="right-center">
45 <!-- 业务可用性 折线 --> 65 <!-- 业务可用性 折线 -->
@@ -20,8 +20,17 @@ export default { @@ -20,8 +20,17 @@ export default {
20 'DocumentCpu': Vue.defineAsyncComponent( 20 'DocumentCpu': Vue.defineAsyncComponent(
21 () => myImport('views/dp/components/documentCpu/index') 21 () => myImport('views/dp/components/documentCpu/index')
22 ), 22 ),
23 - 'TrendPolyline': Vue.defineAsyncComponent(  
24 - () => myImport('views/dp/components/trendPolyline/index') 23 + // 'TrendPolyline': Vue.defineAsyncComponent(
  24 + // () => myImport('views/dp/components/trendPolyline/index')
  25 + // ),
  26 + 'DeclareLine': Vue.defineAsyncComponent(
  27 + () => myImport('views/zjdaping/components/declareLine/index')
  28 + ),
  29 + 'Monitoring': Vue.defineAsyncComponent(
  30 + () => myImport('views/dp/components/monitoring/index')
  31 + ),
  32 + 'DeclareReport': Vue.defineAsyncComponent(
  33 + () => myImport('views/dp/components/declareReport/index')
25 ), 34 ),
26 'BusinessVolume': Vue.defineAsyncComponent( 35 'BusinessVolume': Vue.defineAsyncComponent(
27 () => myImport('views/dp/components/businessVolume/index') 36 () => myImport('views/dp/components/businessVolume/index')
@@ -42,7 +51,8 @@ export default { @@ -42,7 +51,8 @@ export default {
42 data () { 51 data () {
43 return { 52 return {
44 titleFontSize: 30, 53 titleFontSize: 30,
45 - dateTime: '00-00-00 00:00:00' 54 + dateTime: '00-00-00 00:00:00',
  55 + colorData:['#0D45FE','#00FFB9','#A35CFF']
46 } 56 }
47 }, 57 },
48 computed: { 58 computed: {
1 -<div id="bar-echart" style="width:100%;height:290px;"></div> 1 +<div id="bar-echart" style="width:100%;height:100%;"></div>
1 export default { 1 export default {
2 name: 'barChart', 2 name: 'barChart',
3 template: '', 3 template: '',
4 - props:['yAxisData','seriesData','legendData','chartId'], 4 + props:['optionData'],
5 components: { 5 components: {
6 }, 6 },
7 data(){ 7 data(){
@@ -17,8 +17,8 @@ export default { @@ -17,8 +17,8 @@ export default {
17 Vue.onMounted(() => { 17 Vue.onMounted(() => {
18 const chartDom=proxy.$el 18 const chartDom=proxy.$el
19 const myChart = echarts.init(chartDom); 19 const myChart = echarts.init(chartDom);
20 - let option;  
21 - option = { 20 + let option=props.optionData;
  21 + /*option = {
22 title: { 22 title: {
23 text: '近30天访问量', 23 text: '近30天访问量',
24 x:'center', 24 x:'center',
@@ -71,9 +71,15 @@ export default { @@ -71,9 +71,15 @@ export default {
71 } 71 }
72 }, 72 },
73 series: props.seriesData 73 series: props.seriesData
74 - }; 74 + };*/
75 75
  76 +
  77 + window.addEventListener('resize', function () {
  78 +
  79 + myChart.resize();
  80 + });
76 option && myChart.setOption(option); 81 option && myChart.setOption(option);
  82 +
77 }) 83 })
78 return{ 84 return{
79 85
@@ -18,7 +18,7 @@ export default { @@ -18,7 +18,7 @@ export default {
18 declaredToday:0,//今日已申报数 18 declaredToday:0,//今日已申报数
19 reportableMonth:0, //本月未申报数 19 reportableMonth:0, //本月未申报数
20 declaredMonth:0,//本月已申报数 20 declaredMonth:0,//本月已申报数
21 - declarationRate:0.94,//申报率 21 + declarationRate:0.00,//申报率
22 // volumeNumDoc:0,//涉税文书业务量 22 // volumeNumDoc:0,//涉税文书业务量
23 // volumeNumNet:0,//网上申报业务量 23 // volumeNumNet:0,//网上申报业务量
24 // volumeNum:0, //业务量数 24 // volumeNum:0, //业务量数
1 <div class="declare-lineChart"> 1 <div class="declare-lineChart">
2 - <LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></LineChart> 2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
3 </div> 3 </div>
1 export default { 1 export default {
2 name: 'performance', 2 name: 'performance',
3 template: '', 3 template: '',
  4 + props:['colorData'],
4 components: { 5 components: {
5 'LineChart': Vue.defineAsyncComponent( 6 'LineChart': Vue.defineAsyncComponent(
6 () => myImport('views/zjdaping/components/lineChart/index') 7 () => myImport('views/zjdaping/components/lineChart/index')
@@ -14,6 +15,8 @@ export default { @@ -14,6 +15,8 @@ export default {
14 yAxisCommon:[], 15 yAxisCommon:[],
15 ySeriesCommon:[], 16 ySeriesCommon:[],
16 legendData:[], 17 legendData:[],
  18 + optionData:'',
  19 + colorData:["#97d5f4",'#efe0a7','#e5abd1'],
17 chartId:'line-echart-declare' 20 chartId:'line-echart-declare'
18 } 21 }
19 }, 22 },
@@ -22,8 +25,15 @@ export default { @@ -22,8 +25,15 @@ export default {
22 }, 25 },
23 setup(props, {attrs, slots, emit}) { 26 setup(props, {attrs, slots, emit}) {
24 const {proxy} = Vue.getCurrentInstance(); 27 const {proxy} = Vue.getCurrentInstance();
  28 +
  29 +
  30 +
25 // 挂载完 31 // 挂载完
26 Vue.onMounted(() => { 32 Vue.onMounted(() => {
  33 + if(props.colorData){
  34 + const {colorData}=Vue.toRefs(props)
  35 + proxy.colorData=colorData.value
  36 + }
27 $.get(proxy.domainName +proxy.apiUrl,function (res) { 37 $.get(proxy.domainName +proxy.apiUrl,function (res) {
28 const data = res; 38 const data = res;
29 let ySeriesCommon=[]; 39 let ySeriesCommon=[];
@@ -41,9 +51,13 @@ export default { @@ -41,9 +51,13 @@ export default {
41 showSymbol:false, 51 showSymbol:false,
42 itemStyle : { 52 itemStyle : {
43 normal : { 53 normal : {
44 - color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1',//tooltip里的小圆点颜色 54 + /* color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1',//tooltip里的小圆点颜色
45 lineStyle:{ 55 lineStyle:{
46 color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1' 56 color:i==0?"#97d5f4":i==1?'#efe0a7':'#e5abd1'
  57 + }*/
  58 + color:i==0?proxy.colorData[0]:i==1?proxy.colorData[1]:proxy.colorData[2],//tooltip里的小圆点颜色
  59 + lineStyle:{
  60 + color:i==0?proxy.colorData[0]:i==1?proxy.colorData[1]:proxy.colorData[2]
47 } 61 }
48 } 62 }
49 }, 63 },
@@ -53,79 +67,85 @@ export default { @@ -53,79 +67,85 @@ export default {
53 }) 67 })
54 proxy.ySeriesCommon=ySeriesCommon; 68 proxy.ySeriesCommon=ySeriesCommon;
55 proxy.legendData=legendData; 69 proxy.legendData=legendData;
  70 + proxy.optionInit();
56 } 71 }
57 }) 72 })
58 73
59 - //一般y序列  
60 - proxy.yAxisCommon={  
61 - type: 'value',  
62 - splitLine:{  
63 - lineStyle: {  
64 - color:'#0a1b31'  
65 - }  
66 - },  
67 - axisLabel:{  
68 - color:'#ffffff',  
69 - },  
70 - }  
71 - //一般y轴数据  
72 - /* proxy.ySeriesCommon=[  
73 - {  
74 - name: '网络投票',  
75 - type: 'line',  
76 - smooth:true,  
77 - stack: 'Total',  
78 - data: [120, 132, 101, 134, 90, 230, 210],  
79 - yAxisIndex:0,  
80 - showSymbol:false,  
81 - itemStyle : {  
82 - normal : {  
83 - color:"#97d5f4",//tooltip里的小圆点颜色  
84 - lineStyle:{  
85 - color:'#97d5f4'  
86 - }  
87 - }  
88 - },  
89 - },  
90 - {  
91 - name: '涉税文书',  
92 - type: 'line',  
93 - smooth:true,  
94 - stack: 'Total',  
95 - data: [220, 182, 191, 234, 290, 330, 310],  
96 - showSymbol:false,  
97 - yAxisIndex:0,  
98 - itemStyle : {  
99 - color:"#ffffff",  
100 - normal : {  
101 - color:'#efe0a7',  
102 - lineStyle:{  
103 - color:'#efe0a7'  
104 - }  
105 - }  
106 - },  
107 - },  
108 - {  
109 - name: '网上申报',  
110 - type: 'line',  
111 - smooth:true,  
112 - stack: 'Total',  
113 - data: [150, 232, 201, 154, 190, 330, 410],  
114 - yAxisIndex:0,  
115 - showSymbol:false,  
116 - itemStyle : {  
117 - normal : {  
118 - color:'#e5abd1',  
119 - lineStyle:{  
120 - color:'#e5abd1'  
121 - }  
122 - }  
123 - },  
124 - },  
125 - ]*/ 74 +
126 }) 75 })
  76 + const optionInit=()=>{
  77 + console.log("3232",proxy.ySeriesCommon)
  78 + let xAxisDataLength=proxy.ySeriesCommon[0].length;
  79 + let xAxisData=[];
  80 + for(let i=1;i<=xAxisDataLength;i++){
  81 + xAxisData.push(i)
  82 + }
  83 + proxy.optionData = {
  84 + title: {
  85 + text: ''
  86 + },
  87 + tooltip: {
  88 + trigger: 'axis',
  89 + backgroundColor:'rgba(50,50,50,0.7)',
  90 + borderColor:"#333",
  91 + textStyle:{
  92 + color:"#fff",
  93 + align:'left'
  94 + }
  95 +
  96 + },
  97 + legend: {
  98 + data: proxy.legendData,
  99 + itemHeight:0,//图例圆圈大小设置
  100 + y:'7px',
  101 + textStyle: {
  102 + color: '#ffffff',
  103 + fontsize:"12px"
  104 + }
  105 +
  106 + },
  107 + grid: {
  108 + left: '3%',
  109 + right: '4%',
  110 + bottom: '3%',
  111 + containLabel: true,
  112 + },
  113 + xAxis: {
  114 + type: 'category',
  115 + boundaryGap: false,
  116 + data: xAxisData,
  117 +
  118 + axisLine:{
  119 + show:false,//是否显示坐标线
  120 + },
  121 + axisTick: {
  122 + show: false //是否显示坐标刻度
  123 + },
  124 + axisLabel:{
  125 + color:'#ffffff',
  126 + },
  127 +
  128 + },
  129 + yAxis:{
  130 + type: 'value',
  131 + splitLine:{
  132 + lineStyle: {
  133 + color:'#0a1b31'
  134 + }
  135 + },
  136 + axisLabel:{
  137 + color:'#ffffff',
  138 + },
  139 + },
  140 + series: proxy.ySeriesCommon,
  141 + itemStyle:{
  142 + showSymbol:false
  143 + }
  144 + };
  145 + }
127 146
128 return{ 147 return{
  148 + optionInit
129 } 149 }
130 } 150 }
131 } 151 }
1 -<div :id="chartId" style="width:100%;height:225px;"></div> 1 +<div :id="chartId" style="width:100%;height:100%;"></div>
1 export default { 1 export default {
2 name: 'lineChart', 2 name: 'lineChart',
3 template: '', 3 template: '',
4 - props:['yAxisData','seriesData','legendData','chartId'], 4 + // props:['yAxisData','seriesData','legendData','chartId'],
  5 + props:['optionData'],
5 components: { 6 components: {
6 }, 7 },
7 data(){ 8 data(){
@@ -21,20 +22,22 @@ export default { @@ -21,20 +22,22 @@ export default {
21 /*$.get(proxy.domainName,function(res){ 22 /*$.get(proxy.domainName,function(res){
22 23
23 })*/ 24 })*/
24 - proxy.yAxisData=props.yAxisData; 25 + /* proxy.yAxisData=props.yAxisData;
25 proxy.seriesData=props.seriesData; 26 proxy.seriesData=props.seriesData;
26 proxy.chartId=props.chartId; 27 proxy.chartId=props.chartId;
27 // const chartDom = document.getElementById('line-echart-declare'); 28 // const chartDom = document.getElementById('line-echart-declare');
  29 + console.log("**!/",proxy.seriesData)
28 let xAxisDataLength=proxy.seriesData[0].data.length; 30 let xAxisDataLength=proxy.seriesData[0].data.length;
29 let xAxisData=[]; 31 let xAxisData=[];
30 for(let i=1;i<=xAxisDataLength;i++){ 32 for(let i=1;i<=xAxisDataLength;i++){
31 xAxisData.push(i) 33 xAxisData.push(i)
32 - } 34 + }*/
33 const chartDom=proxy.$el 35 const chartDom=proxy.$el
34 const myChart = echarts.init(chartDom); 36 const myChart = echarts.init(chartDom);
35 - let option; 37 + let option=props.optionData;
  38 + console.log("testLIne0",chartDom,option)
36 39
37 - option = { 40 + /* option = {
38 title: { 41 title: {
39 text: '' 42 text: ''
40 }, 43 },
@@ -64,11 +67,11 @@ export default { @@ -64,11 +67,11 @@ export default {
64 bottom: '3%', 67 bottom: '3%',
65 containLabel: true, 68 containLabel: true,
66 }, 69 },
67 - /*toolbox: { 70 + /!*toolbox: {
68 feature: { 71 feature: {
69 saveAsImage: {} 72 saveAsImage: {}
70 } 73 }
71 - },*/ 74 + },*!/
72 xAxis: { 75 xAxis: {
73 type: 'category', 76 type: 'category',
74 boundaryGap: false, 77 boundaryGap: false,
@@ -90,7 +93,7 @@ export default { @@ -90,7 +93,7 @@ export default {
90 itemStyle:{ 93 itemStyle:{
91 showSymbol:false 94 showSymbol:false
92 } 95 }
93 - }; 96 + };*/
94 97
95 option && myChart.setOption(option); 98 option && myChart.setOption(option);
96 99
1 <div class="monitoring-bar"> 1 <div class="monitoring-bar">
2 - <BarChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></BarChart> 2 + <BarChart :optionData="optionData" v-if="optionData"></BarChart>
3 </div> 3 </div>
1 export default { 1 export default {
2 - name: 'performance', 2 + name: 'monitoringMonth',
3 template: '', 3 template: '',
4 components: { 4 components: {
5 'BarChart': Vue.defineAsyncComponent( 5 'BarChart': Vue.defineAsyncComponent(
@@ -15,6 +15,7 @@ export default { @@ -15,6 +15,7 @@ export default {
15 ySeriesCommon:[], 15 ySeriesCommon:[],
16 legendData:[], 16 legendData:[],
17 ySeriesCommonData:[], 17 ySeriesCommonData:[],
  18 + optionData:''
18 19
19 } 20 }
20 }, 21 },
@@ -37,7 +38,65 @@ export default { @@ -37,7 +38,65 @@ export default {
37 }) 38 })
38 proxy.legendData=legendData 39 proxy.legendData=legendData
39 } 40 }
40 - proxy.ySeriesCommon=[ 41 + // proxy.ySeriesCommon=
  42 + proxy.optionInti()
  43 + })
  44 +
  45 + })
  46 + const optionInti=()=>{
  47 + proxy.optionData = {
  48 + title: {
  49 + text: '近30天访问量',
  50 + x:'center',
  51 + y:'7px',
  52 + textStyle:{
  53 + color:"#ffffff",
  54 + fontSize:14
  55 + }
  56 + },
  57 + xAxis: {
  58 + type: 'category',
  59 + data: props.legendData,
  60 + axisLine:{
  61 + show:true,//是否显示坐标线
  62 + lineStyle: {
  63 + color:'#0a1b31'//坐标线颜色
  64 + }
  65 + },
  66 + axisTick: {
  67 + show: false //是否显示坐标刻度
  68 + },
  69 + axisLabel:{
  70 + color:'#ffffff',
  71 + fontSize: 12
  72 + },
  73 + },
  74 + yAxis: {
  75 + type: 'value',
  76 + splitLine:{
  77 + show:false,
  78 +
  79 + },
  80 + axisLine:{
  81 + show:true,//是否显示坐标线
  82 + lineStyle: {
  83 + color:'#0a1b31'//坐标线颜色
  84 + }
  85 + },
  86 + axisLabel:{
  87 + color:'#ffffff',
  88 + fontSize:12,
  89 + formatter:function (value,index){
  90 + if(value>=10000 &&value<10000000){
  91 + value=value/10000 +"万";
  92 + }else if(value>=10000000){
  93 + value=value/10000000+"千万";
  94 + }
  95 + return value;
  96 + }
  97 + }
  98 + },
  99 + series: [
41 { 100 {
42 data: proxy.ySeriesCommonData, 101 data: proxy.ySeriesCommonData,
43 type: 'bar', 102 type: 'bar',
@@ -61,11 +120,11 @@ export default { @@ -61,11 +120,11 @@ export default {
61 } 120 }
62 } 121 }
63 ] 122 ]
64 - })  
65 -  
66 - }) 123 + };
  124 + }
67 125
68 return{ 126 return{
  127 + optionInti
69 } 128 }
70 } 129 }
71 } 130 }
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div class="rightArrow"> 2 <div class="rightArrow">
3 <img src="/vue3/src/assets/images/zjdp/icon-left.png" @click="arrowClick('left')" alt=""> 3 <img src="/vue3/src/assets/images/zjdp/icon-left.png" @click="arrowClick('left')" alt="">
4 </div> 4 </div>
5 - <el-carousel height="50px" :autoplay="false" indicator-position="none" arrow="never" ref="cardShow"> 5 + <el-carousel height="50px" :autoplay="true" indicator-position="none" arrow="never" ref="cardShow">
6 <el-carousel-item v-for="item in listItem" :key="item" > 6 <el-carousel-item v-for="item in listItem" :key="item" >
7 <div class="tabContaier"> 7 <div class="tabContaier">
8 <div @click="clickTabs(itemData.busId)" v-if="listArray" v-for="(itemData,index) in dataShow" :class="['tabItem', {'active':checkId==itemData.busId,'borderColorGood':itemData.healthStatus==2,'borderColorMi':itemData.healthStatus==1}]">{{itemData.busTypeName}}</div> 8 <div @click="clickTabs(itemData.busId)" v-if="listArray" v-for="(itemData,index) in dataShow" :class="['tabItem', {'active':checkId==itemData.busId,'borderColorGood':itemData.healthStatus==2,'borderColorMi':itemData.healthStatus==1}]">{{itemData.busTypeName}}</div>
@@ -3,5 +3,5 @@ @@ -3,5 +3,5 @@
3 <div class="container-title network-title"> 3 <div class="container-title network-title">
4 <img src="/vue3/src/assets/images/zjdp/title-network.png" alt=""> 4 <img src="/vue3/src/assets/images/zjdp/title-network.png" alt="">
5 </div> 5 </div>
6 - <div id="network-echart" v-if="mapData" style="height:560px"></div> 6 + <div id="network-echart" v-if="mapData" style="height:550px"></div>
7 </div> 7 </div>
@@ -4,6 +4,6 @@ @@ -4,6 +4,6 @@
4 4
5 </div> 5 </div>
6 <div class="performance-lineChart"> 6 <div class="performance-lineChart">
7 - <LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance" v-if="seriesDataPerformance"></LineChart> 7 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
8 </div> 8 </div>
9 </div> 9 </div>
@@ -9,10 +9,10 @@ export default { @@ -9,10 +9,10 @@ export default {
9 data(){ 9 data(){
10 return { 10 return {
11 domainName:sessionStorage.getItem('domainName'), 11 domainName:sessionStorage.getItem('domainName'),
12 - apiUrl:'/api-web/bigScreen/getMachineRoomInfoList', 12 + apiUrl:'/api-web/sxview/getBusinessAvailability',
13 resourceStatisticsData:'', 13 resourceStatisticsData:'',
14 - yAxisDataPerformance:[],  
15 - seriesDataPerformance:[] 14 + optionData:'',
  15 + ySeriesCommon:[]
16 } 16 }
17 }, 17 },
18 setup(props, {attrs, slots, emit}) { 18 setup(props, {attrs, slots, emit}) {
@@ -21,6 +21,24 @@ export default { @@ -21,6 +21,24 @@ export default {
21 21
22 // 挂载完 22 // 挂载完
23 Vue.onMounted(() => { 23 Vue.onMounted(() => {
  24 + proxy.getData();
  25 +
  26 + })
  27 + const getData=()=>{
  28 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
  29 + const data = res;
  30 + if (data && data.data) {
  31 + let resData=data.data;
  32 +
  33 + }
  34 + // proxy.optionInit();
  35 +
  36 + })
  37 + proxy.optionInit();
  38 +
  39 + }
  40 + const optionInit=()=>{
  41 +
24 let data3=[350, 350, 350, 350, 350, 350, 350]; 42 let data3=[350, 350, 350, 350, 350, 350, 350];
25 let data4=[220, 182, 191, 234, 290, 330, 310]; 43 let data4=[220, 182, 191, 234, 290, 330, 310];
26 let data2=[100, 100, 100, 100, 100, 100, 100]; 44 let data2=[100, 100, 100, 100, 100, 100, 100];
@@ -30,43 +48,8 @@ export default { @@ -30,43 +48,8 @@ export default {
30 let max1=proxy.calMax([data1,data2]); 48 let max1=proxy.calMax([data1,data2]);
31 let min2=proxy.calMin([data3,data4]); 49 let min2=proxy.calMin([data3,data4]);
32 let max2=proxy.calMax([data3,data4]); 50 let max2=proxy.calMax([data3,data4]);
33 - //业务性能指标y序列  
34 - proxy.yAxisDataPerformance=[  
35 - {  
36 -  
37 - type: 'value',  
38 - axisLabel: {  
39 - formatter: '{value} %'//以百分比显示  
40 - },  
41 - splitLine:{  
42 - lineStyle: {  
43 - color:'#0a1b31'  
44 - }  
45 - },  
46 - min:0,  
47 - max:100,  
48 - splitNumber:10,  
49 - interval:(100-0)/10  
50 - }, {  
51 - name: '单位:万',  
52 - type: 'value',  
53 - axisLabel: {  
54 - show: true,  
55 - interval: 'right',//居中显示  
56 - },  
57 - splitLine:{  
58 - lineStyle: {  
59 - color:'#0a1b31'  
60 - }  
61 - },  
62 - min:min2,  
63 - max:max2,  
64 - splitNumber:10,  
65 - interval:(max2-min2)/10  
66 - },  
67 - ]  
68 //业务双y轴数据 51 //业务双y轴数据
69 - proxy.seriesDataPerformance=[ 52 + proxy.ySeriesCommon=[
70 { 53 {
71 name:'可用性', 54 name:'可用性',
72 type: 'line', 55 type: 'line',
@@ -166,7 +149,105 @@ export default { @@ -166,7 +149,105 @@ export default {
166 }, 149 },
167 } 150 }
168 ] 151 ]
169 - }) 152 + // let xAxisDataLength=proxy.ySeriesCommon[0].length;
  153 + let xAxisData=[];
  154 + for(let i=0;i<=24;i++){
  155 + if(i%4==0){
  156 + xAxisData.push(i+':00')
  157 +
  158 + }
  159 + }
  160 + let legendData=[];
  161 + $.each(proxy.ySeriesCommon,function (i,v){
  162 + legendData.push(v.name)
  163 + })
  164 + proxy.legendData=legendData;
  165 + proxy.optionData = {
  166 + title: {
  167 + text: ''
  168 + },
  169 + tooltip: {
  170 + trigger: 'axis',
  171 + backgroundColor:'rgba(50,50,50,0.7)',
  172 + borderColor:"#333",
  173 + textStyle:{
  174 + color:"#fff",
  175 + align:'left'
  176 + }
  177 +
  178 + },
  179 + legend: {
  180 + data: proxy.legendData,
  181 + itemHeight:0,//图例圆圈大小设置
  182 + y:'7px',
  183 + textStyle: {
  184 + color: '#ffffff',
  185 + fontsize:"12px"
  186 + }
  187 +
  188 + },
  189 + grid: {
  190 + left: '3%',
  191 + right: '4%',
  192 + bottom: '3%',
  193 + containLabel: true,
  194 + },
  195 + xAxis: {
  196 + type: 'category',
  197 + boundaryGap: false,
  198 + data: xAxisData,
  199 +
  200 + axisLine:{
  201 + show:false,//是否显示坐标线
  202 + },
  203 + axisTick: {
  204 + show: false //是否显示坐标刻度
  205 + },
  206 + axisLabel:{
  207 + color:'#ffffff',
  208 + },
  209 +
  210 + },
  211 + yAxis:[
  212 + {
  213 +
  214 + type: 'value',
  215 + axisLabel: {
  216 + formatter: '{value} %'//以百分比显示
  217 + },
  218 + splitLine:{
  219 + lineStyle: {
  220 + color:'#0a1b31'
  221 + }
  222 + },
  223 + min:0,
  224 + max:100,
  225 + splitNumber:10,
  226 + interval:(100-0)/10
  227 + }, {
  228 + name: '单位:万',
  229 + type: 'value',
  230 + axisLabel: {
  231 + show: true,
  232 + interval: 'right',//居中显示
  233 + },
  234 + splitLine:{
  235 + lineStyle: {
  236 + color:'#0a1b31'
  237 + }
  238 + },
  239 + min:min2,
  240 + max:max2,
  241 + splitNumber:10,
  242 + interval:(max2-min2)/10
  243 + },
  244 + ],
  245 + series: proxy.ySeriesCommon,
  246 + itemStyle:{
  247 + showSymbol:false
  248 + }
  249 + };
  250 + }
170 //计算最大值 251 //计算最大值
171 const calMax=(arr)=>{ 252 const calMax=(arr)=>{
172 let max=0; 253 let max=0;
@@ -203,7 +284,9 @@ export default { @@ -203,7 +284,9 @@ export default {
203 284
204 return{ 285 return{
205 calMax, 286 calMax,
206 - calMin 287 + calMin,
  288 + getData,
  289 + optionInit
207 } 290 }
208 } 291 }
209 } 292 }
@@ -2,9 +2,9 @@ @@ -2,9 +2,9 @@
2 <div class="container-title"> 2 <div class="container-title">
3 <img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt=""> 3 <img src="/vue3/src/assets/images/zjdp/title-statistics.png" alt="">
4 </div> 4 </div>
5 - <el-carousel direction="vertical" :autoplay="false" indicator-position="none" interval="4000">  
6 - <el-carousel-item v-for="item in 2" :key="item">  
7 -<!-- <h3 class="medium">{{ item }}</h3>--> 5 + <el-carousel direction="vertical" :autoplay="true" indicator-position="none" interval="3000">
  6 +<!-- <el-carousel-item v-for="item in 2" :key="item">-->
  7 + <el-carousel-item >
8 <div class="medium "> 8 <div class="medium ">
9 <ul class="statisticsItem"> 9 <ul class="statisticsItem">
10 <li class="listItem" v-for="itemData in resourceStatisticsData "> 10 <li class="listItem" v-for="itemData in resourceStatisticsData ">
@@ -42,7 +42,7 @@ @@ -42,7 +42,7 @@
42 </div> 42 </div>
43 <div class="right-chart flex-chart"> 43 <div class="right-chart flex-chart">
44 <!--折线图--> 44 <!--折线图-->
45 - <DeclareLine></DeclareLine> 45 + <DeclareLine :colorData="colorData" v-if="colorData"></DeclareLine>
46 <!--柱状图--> 46 <!--柱状图-->
47 <MonitoringMonth></MonitoringMonth> 47 <MonitoringMonth></MonitoringMonth>
48 </div> 48 </div>
@@ -40,7 +40,7 @@ export default { @@ -40,7 +40,7 @@ export default {
40 return { 40 return {
41 titleFontSize: 30, 41 titleFontSize: 30,
42 dateTime: '00-00-00 00:00:00', 42 dateTime: '00-00-00 00:00:00',
43 - 43 + colorData:["#97d5f4",'#efe0a7','#e5abd1']
44 } 44 }
45 }, 45 },
46 setup(props, {attrs, slots, emit}) { 46 setup(props, {attrs, slots, emit}) {
@@ -58,7 +58,7 @@ export default { @@ -58,7 +58,7 @@ export default {
58 Vue.onMounted(() => { 58 Vue.onMounted(() => {
59 // 获取当前系统时间 59 // 获取当前系统时间
60 let myDate = new Date(); 60 let myDate = new Date();
61 - proxy.dateTime = myDate.getFullYear() + '-' + proxy.timeFormat(myDate.getMonth() + 1 + '') + '-' + proxy.timeFormat(myDate.getDate() + '') // + ' ' + proxy.timeFormat(myDate.getHours() + '') + ':' + proxy.timeFormat(myDate.getMinutes() + '') + ':' + proxy.timeFormat(myDate.getSeconds() + ''); 61 + proxy.dateTime = myDate.getFullYear() + '-' + proxy.timeFormat(myDate.getMonth() + 1 + '') + '-' + proxy.timeFormat(myDate.getDate() + '') + ' ' + proxy.timeFormat(myDate.getHours() + '') + ':' + proxy.timeFormat(myDate.getMinutes() + '') + ':' + proxy.timeFormat(myDate.getSeconds() + '');
62 62
63 }) 63 })
64 64