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

大屏及电子税务局的业务性能指标图列颜色及区域面积更改 See merge request !115

Merge branch 'master-v32-lushangqing' into 'master'
大屏及电子税务局的业务性能指标图列颜色及区域面积更改 See merge request !115
王涛
Commit d41ca3c7d5813a0c19f9cd8dd8ac77c88d8cff46 2 parents 99f2051b 4e86e814
Showing 2 changed files with 31 additions and 18 deletions
hg-monitor-web-zj/src/main/resources/static/vue3/src/views/dp/components/availability/index.js
hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/performance/index.js
--- a/hg-monitor-web-zj/src/main/resources/static/vue3/src/views/dp/components/availability/index.js
View file @d41ca3c
+++ b/hg-monitor-web-zj/src/main/resources/static/vue3/src/views/dp/components/availability/index.js
View file @d41ca3c
@@ -11,7 +11,7 @@ export default {
             titleFontSize:20,
             domainName:sessionStorage.getItem('domainName'),
             apiUrl:'/api-web/sxview/getBusinessAvailability',
-            kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
+            kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
             busId: '53bebbd79f384f619513b50666ea1d48',
             performanceData:'',
             xAxisData:'',
@@ -41,17 +41,19 @@ export default {
         // 半透明的颜色值
         const colorArr1 = [
-            'rgba(255,0,255, 0.8)',
             'rgba(23,212,152, 0.8)',
             'rgba(253,152,58, 0.8)',
-            'rgba(255,113,66, 0.8)'
+            'rgba(255,238,0, 0.8)',
+            'rgba(255,113,66, 0.8)',
+            'rgba(255,0,255, 0.8)',
         ]
         //   全透明的颜色值
         const colorArr2 = [
-            'rgba(255,0,255, 0)',
             'rgba(23,212,152, 0)',
             'rgba(253,152,58, 0)',
-            'rgba(255,113,66, 0)'
+            'rgba(255,238,0, 0)',
+            'rgba(255,113,66, 0)',
+            'rgba(255,0,255, 0)',
         ]
         // 挂载完
         Vue.onMounted(() => {
@@ -73,7 +75,7 @@ export default {
                 let xAxisData=Vue.ref([]);
                 let yAxisData=Vue.ref([]);
                 let mapData={
-                    legend:[ "可用性","成功率","响应率","业务告警量"],
+                    legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
                     x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
                         "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
                         "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
@@ -126,6 +128,10 @@ export default {
                 }else{
                     i=1;
                 }
+                let areaStyle=0;
+                if(i==2){
+                    areaStyle=1
+                }
                 ySeriesCommon.push(
                     {
                         name:item,
@@ -148,7 +154,7 @@ export default {
                         areaStyle: {
                             // color:'rgba(151,213,244,0.4)',
                             normal:{
-                                color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
+                                color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
                                     offset: 0,
                                     color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
                                 }, {
@@ -226,7 +232,7 @@ export default {
                 xAxis: {
                     type: 'category',
                     boundaryGap: false,
-                    data: xAxisData,
+                    data: proxy.xAxisData,
                     axisLine:{
                         show:false,//是否显示坐标线
--- a/hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/performance/index.js
View file @d41ca3c
+++ b/hg-monitor-web-zj/src/main/resources/static/vue3/src/views/zjdaping/components/performance/index.js
View file @d41ca3c
@@ -21,7 +21,8 @@ export default {
         return {
             domainName:sessionStorage.getItem('domainName'),
             apiUrl:'/api-web/sxview/getBusinessAvailability',
-            kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
+            // kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',//可用性，成功率，响应率，业务告警量
+            kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
             // busId:'7a9d2360e09f4ed8aaa8011ceb4178fd',
             busId:'',
             performanceData:'',
@@ -46,17 +47,19 @@ export default {
         });
         // 半透明的颜色值
         const colorArr1 = [
-            'rgba(255,0,255, 0.8)',
             'rgba(23,212,152, 0.8)',
             'rgba(253,152,58, 0.8)',
-            'rgba(255,113,66, 0.8)'
+            'rgba(255,238,0, 0.8)',
+            'rgba(255,113,66, 0.8)',
+            'rgba(255,0,255, 0.8)',
         ]
         //   全透明的颜色值
         const colorArr2 = [
-            'rgba(255,0,255, 0)',
             'rgba(23,212,152, 0)',
             'rgba(253,152,58, 0)',
-            'rgba(255,113,66, 0)'
+            'rgba(255,238,0, 0)',
+            'rgba(255,113,66, 0)',
+            'rgba(255,0,255, 0)',
         ]
         // 挂载完
         Vue.onMounted(() => {
@@ -77,7 +80,7 @@ export default {
                 let xAxisData=Vue.ref([]);
                 let yAxisData=Vue.ref([]);
                 let mapData={
-                    legend:[ "可用性","成功率","响应率","业务告警量"],
+                    legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
                     x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
                         "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
                         "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
@@ -86,7 +89,7 @@ export default {
                         "06:00","06:15","06:30", "06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45", "09:00","09:15","09:30","09:45",
                         "10:00"
                        ],
-                    y:[[ 0,1,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0]
+                    y:[[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0]
                     ]
                 }
                 if (data ) {
@@ -129,6 +132,10 @@ export default {
                 }else{
                     i=1;
                 }
+                let areaStyle=0;
+                if(i==2){
+                    areaStyle=1
+                }
                 ySeriesCommon.push(
                     {
                         name:item,
@@ -151,7 +158,7 @@ export default {
                         areaStyle: {
                             // color:'rgba(151,213,244,0.4)',
                             normal:{
-                                color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
+                                color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
                                     offset: 0,
                                     color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
                                 }, {
@@ -221,14 +228,14 @@ export default {
                 grid: {
                     top:'10%',
                     left: '3%',
-                    right: '4%',
+                    right: '8%',
                     bottom: '20%',
                     containLabel: true,
                 },
                 xAxis: {
                     type: 'category',
                     boundaryGap: false,
-                    data: xAxisData,
+                    data: proxy.xAxisData,
                     axisLine:{
                         show:false,//是否显示坐标线