monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit be2cb7e2397643b32045b2eeb553eef356167620 1 parent 32c55c7e

电子税务局大屏系统响应及带宽占用接口联调

Inline Side-by-side
Showing 32 changed files with 886 additions and 400 deletions
@@ -38,4 +38,7 @@ @@ -38,4 +38,7 @@
38 38
39 @import "../css/cloudPlatform.css"; 39 @import "../css/cloudPlatform.css";
40 40
41 -@import "../css/navTabs.css";  
  41 +@import "../css/navTabs.css";
  42 +
  43 +/*对比分析*/
  44 +@import "../css/analysis.css";
  1 +.analysis-index-container{
  2 + display: flex;
  3 + justify-content: center;
  4 + margin-top: 30px;
  5 +}
  6 +.iconAdd{
  7 + width:50%;
  8 + height:240px;
  9 + color:#00b3fe;
  10 + cursor: pointer;
  11 + border:1px dot-dash #00b3fe;
  12 + display: flex;
  13 + justify-content: center;
  14 + align-items: center;
  15 +}
  16 +/*add页面*/
  17 +.analysis-add-container{
  18 + height: 100%;
  19 + background-color: #f6f6f6;
  20 +}
  21 +.add-top{
  22 + background-color: #FFFFFF;
  23 + padding:20px;
  24 + margin-bottom: 20px;
  25 + width: 100%;
  26 +}
  27 +.add-bottom{
  28 + background-color: #FFFFFF;
  29 + padding:20px 30px;
  30 + width: 100%;
  31 +}
  32 +.classLine{
  33 + width:100%;
  34 +}
  35 +.add-top-title{
  36 + text-align: left;
  37 +}
  38 +.add-top-select{
  39 + display: flex;
  40 + justify-content: space-between;
  41 +}
  42 +.bottom-condition{
  43 + padding:0 20px;
  44 + display: flex;
  45 + flex-flow: column;
  46 + justify-content: space-around;
  47 +}
@@ -58,7 +58,7 @@ @@ -58,7 +58,7 @@
58 } 58 }
59 .screen-left { 59 .screen-left {
60 height: 100%; 60 height: 100%;
61 - width: 30%; 61 + width: 26%;
62 } 62 }
63 .screen-left #left-top { 63 .screen-left #left-top {
64 height: 56%; 64 height: 56%;
@@ -68,9 +68,12 @@ @@ -68,9 +68,12 @@
68 height: 43.8%; 68 height: 43.8%;
69 position: relative; 69 position: relative;
70 } 70 }
  71 +.screen-left #left-bottom .declare-lineChart{
  72 + height: 100%;
  73 +}
71 .screen-middle { 74 .screen-middle {
72 height: 100%; 75 height: 100%;
73 - width: 40%; 76 + width: 44%;
74 margin-top: 0.5%; 77 margin-top: 0.5%;
75 margin-left: 0.2%; 78 margin-left: 0.2%;
76 margin-right: 0.2%; 79 margin-right: 0.2%;
@@ -85,14 +88,16 @@ @@ -85,14 +88,16 @@
85 .width-86{ 88 .width-86{
86 width:86%; 89 width:86%;
87 margin-bottom: 10px; 90 margin-bottom: 10px;
  91 + align-items: flex-end;
88 } 92 }
89 .middle-right{ 93 .middle-right{
90 - flex: 1; 94 + width: 20%;
  95 + /*flex: 1;*/
91 position: relative; 96 position: relative;
92 left: -5%; 97 left: -5%;
93 display: flex; 98 display: flex;
94 flex-flow: column; 99 flex-flow: column;
95 - justify-content: space-around; 100 + justify-content: center;
96 } 101 }
97 .deduction-bottom{ 102 .deduction-bottom{
98 height:40%; 103 height:40%;
@@ -108,8 +113,12 @@ @@ -108,8 +113,12 @@
108 /*height: 32%;*/ 113 /*height: 32%;*/
109 position: relative; 114 position: relative;
110 } 115 }
  116 +.middle-left-declare{
  117 + width:100%;
  118 +}
111 .middle-left-declare-rate{ 119 .middle-left-declare-rate{
112 height: 36%; 120 height: 36%;
  121 + width:86%;
113 122
114 } 123 }
115 .screen-middle #middle-bottom { 124 .screen-middle #middle-bottom {
@@ -130,7 +139,7 @@ @@ -130,7 +139,7 @@
130 } 139 }
131 140
132 .screen-right #right-top { 141 .screen-right #right-top {
133 - height: 32%; 142 + height: 30%;
134 position: relative; 143 position: relative;
135 } 144 }
136 .screen-right #right-center { 145 .screen-right #right-center {
@@ -148,6 +157,9 @@ @@ -148,6 +157,9 @@
148 } 157 }
149 .cpu-dropdown{ 158 .cpu-dropdown{
150 text-align: right; 159 text-align: right;
  160 + position: absolute;
  161 + right: 10px;
  162 + z-index: 1;
151 } 163 }
152 .cpu-dropdown .el-dropdown .el-dropdown-selfdefine{ 164 .cpu-dropdown .el-dropdown .el-dropdown-selfdefine{
153 color:#ffffff; 165 color:#ffffff;
@@ -173,22 +185,22 @@ @@ -173,22 +185,22 @@
173 } 185 }
174 .screen-bottom #bottom-one { 186 .screen-bottom #bottom-one {
175 height: 100%; 187 height: 100%;
176 - width: 25%; 188 + width: 26%;
177 position: relative; 189 position: relative;
178 } 190 }
179 .screen-bottom #bottom-two { 191 .screen-bottom #bottom-two {
180 height: 100%; 192 height: 100%;
181 - width: 25%; 193 + width: 22%;
182 position: relative; 194 position: relative;
183 } 195 }
184 .screen-bottom #bottom-three { 196 .screen-bottom #bottom-three {
185 height: 100%; 197 height: 100%;
186 - width: 25%; 198 + width: 22%;
187 position: relative; 199 position: relative;
188 } 200 }
189 .screen-bottom #bottom-four { 201 .screen-bottom #bottom-four {
190 height: 100%; 202 height: 100%;
191 - width: 25%; 203 + width: 30%;
192 position: relative; 204 position: relative;
193 } 205 }
194 .icon-arrow{ 206 .icon-arrow{
@@ -60,7 +60,7 @@ body{font-size: 15px;} @@ -60,7 +60,7 @@ body{font-size: 15px;}
60 60
61 } 61 }
62 .declare-lineChart{ 62 .declare-lineChart{
63 - height:100%; 63 + height:50%;
64 } 64 }
65 .monitoring-bar{ 65 .monitoring-bar{
66 height:50%; 66 height:50%;
@@ -75,6 +75,7 @@ body{font-size: 15px;} @@ -75,6 +75,7 @@ body{font-size: 15px;}
75 } 75 }
76 .performance-lineChart{ 76 .performance-lineChart{
77 margin-top:30px; 77 margin-top:30px;
  78 + flex: 1;
78 } 79 }
79 .screen-res{ 80 .screen-res{
80 width:45%; 81 width:45%;
@@ -82,6 +83,11 @@ body{font-size: 15px;} @@ -82,6 +83,11 @@ body{font-size: 15px;}
82 .screen-performance{ 83 .screen-performance{
83 width:55%; 84 width:55%;
84 } 85 }
  86 +.performance-container{
  87 + height:100%;
  88 + display: flex;
  89 + flex-flow: column;
  90 +}
85 .performance-container .container-title{ 91 .performance-container .container-title{
86 margin-left:40px; 92 margin-left:40px;
87 } 93 }
@@ -104,6 +104,12 @@ const routes = [{ @@ -104,6 +104,12 @@ 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: '/analysis',
  110 + name: 'analysis',
  111 + // component: () => myImport('views/analysis/components/addIndex/index')
  112 + component: () => myImport('views/analysis/components/add/index')
107 } 113 }
108 ]; 114 ];
109 115
  1 +<div class="analysis-add-container">
  2 + <el-row>
  3 + <div class="add-top">
  4 + <el-row>
  5 + <el-col :span="16" class="add-top-title">
  6 + <el-button type="primary">这里是场景名称</el-button>
  7 + </el-col>
  8 + <el-col :span="8" class="add-top-select">
  9 + <el-dropdown>
  10 + <el-button type="primary">
  11 + 时间范围<el-icon class="el-icon--right"><arrow-down /></el-icon>
  12 + </el-button>
  13 + <template #dropdown>
  14 + <el-dropdown-menu>
  15 + <el-dropdown-item>Action 1</el-dropdown-item>
  16 + <el-dropdown-item>Action 2</el-dropdown-item>
  17 + <el-dropdown-item>Action 3</el-dropdown-item>
  18 + <el-dropdown-item>Action 4</el-dropdown-item>
  19 + <el-dropdown-item>Action 5</el-dropdown-item>
  20 + </el-dropdown-menu>
  21 + </template>
  22 + </el-dropdown>
  23 + <el-dropdown>
  24 + <el-button type="primary">
  25 + 契合频率<el-icon class="el-icon--right"><arrow-down /></el-icon>
  26 + </el-button>
  27 + <template #dropdown>
  28 + <el-dropdown-menu>
  29 + <el-dropdown-item>Action 1</el-dropdown-item>
  30 + <el-dropdown-item>Action 2</el-dropdown-item>
  31 + <el-dropdown-item>Action 3</el-dropdown-item>
  32 + <el-dropdown-item>Action 4</el-dropdown-item>
  33 + <el-dropdown-item>Action 5</el-dropdown-item>
  34 + </el-dropdown-menu>
  35 + </template>
  36 + </el-dropdown>
  37 + <el-button type="primary">保存按钮</el-button>
  38 + </el-col>
  39 + </el-row>
  40 + <el-row>
  41 + <el-col :span="24">
  42 + <div class="classLine">
  43 + <lineChart></lineChart>
  44 + </div>
  45 +
  46 +
  47 + </el-col>
  48 + </el-row>
  49 + </div>
  50 + </el-row>
  51 + <el-row>
  52 + <div class="add-bottom">
  53 + <el-row>
  54 + <el-col :span="6" class="bottom-condition">
  55 + <el-row>
  56 + <el-col :span="24">
  57 + <el-dropdown>
  58 + <el-button >
  59 + 电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
  60 + </el-button>
  61 + <template #dropdown>
  62 + <el-dropdown-menu>
  63 + <el-dropdown-item>Action 1</el-dropdown-item>
  64 + <el-dropdown-item>Action 2</el-dropdown-item>
  65 + <el-dropdown-item>Action 3</el-dropdown-item>
  66 + <el-dropdown-item>Action 4</el-dropdown-item>
  67 + <el-dropdown-item>Action 5</el-dropdown-item>
  68 + </el-dropdown-menu>
  69 + </template>
  70 + </el-dropdown>
  71 + </el-col>
  72 + </el-row>
  73 + <el-row>
  74 + <el-col :span="24">
  75 + <el-dropdown>
  76 + <el-button >
  77 + 资源类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
  78 + </el-button>
  79 + <template #dropdown>
  80 + <el-dropdown-menu>
  81 + <el-dropdown-item>Action 1</el-dropdown-item>
  82 + <el-dropdown-item>Action 2</el-dropdown-item>
  83 + <el-dropdown-item>Action 3</el-dropdown-item>
  84 + <el-dropdown-item>Action 4</el-dropdown-item>
  85 + <el-dropdown-item>Action 5</el-dropdown-item>
  86 + </el-dropdown-menu>
  87 + </template>
  88 + </el-dropdown>
  89 + </el-col>
  90 + </el-row>
  91 + <el-row>
  92 + <el-col :span="24">
  93 + <el-dropdown>
  94 + <el-button >
  95 + 指标类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
  96 + </el-button>
  97 + <template #dropdown>
  98 + <el-dropdown-menu>
  99 + <el-dropdown-item>Action 1</el-dropdown-item>
  100 + <el-dropdown-item>Action 2</el-dropdown-item>
  101 + <el-dropdown-item>Action 3</el-dropdown-item>
  102 + <el-dropdown-item>Action 4</el-dropdown-item>
  103 + <el-dropdown-item>Action 5</el-dropdown-item>
  104 + </el-dropdown-menu>
  105 + </template>
  106 + </el-dropdown>
  107 + </el-col>
  108 + </el-row>
  109 + <el-row>
  110 + <el-col :span="24">
  111 + <el-input v-model="input" placeholder="Please input" />
  112 + </el-col>
  113 + </el-row>
  114 +
  115 + </el-col>
  116 + <el-col :span="18">
  117 + <el-tabs type="border-card">
  118 + <el-tab-pane label="User">
  119 + <el-table :data="tableData" border style="width: 100%">
  120 + <el-table-column prop="date" label="Date" width="180" />
  121 + <el-table-column prop="name" label="Name" width="180" />
  122 + <el-table-column prop="address" label="Address" />
  123 + </el-table>
  124 + </el-tab-pane>
  125 + <el-tab-pane label="Config">Config</el-tab-pane>
  126 + <el-tab-pane label="Role">Role</el-tab-pane>
  127 + <el-tab-pane label="Task">Task</el-tab-pane>
  128 + </el-tabs>
  129 + </el-col>
  130 + </el-row>
  131 + </div>
  132 + </el-row>
  133 +</div>
  1 +export default {
  2 + name: 'addIndex',
  3 + template: '',
  4 + components:{},
  5 + data () {
  6 + return {
  7 + tableData: [
  8 + {
  9 + date: '2016-05-03',
  10 + name: 'Tom',
  11 + address: 'No. 189, Grove St, Los Angeles',
  12 + },
  13 + {
  14 + date: '2016-05-02',
  15 + name: 'Tom',
  16 + address: 'No. 189, Grove St, Los Angeles',
  17 + },
  18 + {
  19 + date: '2016-05-04',
  20 + name: 'Tom',
  21 + address: 'No. 189, Grove St, Los Angeles',
  22 + },
  23 + {
  24 + date: '2016-05-01',
  25 + name: 'Tom',
  26 + address: 'No. 189, Grove St, Los Angeles',
  27 + },
  28 + ],
  29 +
  30 + }
  31 + },
  32 + setup(){
  33 +
  34 + }
  35 +}
  1 +<div class="analysis-index-container">
  2 + <div class="iconAdd">
  3 + 点击添加比对分析
  4 + </div>
  5 +</div>
  1 +export default {
  2 + name: 'addIndex',
  3 + template: '',
  4 + components:{},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 +
  12 + }
  13 +}
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>Title</title>
  6 +</head>
  7 +<body>
  8 +
  9 +</body>
  10 +</html>
  1 +export default {
  2 + name: 'analysis',
  3 + template: '',
  4 + components:{},
  5 + data () {
  6 + return {
  7 +
  8 + }
  9 + },
  10 + setup(){
  11 +
  12 + }
  13 +}
@@ -8,177 +8,165 @@ export default { @@ -8,177 +8,165 @@ export default {
8 }, 8 },
9 data(){ 9 data(){
10 return { 10 return {
  11 + titleFontSize:20,
11 domainName:sessionStorage.getItem('domainName'), 12 domainName:sessionStorage.getItem('domainName'),
12 apiUrl:'/api-web/sxview/getBusinessAvailability', 13 apiUrl:'/api-web/sxview/getBusinessAvailability',
13 - resourceStatisticsData:'', 14 + kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
  15 + busId:'247c0c978f574285bf642f55611ea75d',
  16 + performanceData:'',
  17 + xAxisData:'',
  18 + yAxisData:'',
14 optionData:'', 19 optionData:'',
15 - ySeriesCommon:[],  
16 - titleFontSize: 30, 20 + ySeriesCommon:[]
17 21
18 } 22 }
19 }, 23 },
20 computed: { 24 computed: {
21 comtitleTextStyle () { 25 comtitleTextStyle () {
22 return { 26 return {
23 - fontSize: this.titleFontSize / 1.2 + 'px' 27 + fontSize: this.titleFontSize / 2.1 + 'px'
24 } 28 }
25 }, 29 },
26 comtitleImgStyle () { 30 comtitleImgStyle () {
27 return { 31 return {
28 - height: this.titleFontSize * 2.1 + 'px' 32 + height: this.titleFontSize * 1.8 + 'px'
29 } 33 }
30 } 34 }
31 }, 35 },
32 setup(props, {attrs, slots, emit}) { 36 setup(props, {attrs, slots, emit}) {
33 const {proxy} = Vue.getCurrentInstance(); 37 const {proxy} = Vue.getCurrentInstance();
  38 + const xAxisData=Vue.ref();
  39 + const yAxisData=Vue.ref([]);
  40 + const legendData=Vue.ref([]);
34 41
35 - 42 + // 半透明的颜色值
  43 + const colorArr1 = [
  44 + 'rgba(151,213,244, 0.8)',
  45 + 'rgba(239,224,167, 0.8)',
  46 + 'rgba(229,171,209, 0.8)',
  47 + 'rgba(151,170,255, 0.8)'
  48 + ]
  49 + // 全透明的颜色值
  50 + const colorArr2 = [
  51 + 'rgba(151,213,244, 0)',
  52 + 'rgba(239,224,167, 0)',
  53 + 'rgba(229,171,209, 0)',
  54 + 'rgba(151,170,255, 0)'
  55 + ]
36 // 挂载完 56 // 挂载完
37 -  
38 Vue.onMounted(() => { 57 Vue.onMounted(() => {
39 proxy.screenAdapter(); 58 proxy.screenAdapter();
40 proxy.getData(); 59 proxy.getData();
41 60
42 }) 61 })
43 - const getData=()=> {  
44 - $.get(proxy.domainName + proxy.apiUrl, function (res) { 62 + const getData=()=>{
  63 + let params = {
  64 + kpiIds: proxy.kpiIds,
  65 + busId: proxy.busId,
  66 + startTime:'',
  67 + endTime:'',
  68 + access_token:localStorage.getItem('access_token')
  69 + };
  70 + $.get(proxy.domainName +proxy.apiUrl,params,function (res) {
45 const data = res; 71 const data = res;
46 - if (data && data.data) {  
47 - let resData = data.data; 72 + if (data ) {
  73 + if(data.map){
  74 + let resData=data.map;
  75 + proxy.legendData=resData.legend;
  76 + proxy.xAxisData=resData.x;
  77 + proxy.yAxisData=resData.y;
  78 + }else{
  79 + let nullArr=[];
  80 + for(let i=0;i<4;i++){
  81 + nullArr.push(i)
  82 + proxy.legendData.push({
  83 + name:''
  84 + })
  85 + }
  86 + proxy.xAxisData=nullArr;
  87 + for(let i=0;i<4;i++){
  88 + proxy.yAxisData.push(nullArr);
  89 +
  90 + }
  91 +
  92 + }
  93 +
  94 +
  95 + proxy.optionInit();
48 96
49 } 97 }
50 - // proxy.optionInit();  
51 98
52 }) 99 })
  100 + // proxy.optionInit();
53 101
54 - proxy.optionInit();  
55 } 102 }
56 103
57 - const optionInit=()=>{ 104 + const optionInit=()=>{
58 105
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]; 106 + let data3=proxy.yAxisData[0];
  107 + let data4=proxy.yAxisData[3];
  108 + let data2=proxy.yAxisData[2];
  109 + let data1=proxy.yAxisData[1];
63 110
64 let min1=proxy.calMin([data1,data2]); 111 let min1=proxy.calMin([data1,data2]);
65 let max1=proxy.calMax([data1,data2]); 112 let max1=proxy.calMax([data1,data2]);
66 let min2=proxy.calMin([data3,data4]); 113 let min2=proxy.calMin([data3,data4]);
67 let max2=proxy.calMax([data3,data4]); 114 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 - },  
101 - },  
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 - }  
118 - }  
119 - },  
120 - areaStyle: {  
121 - color:'rgba(239,224,167,0)'  
122 - },  
123 - },  
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 115 + proxy.legendData.map((item,index)=>{
  116 + let i=0;
  117 + if(index%2==0 ||index%3==0){
  118 + i=0;
  119 + }else{
  120 + i=1;
  121 + }
  122 + proxy.ySeriesCommon.push(
  123 + {
  124 + name:item,
  125 + type: 'line',
  126 + smooth:true,
  127 + // stack: 'Total',
  128 + show:false,
  129 + data:proxy.yAxisData[index],
  130 + yAxisIndex:i,
  131 + showSymbol:false,
  132 + itemStyle : {
  133 + normal : {
  134 + color:colorArr1[index],//tooltip里的小圆点颜色
  135 + lineStyle:{
  136 + color:colorArr1[index],
  137 + width:1
  138 + }
139 } 139 }
140 - }  
141 - },  
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, 140 + },
  141 + areaStyle: {
  142 + // color:'rgba(151,213,244,0.4)',
  143 + normal:{
  144 + color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
  145 + offset: 0,
  146 + color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
  147 + }, {
  148 + offset: 1,
  149 + color: colorArr2[index]
  150 + }])
161 } 151 }
162 - }  
163 - },  
164 - areaStyle: {  
165 - color:'rgba(151,170,255,0)' 152 +
  153 + },
166 }, 154 },
167 - }  
168 - ] 155 + )
  156 + })
  157 + //业务双y轴数据
  158 +
169 // let xAxisDataLength=proxy.ySeriesCommon[0].length; 159 // let xAxisDataLength=proxy.ySeriesCommon[0].length;
170 let xAxisData=[]; 160 let xAxisData=[];
171 - for(let i=0;i<=24;i++){  
172 - if(i%4==0){  
173 - xAxisData.push(i+':00') 161 + if(proxy.xAxisData){
  162 + proxy.xAxisData.map((item,index)=>{
  163 + if(index%20==0){
  164 + xAxisData.push(item)
  165 +
  166 + }
  167 + })
174 168
175 - }  
176 } 169 }
177 - let legendData=[];  
178 - $.each(proxy.ySeriesCommon,function (i,v){  
179 - legendData.push(v.name)  
180 - })  
181 - proxy.legendData=legendData;  
182 proxy.optionData = { 170 proxy.optionData = {
183 title: { 171 title: {
184 text: '' 172 text: ''
@@ -308,6 +296,9 @@ export default { @@ -308,6 +296,9 @@ export default {
308 calMin, 296 calMin,
309 optionInit, 297 optionInit,
310 getData, 298 getData,
  299 + xAxisData,
  300 + yAxisData,
  301 + legendData,
311 screenAdapter 302 screenAdapter
312 } 303 }
313 } 304 }
1 export default { 1 export default {
2 name: 'BandwidthCpu', 2 name: 'BandwidthCpu',
3 template: '', 3 template: '',
  4 + props:['commandVal'],
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')
@@ -8,28 +9,22 @@ export default { @@ -8,28 +9,22 @@ export default {
8 }, 9 },
9 data () { 10 data () {
10 return { 11 return {
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + apiUrl:'/api-web/bigScreen/monitoring?function=',
11 optionData:'', 14 optionData:'',
12 - allData: {  
13 - polyline: {  
14 - title: "带宽占用监控",  
15 - unit: "MB",  
16 - data: [{  
17 - name: "入带宽",  
18 - data: ["12","15","21","18","20","37","45","23","12","5","7","14"]  
19 - }, {  
20 - name: "出带宽",  
21 - data: ["22","35","41","68","70","57","45","33","24","15","7","10"]  
22 - }]  
23 - },  
24 - xAxis: {  
25 - today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]  
26 - }  
27 - }, 15 + allData: '',
  16 + newCommandVal:this.commandVal,
28 startValue: 0, // 区域缩放的起点值 17 startValue: 0, // 区域缩放的起点值
29 endValue: 6, // 区域缩放的终点值 18 endValue: 6, // 区域缩放的终点值
30 timerId: null // 定时器的标识 19 timerId: null // 定时器的标识
31 } 20 }
32 }, 21 },
  22 + setUp(){
  23 + const allData=ref({});
  24 + return{
  25 + allData
  26 + }
  27 + },
33 mounted () { 28 mounted () {
34 this.getData() 29 this.getData()
35 window.addEventListener('resize', this.screenAdapter) 30 window.addEventListener('resize', this.screenAdapter)
@@ -39,15 +34,60 @@ export default { @@ -39,15 +34,60 @@ export default {
39 window.removeEventListener('resize', this.screenAdapter) 34 window.removeEventListener('resize', this.screenAdapter)
40 clearInterval(this.timerId) 35 clearInterval(this.timerId)
41 }, 36 },
  37 + watch:{
  38 + commandVal(newValue, oldValue) {
  39 + this.newCommandVal=newValue
  40 + this.getData()
  41 + }
  42 +
  43 + },
42 methods: { 44 methods: {
43 45
44 - async getData () {  
45 - // await this.$http.get()  
46 - // const { data: ret } = await this.$http.get('bandwidthcpu')  
47 - // this.allData = ret  
48 - // console.log(ret)  
49 - this.updateChart()  
50 - this.startInterval() 46 + getData () {
  47 + let that=this;
  48 + $.get(this.domainName +this.apiUrl+this.newCommandVal,function (ret){
  49 + if(ret){
  50 + let dataArr=[];
  51 + let xAxisData=[];
  52 + if(ret.ports && ret.ports.length>1 ){
  53 + ret.ports.map((item,index)=>{
  54 +
  55 + dataArr.push({
  56 + name:item.name,
  57 + data:item.data.y,
  58 + })
  59 +
  60 + })
  61 + xAxisData=ret.ports[0].x
  62 + }else{
  63 + for(let i=0;i<12;i++){
  64 + dataArr.push('0')
  65 + }
  66 + }
  67 +
  68 + that.allData= {
  69 + polyline: {
  70 + title: "带宽占用监控",
  71 + unit: "MB",
  72 + data:dataArr
  73 + /*data: [{
  74 + name: "入带宽",
  75 + data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
  76 + }, {
  77 + name: "出带宽",
  78 + data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
  79 + }]*/
  80 + },
  81 + xAxis: {
  82 + // today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
  83 + today: xAxisData
  84 + }
  85 + }
  86 + that.updateChart()
  87 + that.startInterval()
  88 + }
  89 +
  90 + })
51 }, 91 },
52 updateChart () { 92 updateChart () {
53 // 半透明的颜色值 93 // 半透明的颜色值
@@ -84,7 +84,6 @@ export default { @@ -84,7 +84,6 @@ export default {
84 }) 84 })
85 this.allData = retData 85 this.allData = retData
86 86
87 - console.log('111',this.allData)  
88 this.updateChart() 87 this.updateChart()
89 }, 88 },
90 updateChart () { 89 updateChart () {
@@ -92,18 +91,27 @@ export default { @@ -92,18 +91,27 @@ export default {
92 ['22%', '65%'], 91 ['22%', '65%'],
93 ['66%', '65%'] 92 ['66%', '65%']
94 ] 93 ]
  94 +
95 const seriesArr = this.allData.map((item, index) => { 95 const seriesArr = this.allData.map((item, index) => {
96 const dataArr = [] 96 const dataArr = []
97 - item.data.map(inner => {  
98 - console.log(inner) 97 + if(item.data){
  98 + item.data.map(inner => {
  99 + dataArr.push({
  100 + name: inner.name,
  101 + value: inner.num,
  102 + /*itemStyle: {
  103 + color: this.colorData[index]
  104 + }*/
  105 + })
  106 + })
  107 + }else{
99 dataArr.push({ 108 dataArr.push({
100 - name: inner.name,  
101 - value: inner.num,  
102 - /*itemStyle: {  
103 - color: this.colorData[index]  
104 - }*/ 109 + name: '暂无数据',
  110 + value: 0
  111 +
105 }) 112 })
106 - }) 113 + }
  114 +
107 return { 115 return {
108 type: 'pie', 116 type: 'pie',
109 radius: ['28%', '42%'], 117 radius: ['28%', '42%'],
@@ -122,8 +130,6 @@ export default { @@ -122,8 +130,6 @@ export default {
122 data: dataArr 130 data: dataArr
123 } 131 }
124 }) 132 })
125 - console.log("8**",seriesArr)  
126 -  
127 const dataOption = { 133 const dataOption = {
128 series: seriesArr 134 series: seriesArr
129 } 135 }
@@ -16,10 +16,10 @@ export default { @@ -16,10 +16,10 @@ export default {
16 unit: "cpu%", 16 unit: "cpu%",
17 data: [{ 17 data: [{
18 name: "80.12.97.2", 18 name: "80.12.97.2",
19 - data: ["12","15","21","18","20","37","45","23","12","5","7","14"] 19 + datas: ["12","15","21","18","20","37","45","23","12","5","7","14"]
20 }, { 20 }, {
21 name: "80.12.77.3", 21 name: "80.12.77.3",
22 - data: ["22","35","41","68","70","57","45","33","24","15","7","10"] 22 + datas: ["22","35","41","68","70","57","45","33","24","15","7","10"]
23 }] 23 }]
24 }, 24 },
25 xAxis: { 25 xAxis: {
@@ -30,6 +30,9 @@ export default { @@ -30,6 +30,9 @@ export default {
30 endValue: 9, // 区域缩放的终点值 30 endValue: 9, // 区域缩放的终点值
31 timerId: null, // 定时器的标识 31 timerId: null, // 定时器的标识
32 titleFontSize: 30, 32 titleFontSize: 30,
  33 + kpiIds:'KPI20352505',
  34 + resId:'4c582c0603654352ba4f905e88a56863',
  35 + resId1:'adeeddd6023a4157be523ac5d3b60ed6',
33 36
34 curve: 'KPIDA0ACBBP', 37 curve: 'KPIDA0ACBBP',
35 rateTitle: 'KPIDA0ACBBK', 38 rateTitle: 'KPIDA0ACBBK',
@@ -49,23 +52,81 @@ export default { @@ -49,23 +52,81 @@ export default {
49 clearInterval(this.timerId) 52 clearInterval(this.timerId)
50 }, 53 },
51 methods: { 54 methods: {
52 -  
53 - getData (that) { 55 + getData1(that){
54 const { proxy } = Vue.getCurrentInstance(); 56 const { proxy } = Vue.getCurrentInstance();
55 - /* var params = {  
56 - curve: that.curve,  
57 - rateTitle: that.rateTitle,  
58 - numerTitle: that.numerTitle 57 +
  58 + var params = {
  59 + resId: that.resId1,
  60 + kpiIds: that.kpiIds,
  61 + subResId: 'vmem',
  62 + startTime:'',
  63 + endTime:'',
  64 + access_token:localStorage.getItem("access_token")
59 }; 65 };
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; 66 + // proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
  67 + var res={
  68 + code:'0',
  69 + data:{
  70 + kpiUnit:'%',
  71 + names:['20:10','21:10','22:15','23:15'],
  72 + series:[
  73 + {
  74 + name:'89.12.97.3',
  75 + datas:[0.8,1,1,1,1,0.7,1,1],
  76 + flag:'vmem'
  77 + }
  78 + ]
  79 + }
  80 + }
  81 + if(res && res.data){
  82 + let resData=res.data;
  83 + that.allData.polyline.data.push(resData.series)
64 that.updateChart() 84 that.updateChart()
  85 +
65 } 86 }
66 - });*/  
67 - that.updateChart() 87 + // });
  88 + },
68 89
  90 + getData (that) {
  91 + const { proxy } = Vue.getCurrentInstance();
  92 + var params = {
  93 + resId: that.resId,
  94 + kpiIds: that.kpiIds,
  95 + subResId: 'vmem',
  96 + startTime:'',
  97 + endTime:'',
  98 + access_token:localStorage.getItem("access_token")
  99 + };
  100 + // proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
  101 + var res={
  102 + code:'0',
  103 + data:{
  104 + kpiUnit:'%',
  105 + names:['20:10','21:10','22:15','23:15'],
  106 + series:[
  107 + {
  108 + name:'89.12.97.2',
  109 + datas:[1,1,1,1,1,1,1,1],
  110 + flag:'vmem'
  111 + }
  112 + ]
  113 + }
  114 + }
  115 + if(res && res.data){
  116 + let resData=res.data;
  117 + that.allData = {
  118 + polyline: {
  119 + title: "申报库CPU监控",
  120 + unit: "cpu%",
  121 + data: resData.series
  122 + },
  123 + xAxis: {
  124 + today:resData.names
  125 + }
  126 + };
  127 + that.getData1(that)
  128 + }
  129 + // });
69 130
70 }, 131 },
71 updateChart () { 132 updateChart () {
@@ -89,15 +150,16 @@ export default { @@ -89,15 +150,16 @@ export default {
89 ] 150 ]
90 const timeArr = this.allData.xAxis.today 151 const timeArr = this.allData.xAxis.today
91 const seriesArr = this.allData.polyline.data; 152 const seriesArr = this.allData.polyline.data;
  153 + const title=this.allData.polyline.title;
  154 + const unit=this.allData.polyline.unit;
92 155
93 - this.declareNumer = this.allData.polyline.declareNumer  
94 let seriesData=[]; 156 let seriesData=[];
95 157
96 $.each(seriesArr,function (index,item){ 158 $.each(seriesArr,function (index,item){
97 seriesData .push({ 159 seriesData .push({
98 name: item.name, 160 name: item.name,
99 type: 'line', 161 type: 'line',
100 - data: item.data, 162 + data: item.datas,
101 smooth: true, 163 smooth: true,
102 showSymbol:false, 164 showSymbol:false,
103 itemStyle : { 165 itemStyle : {
@@ -137,7 +199,7 @@ export default { @@ -137,7 +199,7 @@ export default {
137 let xAxisData=timeArr; 199 let xAxisData=timeArr;
138 this.optionData = { 200 this.optionData = {
139 title: { 201 title: {
140 - text: '申报库CPU监控', 202 + text: title,
141 left: 'center', 203 left: 'center',
142 bottom: '8%', 204 bottom: '8%',
143 textStyle: { 205 textStyle: {
@@ -87,7 +87,6 @@ export default { @@ -87,7 +87,6 @@ export default {
87 }; 87 };
88 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) { 88 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
89 if(res.success){ 89 if(res.success){
90 - console.log('9**',res.obj)  
91 that.allData = res.obj; 90 that.allData = res.obj;
92 that.updateChart() 91 that.updateChart()
93 // that.startInterval() 92 // that.startInterval()
@@ -158,9 +157,10 @@ export default { @@ -158,9 +157,10 @@ export default {
158 157
159 }, 158 },
160 grid: { 159 grid: {
  160 + top:'3%',
161 left: '3%', 161 left: '3%',
162 right: '4%', 162 right: '4%',
163 - bottom: '3%', 163 + bottom: '2%',
164 containLabel: true, 164 containLabel: true,
165 }, 165 },
166 xAxis: { 166 xAxis: {
1 -<div class="declare-report">  
2 - <div class="declare-report-top" :style="comtitlesizeStyle"> 1 +<div class="declare-report" >
  2 + <div class="declare-report-top" :style="comtitlesizeStyle" id="declareReport_ref">
3 <el-row> 3 <el-row>
4 <el-col :span="24"> 4 <el-col :span="24">
5 <div class="grid-content bg-purple-dark"> 5 <div class="grid-content bg-purple-dark">
1 export default { 1 export default {
2 - name: 'declarePolyline', 2 + name: 'declareReport',
3 template: '', 3 template: '',
4 components: {}, 4 components: {},
5 data () { 5 data () {
@@ -19,27 +19,29 @@ export default { @@ -19,27 +19,29 @@ export default {
19 comtitletextStyle () { 19 comtitletextStyle () {
20 return { 20 return {
21 color: '#23ffff', 21 color: '#23ffff',
22 - fontSize: this.titleFontSize / 1.2 + 'px' 22 + fontSize: this.titleFontSize * 3 + 'px'
23 } 23 }
24 }, 24 },
25 comtitlesizeStyle () { 25 comtitlesizeStyle () {
26 return { 26 return {
27 - fontSize: this.titleFontSize / 2 + 'px' 27 + fontSize: this.titleFontSize *2 + 'px'
28 } 28 }
29 }, 29 },
30 comimgsizeStyle () { 30 comimgsizeStyle () {
31 return { 31 return {
32 - width: this.titleFontSize / 1.5 + 'px' 32 + width: this.titleFontSize * 3 + 'px'
33 } 33 }
34 }, 34 },
35 comboxtextStyle () { 35 comboxtextStyle () {
36 return { 36 return {
37 - fontSize: this.titleFontSize / 3 + 'px' 37 + fontSize: this.titleFontSize * 2 + 'px'
38 } 38 }
39 } 39 }
40 }, 40 },
41 mounted () { 41 mounted () {
42 this.getData(this) 42 this.getData(this)
  43 + window.addEventListener('resize', this.screenAdapter)
  44 + this.screenAdapter()
43 }, 45 },
44 46
45 methods: { 47 methods: {
@@ -52,7 +54,6 @@ export default { @@ -52,7 +54,6 @@ export default {
52 }; 54 };
53 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) { 55 proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
54 if(res.success){ 56 if(res.success){
55 - console.log('111',res.obj)  
56 that.allData = res.obj; 57 that.allData = res.obj;
57 const declareRate = that.allData.polyline.declareRate 58 const declareRate = that.allData.polyline.declareRate
58 if(declareRate.indexOf('.') > 0){ 59 if(declareRate.indexOf('.') > 0){
@@ -65,6 +66,9 @@ export default { @@ -65,6 +66,9 @@ export default {
65 } 66 }
66 }); 67 });
67 68
  69 + },
  70 + screenAdapter () {
  71 + this.titleFontSize = document.getElementById('declareReport_ref').offsetWidth / 100 * 3.6
68 } 72 }
69 73
70 } 74 }
@@ -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: 30, 9 + titleFontSize: 20,
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 * 12.5 + 'px', 22 + height: this.titleFontSize *10 + 'px',
23 // marginTop: this.titleFontSize * 3.5 + 'px', 23 // marginTop: this.titleFontSize * 3.5 + 'px',
24 // marginLeft: this.titleFontSize + 'px' 24 // marginLeft: this.titleFontSize + 'px'
25 } 25 }
26 }, 26 },
27 comboximgrightStyle () { 27 comboximgrightStyle () {
28 return { 28 return {
29 - height: this.titleFontSize * 12.5 + 'px', 29 + height: this.titleFontSize *10 + 'px',
30 // marginTop: this.titleFontSize * 3.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 *3.5 + 'px' 35 + fontSize: this.titleFontSize + 'px'
36 } 36 }
37 }, 37 },
38 comtitlesizeStyle () { 38 comtitlesizeStyle () {
39 return { 39 return {
40 - height: this.titleFontSize * 8.5 + 'px', 40 + height: this.titleFontSize * 7 + '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 *3.3 + 'px' 46 + fontSize: this.titleFontSize /1.3 + 'px'
47 } 47 }
48 }, 48 },
49 comnumberTextStyle () { 49 comnumberTextStyle () {
50 return { 50 return {
51 - fontSize: this.titleFontSize *3.2 + 'px' 51 + fontSize: this.titleFontSize /0.5 + 'px'
52 } 52 }
53 }, 53 },
54 comnumberUnitStyle () { 54 comnumberUnitStyle () {
55 return { 55 return {
56 - fontSize: this.titleFontSize * 2 + 'px' 56 + fontSize: this.titleFontSize / 0.6 + 'px'
57 } 57 }
58 } 58 }
59 }, 59 },
@@ -6,8 +6,8 @@ @@ -6,8 +6,8 @@
6 <div class="grid-content bg-purple" style="text-align:left;"> 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">  
10 - <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span> 9 + <img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-month-1.png">
  10 +<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
11 </span> 11 </span>
12 </div> 12 </div>
13 </el-col> 13 </el-col>
@@ -39,17 +39,17 @@ export default { @@ -39,17 +39,17 @@ export default {
39 computed: { 39 computed: {
40 comboximgStyle () { 40 comboximgStyle () {
41 return { 41 return {
42 - height: this.titleFontSize * 4.5 + 'px' 42 + height: this.titleFontSize * 4.3 + 'px'
43 } 43 }
44 }, 44 },
45 comTitleimgStyle () { 45 comTitleimgStyle () {
46 return { 46 return {
47 - width: this.titleFontSize * 12 + 'px' 47 + width: this.titleFontSize * 10 + 'px'
48 } 48 }
49 }, 49 },
50 comTitleSizeStyle () { 50 comTitleSizeStyle () {
51 return { 51 return {
52 - fontSize: this.titleFontSize / 1.5 + 'px' 52 + fontSize: this.titleFontSize / 1.6 + 'px'
53 } 53 }
54 }, 54 },
55 comtitlimgStyle () { 55 comtitlimgStyle () {
@@ -153,7 +153,6 @@ export default { @@ -153,7 +153,6 @@ export default {
153 }; 153 };
154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) { 154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
155 if(res.success){ 155 if(res.success){
156 - console.log(res.map)  
157 const map = res.map 156 const map = res.map
158 // 左边数 157 // 左边数
159 if(map.leftNumber){ 158 if(map.leftNumber){
@@ -194,7 +193,6 @@ export default { @@ -194,7 +193,6 @@ export default {
194 let xs = num[1] 193 let xs = num[1]
195 // 整数部分处理，增加, 194 // 整数部分处理，增加,
196 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') 195 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
197 - console.log("444",intPartFormat)  
198 if (xs != null) { 196 if (xs != null) {
199 if(places == 0){ 197 if(places == 0){
200 return intPartFormat + '.' + xs 198 return intPartFormat + '.' + xs
@@ -6,8 +6,8 @@ @@ -6,8 +6,8 @@
6 <div class="grid-content bg-purple" style="text-align:left;"> 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">  
10 - <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span> 9 + <img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-today.png">
  10 +<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
11 </span> 11 </span>
12 </div> 12 </div>
13 </el-col> 13 </el-col>
@@ -39,17 +39,17 @@ export default { @@ -39,17 +39,17 @@ export default {
39 computed: { 39 computed: {
40 comboximgStyle () { 40 comboximgStyle () {
41 return { 41 return {
42 - height: this.titleFontSize * 4.5 + 'px' 42 + height: this.titleFontSize * 4.3 + 'px'
43 } 43 }
44 }, 44 },
45 comTitleimgStyle () { 45 comTitleimgStyle () {
46 return { 46 return {
47 - width: this.titleFontSize * 12 + 'px' 47 + width: this.titleFontSize * 10 + 'px'
48 } 48 }
49 }, 49 },
50 comTitleSizeStyle () { 50 comTitleSizeStyle () {
51 return { 51 return {
52 - fontSize: this.titleFontSize / 1.5 + 'px' 52 + fontSize: this.titleFontSize / 1.6 + 'px'
53 } 53 }
54 }, 54 },
55 comtitlimgStyle () { 55 comtitlimgStyle () {
@@ -153,15 +153,12 @@ export default { @@ -153,15 +153,12 @@ export default {
153 }; 153 };
154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) { 154 proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
155 if(res.success){ 155 if(res.success){
156 - console.log(res.map)  
157 const map = res.map 156 const map = res.map
158 // 左边数 157 // 左边数
159 - console.log(map.leftNumber)  
160 if(map.leftNumber){ 158 if(map.leftNumber){
161 that.declaredAmountNumber = map.leftNumber 159 that.declaredAmountNumber = map.leftNumber
162 } 160 }
163 // 右边数 161 // 右边数
164 - console.log(map.rightNumber)  
165 if(map.rightNumber){ 162 if(map.rightNumber){
166 that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1) 163 that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
167 } 164 }
@@ -196,7 +193,6 @@ export default { @@ -196,7 +193,6 @@ export default {
196 let xs = num[1] 193 let xs = num[1]
197 // 整数部分处理，增加, 194 // 整数部分处理，增加,
198 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') 195 const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
199 - console.log("444",intPartFormat)  
200 if (xs != null) { 196 if (xs != null) {
201 if(places == 0){ 197 if(places == 0){
202 return intPartFormat + '.' + xs 198 return intPartFormat + '.' + xs
1 <div class="com-container" id="responsemonitor_ref"> 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 2
14 - </el-dropdown-menu>  
15 - </template>  
16 - </el-dropdown>  
17 - </div>  
18 <!-- <div class="com-chart" id="responsemonitor_ref"></div>--> 3 <!-- <div class="com-chart" id="responsemonitor_ref"></div>-->
19 - <LineChart :optionData="optionData" v-if="optionData"></LineChart> 4 + <LineChart :optionData="optionData" v-if="optionData" ref="responseLine"></LineChart>
20 5
21 </div> 6 </div>
1 export default { 1 export default {
2 name: 'ResponseMonitor', 2 name: 'ResponseMonitor',
3 template: '', 3 template: '',
  4 + props:['commandVal'],
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')
@@ -8,28 +9,28 @@ export default { @@ -8,28 +9,28 @@ export default {
8 }, 9 },
9 data () { 10 data () {
10 return { 11 return {
  12 + domainName:sessionStorage.getItem('domainName'),
  13 + apiUrl:'/api-web/bigScreen/monitoring?function=',
11 optionData:'', 14 optionData:'',
12 titleFontSize:'30', 15 titleFontSize:'30',
13 - allData: {  
14 - polyline: {  
15 - title: "系统响应请求数监控",  
16 - unit: "MB",  
17 - data: {  
18 - name: "请求相应数/秒",  
19 - data: ["1200","1500","2100","1800","2000","3700","4500","2300","1200","500","700","140"]  
20 - }  
21 - },  
22 - xAxis: {  
23 - today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]  
24 - }  
25 - }, 16 + allData: '',
  17 + newCommandVal:this.commandVal,
26 startValue: 0, // 区域缩放的起点值 18 startValue: 0, // 区域缩放的起点值
27 endValue: 6, // 区域缩放的终点值 19 endValue: 6, // 区域缩放的终点值
28 timerId: null // 定时器的标识 20 timerId: null // 定时器的标识
29 } 21 }
30 }, 22 },
  23 + setUp(){
  24 + const allData=ref({});
  25 + // const commandVal=ref();
  26 + // const optionData=ref({});
  27 + return{
  28 + allData,
  29 + // optionData
  30 + // commandVal
  31 + }
  32 + },
31 mounted () { 33 mounted () {
32 - this.initChart()  
33 this.getData() 34 this.getData()
34 window.addEventListener('resize', this.screenAdapter) 35 window.addEventListener('resize', this.screenAdapter)
35 this.screenAdapter() 36 this.screenAdapter()
@@ -38,53 +39,54 @@ export default { @@ -38,53 +39,54 @@ export default {
38 window.removeEventListener('resize', this.screenAdapter) 39 window.removeEventListener('resize', this.screenAdapter)
39 clearInterval(this.timerId) 40 clearInterval(this.timerId)
40 }, 41 },
  42 + watch:{
  43 + commandVal(newValue, oldValue) {
  44 + this.newCommandVal=newValue
  45 + this.getData()
  46 + }
  47 +
  48 + },
41 methods: { 49 methods: {
42 - initChart () {  
43 - /* this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref'))  
44 - const initOption = {  
45 - grid: {  
46 - top: '15%',  
47 - left: '5%',  
48 - right: '4%',  
49 - bottom: '3%',  
50 - containLabel: true  
51 - },  
52 - legend: {  
53 - right: '2%',  
54 - top: '5%'  
55 - },  
56 - xAxis: {  
57 - type: 'category',  
58 - boundaryGap: false,  
59 - axisLabel: {  
60 - textStyle: {  
61 - color: '#E6E8EB'  
62 - } 50 + getData () {
  51 + let that=this;
  52 + // await this.$http.get()
  53 + // const { data: ret } = await proxy.$http.get('bigScreen/monitoring?function=')
  54 + $.get(this.domainName +this.apiUrl+this.newCommandVal,(ret)=>{
  55 + if(ret){
  56 + let dataArr=[];
  57 + let xAxisData='';
  58 + if(ret.concurrence){
  59 + dataArr=ret.concurrence.data.y
  60 + xAxisData=ret.concurrence.data.x
  61 + }else{
  62 + for(let i=0;i<12;i++){
  63 + dataArr.push('0')
63 } 64 }
64 - },  
65 - yAxis: {  
66 - type: 'value',  
67 - splitLine: {  
68 - show: false  
69 - },  
70 - axisLabel: {  
71 - textStyle: {  
72 - color: '#E6E8EB' 65 +
  66 + }
  67 +
  68 + that.allData= {
  69 + polyline: {
  70 + title:"系统响应请求数监控",
  71 + unit: "MB",
  72 + data: {
  73 + name: "请求相应数/秒",
  74 + data: dataArr
73 } 75 }
  76 + },
  77 + xAxis: {
  78 + // today: ["10", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
  79 + today:xAxisData
74 } 80 }
75 } 81 }
  82 + that.updateChart()
  83 + that.startInterval()
76 } 84 }
77 - this.chartInstance.setOption(initOption)*/  
78 - },  
79 - async getData () {  
80 - // await this.$http.get()  
81 - // const { data: ret } = await this.$http.get('responsemonitor')  
82 - // this.allData = ret  
83 - // console.log(ret)  
84 - this.updateChart()  
85 - this.startInterval() 85 + })
  86 +
86 }, 87 },
87 updateChart () { 88 updateChart () {
  89 + console.log("ddd",this.allData)
88 // 半透明的颜色值 90 // 半透明的颜色值
89 const colorArr1 = [ 91 const colorArr1 = [
90 'rgba(11, 168, 44, 0.5)', 92 'rgba(11, 168, 44, 0.5)',
@@ -106,7 +108,6 @@ export default { @@ -106,7 +108,6 @@ export default {
106 const timeArr = this.allData.xAxis.today 108 const timeArr = this.allData.xAxis.today
107 const seriesData = this.allData.polyline.data.data 109 const seriesData = this.allData.polyline.data.data
108 const seriesName = this.allData.polyline.data.name 110 const seriesName = this.allData.polyline.data.name
109 - console.log(seriesName)  
110 // 图例的数据 111 // 图例的数据
111 // const legendArr = this.allData.polyline.data.map(item => { 112 // const legendArr = this.allData.polyline.data.map(item => {
112 // return item.name 113 // return item.name
@@ -205,6 +206,7 @@ export default { @@ -205,6 +206,7 @@ export default {
205 }; 206 };
206 207
207 }, 208 },
  209 +
208 screenAdapter () { 210 screenAdapter () {
209 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6 211 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
210 const adapterOption = { 212 const adapterOption = {
@@ -138,7 +138,6 @@ export default { @@ -138,7 +138,6 @@ export default {
138 kpiIdValue: that.kpiIdValue 138 kpiIdValue: that.kpiIdValue
139 }; 139 };
140 proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) { 140 proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
141 - console.log(res.data)  
142 if(res.success){ 141 if(res.success){
143 that.allData = res.data 142 that.allData = res.data
144 that.updateChart() 143 that.updateChart()
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/images/digitalDp/header_border_dark.png" alt=""> 4 + <img style="width: 100%" src="/vue3/src/assets/images/digitalDp/head-bg.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">
8 - <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog"> 8 + <img src="/vue3/src/assets/images/digitalDp/icon-time.png" :style="timelogoStyle" class="timelog">
9 <span :style="datetimeStyle" >{{dateTime}}</span> 9 <span :style="datetimeStyle" >{{dateTime}}</span>
10 </div> 10 </div>
11 </header> 11 </header>
@@ -66,8 +66,24 @@ @@ -66,8 +66,24 @@
66 <Availability></Availability> 66 <Availability></Availability>
67 </div> 67 </div>
68 <div id="right-bottom"> 68 <div id="right-bottom">
  69 + <div class="cpu-dropdown">
  70 + <el-dropdown @command="handleCommand" >
  71 + <span class="el-dropdown-link">
  72 + {{commandName}}
  73 + <i class="icon-arrow"></i>
  74 + </span>
  75 + <template #dropdown>
  76 + <el-dropdown-menu class="cpuDropdown">
  77 + <el-dropdown-item command="max">最大值</el-dropdown-item>
  78 + <el-dropdown-item command="avg">平均值</el-dropdown-item>
  79 + <el-dropdown-item command="min">最小值</el-dropdown-item>
  80 +
  81 + </el-dropdown-menu>
  82 + </template>
  83 + </el-dropdown>
  84 + </div>
69 <!-- 系统响应监控 折线 --> 85 <!-- 系统响应监控 折线 -->
70 - <ResponseMonitor></ResponseMonitor> 86 + <ResponseMonitor :commandVal="commandVal" ref="responseRef"></ResponseMonitor>
71 </div> 87 </div>
72 </section> 88 </section>
73 </div> 89 </div>
@@ -87,7 +103,7 @@ @@ -87,7 +103,7 @@
87 </div> 103 </div>
88 <div id="bottom-four"> 104 <div id="bottom-four">
89 <!-- 带宽占用监控 折线 --> 105 <!-- 带宽占用监控 折线 -->
90 - <BandwidthCpu></BandwidthCpu> 106 + <BandwidthCpu :commandVal="commandVal" ref="bandwidthRef" ></BandwidthCpu>
91 </div> 107 </div>
92 </section> 108 </section>
93 </div> 109 </div>
@@ -52,7 +52,9 @@ export default { @@ -52,7 +52,9 @@ export default {
52 return { 52 return {
53 titleFontSize: 30, 53 titleFontSize: 30,
54 dateTime: '00-00-00 00:00:00', 54 dateTime: '00-00-00 00:00:00',
55 - colorData:['#0D45FE','#00FFB9','#A35CFF'] 55 + colorData:['#0D45FE','#00FFB9','#A35CFF'],
  56 + commandName:'最大值',
  57 + commandVal:'max'
56 } 58 }
57 }, 59 },
58 computed: { 60 computed: {
@@ -85,6 +87,21 @@ export default { @@ -85,6 +87,21 @@ export default {
85 }, 87 },
86 timeFormat (number) { 88 timeFormat (number) {
87 return number.length == 1 ? ('0' + number) : number 89 return number.length == 1 ? ('0' + number) : number
  90 + },
  91 + handleCommand(command){
  92 + console.log("newVal",command)
  93 + this.commandVal=command;
  94 + console.log("ne",this.commandVal)
  95 + if(command=='max'){
  96 + this.commandName="最大值";
  97 + }else if(command=='min'){
  98 + this.commandName="最小值";
  99 + }else{
  100 + this.commandName="平均值";
  101 + }
  102 + // this.$refs.responseRef.getData();
  103 + // this.$refs.bandwidthRef.getData();
  104 +
88 } 105 }
89 }, 106 },
90 mounted () { 107 mounted () {
@@ -40,21 +40,15 @@ @@ -40,21 +40,15 @@
40 <div class="declare-title"> 40 <div class="declare-title">
41 <div class="declare-bg volume-today"></div> 41 <div class="declare-bg volume-today"></div>
42 </div> 42 </div>
43 - <div class="volume-today-container" v-for="(item,index) in volumeData"> 43 + <div v-if="volumdData" class="volume-today-container" v-for="(item,index) in volumeData">
44 <span class="volume-text">{{item.name}}</span> 44 <span class="volume-text">{{item.name}}</span>
45 <span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span> 45 <span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span>
46 <span class="volume-num">{{item.num1}}</span> 46 <span class="volume-num">{{item.num1}}</span>
47 </div> 47 </div>
48 - <!-- <div class="volume-today-container">  
49 - <span class="volume-text">涉税文书</span>  
50 - <span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>  
51 - <span class="volume-num num-doc">{{volumeNumDoc}}</span> 48 + <div class="volume-today-container" v-else style="justify-content: center;">
  49 + <span>暂无数据</span>
52 </div> 50 </div>
53 - <div class="volume-today-container">  
54 - <span class="volume-text">网上申报</span>  
55 - <span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>  
56 - <span class="volume-num num-net">{{volumeNumNet}}</span>  
57 - </div>--> 51 +
58 </div> 52 </div>
59 </div> 53 </div>
60 <div class="declare-right"> 54 <div class="declare-right">
@@ -74,7 +74,6 @@ export default { @@ -74,7 +74,6 @@ export default {
74 74
75 }) 75 })
76 const optionInit=()=>{ 76 const optionInit=()=>{
77 - console.log("3232",proxy.ySeriesCommon)  
78 let xAxisDataLength=proxy.ySeriesCommon[0].length; 77 let xAxisDataLength=proxy.ySeriesCommon[0].length;
79 let xAxisData=[]; 78 let xAxisData=[];
80 for(let i=1;i<=xAxisDataLength;i++){ 79 for(let i=1;i<=xAxisDataLength;i++){
@@ -8,100 +8,122 @@ export default { @@ -8,100 +8,122 @@ export default {
8 data(){ 8 data(){
9 return { 9 return {
10 domainName:'http://192.168.0.245:8180/api-web', 10 domainName:'http://192.168.0.245:8180/api-web',
  11 + myChart:'',
  12 + titleFontSize:30,
11 yAxisData:'',//y序列的数据 13 yAxisData:'',//y序列的数据
12 seriesData:[],//y轴数据 14 seriesData:[],//y轴数据
  15 + newOptionData:this.optionData,
13 chartId:'line-echart' 16 chartId:'line-echart'
14 17
15 } 18 }
16 }, 19 },
  20 + watch:{
  21 + optionData(newValue,oldValue){
  22 + this.newOptionData=newValue
  23 + this.chartSetOption()
  24 + }
  25 + },
17 setup(props, {attrs, slots, emit}) { 26 setup(props, {attrs, slots, emit}) {
18 const {proxy} = Vue.getCurrentInstance(); 27 const {proxy} = Vue.getCurrentInstance();
19 -  
20 // 挂载完 28 // 挂载完
21 Vue.onMounted(() => { 29 Vue.onMounted(() => {
22 - /*$.get(proxy.domainName,function(res){ 30 + proxy.chartSetOption()
23 31
24 - })*/  
25 - /* proxy.yAxisData=props.yAxisData;  
26 - proxy.seriesData=props.seriesData;  
27 - proxy.chartId=props.chartId;  
28 - // const chartDom = document.getElementById('line-echart-declare');  
29 - console.log("**!/",proxy.seriesData)  
30 - let xAxisDataLength=proxy.seriesData[0].data.length;  
31 - let xAxisData=[];  
32 - for(let i=1;i<=xAxisDataLength;i++){  
33 - xAxisData.push(i)  
34 - }*/ 32 + })
  33 + const chartSetOption=()=>{
35 const chartDom=proxy.$el 34 const chartDom=proxy.$el
36 const myChart = echarts.init(chartDom); 35 const myChart = echarts.init(chartDom);
  36 + proxy.myChart=myChart;
  37 + /* window.addEventListener('resize', proxy.screenAdapter)
  38 + proxy.screenAdapter()*/
37 let option=props.optionData; 39 let option=props.optionData;
38 - console.log("testLIne0",chartDom,option)  
39 40
40 - /* option = {  
41 - title: {  
42 - text: ''  
43 - },  
44 - tooltip: {  
45 - trigger: 'axis',  
46 - backgroundColor:'rgba(50,50,50,0.7)',  
47 - borderColor:"#333",  
48 - textStyle:{  
49 - color:"#fff",  
50 - align:'left'  
51 - } 41 + /* option = {
  42 + title: {
  43 + text: ''
  44 + },
  45 + tooltip: {
  46 + trigger: 'axis',
  47 + backgroundColor:'rgba(50,50,50,0.7)',
  48 + borderColor:"#333",
  49 + textStyle:{
  50 + color:"#fff",
  51 + align:'left'
  52 + }
52 53
53 - },  
54 - legend: {  
55 - data: props.legendData,  
56 - itemHeight:0,//图例圆圈大小设置  
57 - y:'7px',  
58 - textStyle: {  
59 - color: '#ffffff',  
60 - fontsize:"12px"  
61 - } 54 + },
  55 + legend: {
  56 + data: props.legendData,
  57 + itemHeight:0,//图例圆圈大小设置
  58 + y:'7px',
  59 + textStyle: {
  60 + color: '#ffffff',
  61 + fontsize:"12px"
  62 + }
62 63
63 - },  
64 - grid: {  
65 - left: '3%',  
66 - right: '4%',  
67 - bottom: '3%',  
68 - containLabel: true,  
69 - },  
70 - /!*toolbox: {  
71 - feature: {  
72 - saveAsImage: {}  
73 - }  
74 - },*!/  
75 - xAxis: {  
76 - type: 'category',  
77 - boundaryGap: false,  
78 - data: xAxisData, 64 + },
  65 + grid: {
  66 + left: '3%',
  67 + right: '4%',
  68 + bottom: '3%',
  69 + containLabel: true,
  70 + },
  71 + /!*toolbox: {
  72 + feature: {
  73 + saveAsImage: {}
  74 + }
  75 + },*!/
  76 + xAxis: {
  77 + type: 'category',
  78 + boundaryGap: false,
  79 + data: xAxisData,
79 80
80 - axisLine:{  
81 - show:false,//是否显示坐标线  
82 - },  
83 - axisTick: {  
84 - show: false //是否显示坐标刻度  
85 - },  
86 - axisLabel:{  
87 - color:'#ffffff',  
88 - }, 81 + axisLine:{
  82 + show:false,//是否显示坐标线
  83 + },
  84 + axisTick: {
  85 + show: false //是否显示坐标刻度
  86 + },
  87 + axisLabel:{
  88 + color:'#ffffff',
  89 + },
89 90
90 - },  
91 - yAxis: proxy.yAxisData,  
92 - series: proxy.seriesData,  
93 - itemStyle:{  
94 - showSymbol:false  
95 - }  
96 - };*/ 91 + },
  92 + yAxis: proxy.yAxisData,
  93 + series: proxy.seriesData,
  94 + itemStyle:{
  95 + showSymbol:false
  96 + }
  97 + };*/
97 98
98 option && myChart.setOption(option); 99 option && myChart.setOption(option);
  100 + }
99 101
100 - }) 102 +
  103 + const screenAdapter= ()=> {
  104 + proxy.titleFontSize = proxy.myChart.offsetWidth / 100 * 3.6
  105 + const adapterOption = {
  106 + legend: {
  107 + itemWidth: proxy.titleFontSize,
  108 + itemHeight: proxy.titleFontSize,
  109 + itemGap: proxy.titleFontSize,
  110 + textStyle: {
  111 + fontSize: proxy.titleFontSize / 2
  112 + }
  113 + }
  114 + }
  115 + proxy.myChart.setOption(adapterOption)
  116 + proxy.myChart.resize()
  117 + }
101 118
102 119
103 return{ 120 return{
  121 + chartSetOption,
  122 + screenAdapter
104 123
105 } 124 }
  125 + },
  126 + unmounted () {
  127 + // window.removeEventListener('resize', this.screenAdapter)
106 } 128 }
107 } 129 }
@@ -10,13 +10,31 @@ export default { @@ -10,13 +10,31 @@ export default {
10 return { 10 return {
11 domainName:sessionStorage.getItem('domainName'), 11 domainName:sessionStorage.getItem('domainName'),
12 apiUrl:'/api-web/sxview/getBusinessAvailability', 12 apiUrl:'/api-web/sxview/getBusinessAvailability',
13 - resourceStatisticsData:'', 13 + kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
  14 + busId:'247c0c978f574285bf642f55611ea75d',
  15 + performanceData:'',
  16 + xAxisData:'',
  17 + yAxisData:'',
14 optionData:'', 18 optionData:'',
15 ySeriesCommon:[] 19 ySeriesCommon:[]
16 } 20 }
17 }, 21 },
18 setup(props, {attrs, slots, emit}) { 22 setup(props, {attrs, slots, emit}) {
19 const {proxy} = Vue.getCurrentInstance(); 23 const {proxy} = Vue.getCurrentInstance();
  24 + // 半透明的颜色值
  25 + const colorArr1 = [
  26 + 'rgba(151,213,244, 0.8)',
  27 + 'rgba(239,224,167, 0.8)',
  28 + 'rgba(229,171,209, 0.8)',
  29 + 'rgba(151,170,255, 0.8)'
  30 + ]
  31 + // 全透明的颜色值
  32 + const colorArr2 = [
  33 + 'rgba(151,213,244, 0)',
  34 + 'rgba(239,224,167, 0)',
  35 + 'rgba(229,171,209, 0)',
  36 + 'rgba(151,170,255, 0)'
  37 + ]
20 38
21 39
22 // 挂载完 40 // 挂载完
@@ -25,33 +43,88 @@ export default { @@ -25,33 +43,88 @@ export default {
25 43
26 }) 44 })
27 const getData=()=>{ 45 const getData=()=>{
28 - $.get(proxy.domainName +proxy.apiUrl,function (res) { 46 + let params = {
  47 + kpiIds: proxy.kpiIds,
  48 + busId: proxy.busId,
  49 + startTime:'',
  50 + endTime:'',
  51 + access_token:localStorage.getItem('access_token')
  52 + };
  53 + $.get(proxy.domainName +proxy.apiUrl,params,function (res) {
29 const data = res; 54 const data = res;
30 - if (data && data.data) {  
31 - let resData=data.data; 55 + console.log("ttttt",data)
  56 + if (data && data.map) {
  57 + let resData=data.map;
  58 + proxy.legendData=resData.legend;
  59 + proxy.xAxisData=resData.x;
  60 + proxy.yAxisData=resData.y;
  61 +
32 62
33 } 63 }
34 - // proxy.optionInit(); 64 + proxy.optionInit();
35 65
36 }) 66 })
37 - proxy.optionInit(); 67 + // proxy.optionInit();
38 68
39 } 69 }
40 const optionInit=()=>{ 70 const optionInit=()=>{
41 71
42 - let data3=[350, 350, 350, 350, 350, 350, 350]; 72 + let data3=proxy.yAxisData[0];
43 let data4=[220, 182, 191, 234, 290, 330, 310]; 73 let data4=[220, 182, 191, 234, 290, 330, 310];
44 - let data2=[100, 100, 100, 100, 100, 100, 100];  
45 - let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52]; 74 + let data2=proxy.yAxisData[2];
  75 + let data1=proxy.yAxisData[1];
46 76
47 let min1=proxy.calMin([data1,data2]); 77 let min1=proxy.calMin([data1,data2]);
48 let max1=proxy.calMax([data1,data2]); 78 let max1=proxy.calMax([data1,data2]);
49 let min2=proxy.calMin([data3,data4]); 79 let min2=proxy.calMin([data3,data4]);
50 let max2=proxy.calMax([data3,data4]); 80 let max2=proxy.calMax([data3,data4]);
  81 +
  82 + proxy.legendData.map((item,index)=>{
  83 + let i=0;
  84 + if(index%2==0 ||index%3==0){
  85 + i=0;
  86 + }else{
  87 + i=1;
  88 + }
  89 + proxy.ySeriesCommon.push(
  90 + {
  91 + name:item,
  92 + type: 'line',
  93 + smooth:true,
  94 + // stack: 'Total',
  95 + show:false,
  96 + data:proxy.yAxisData[index],
  97 + yAxisIndex:i,
  98 + showSymbol:false,
  99 + itemStyle : {
  100 + normal : {
  101 + color:colorArr1[index],//tooltip里的小圆点颜色
  102 + lineStyle:{
  103 + color:colorArr1[index],
  104 + width:1
  105 + }
  106 + }
  107 + },
  108 + areaStyle: {
  109 + // color:'rgba(151,213,244,0.4)',
  110 + normal:{
  111 + color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
  112 + offset: 0,
  113 + color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
  114 + }, {
  115 + offset: 1,
  116 + color: colorArr2[index]
  117 + }])
  118 + }
  119 +
  120 + },
  121 + },
  122 + )
  123 + })
51 //业务双y轴数据 124 //业务双y轴数据
52 - proxy.ySeriesCommon=[ 125 + /* proxy.ySeriesCommon=[
53 { 126 {
54 - name:'可用性', 127 + name:proxy.legendData[0],
55 type: 'line', 128 type: 'line',
56 smooth:true, 129 smooth:true,
57 // stack: 'Total', 130 // stack: 'Total',
@@ -83,7 +156,7 @@ export default { @@ -83,7 +156,7 @@ export default {
83 }, 156 },
84 }, 157 },
85 { 158 {
86 - name:'成功率', 159 + name:proxy.legendData[1],
87 type: 'line', 160 type: 'line',
88 smooth:true, 161 smooth:true,
89 // stack: 'Total', 162 // stack: 'Total',
@@ -148,20 +221,18 @@ export default { @@ -148,20 +221,18 @@ export default {
148 color:'rgba(151,170,255,0)' 221 color:'rgba(151,170,255,0)'
149 }, 222 },
150 } 223 }
151 - ] 224 + ]*/
152 // let xAxisDataLength=proxy.ySeriesCommon[0].length; 225 // let xAxisDataLength=proxy.ySeriesCommon[0].length;
153 let xAxisData=[]; 226 let xAxisData=[];
154 - for(let i=0;i<=24;i++){  
155 - if(i%4==0){  
156 - xAxisData.push(i+':00') 227 + if(proxy.xAxisData){
  228 + proxy.xAxisData.map((item,index)=>{
  229 + if(index%20==0){
  230 + xAxisData.push(item)
  231 +
  232 + }
  233 + })
157 234
158 - }  
159 } 235 }
160 - let legendData=[];  
161 - $.each(proxy.ySeriesCommon,function (i,v){  
162 - legendData.push(v.name)  
163 - })  
164 - proxy.legendData=legendData;  
165 proxy.optionData = { 236 proxy.optionData = {
166 title: { 237 title: {
167 text: '' 238 text: ''
@@ -187,9 +258,10 @@ export default { @@ -187,9 +258,10 @@ export default {
187 258
188 }, 259 },
189 grid: { 260 grid: {
  261 + top:'2%',
190 left: '3%', 262 left: '3%',
191 right: '4%', 263 right: '4%',
192 - bottom: '3%', 264 + // bottom: '3%',
193 containLabel: true, 265 containLabel: true,
194 }, 266 },
195 xAxis: { 267 xAxis: {