monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 95ab53e5d5a2ed56fdbef927c8ba2bb55ec2fae0 2 parents 4ef1e303 769a41ab

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

大屏及电子税务局页面样式修改，柱状图提示，导航轮播，系统资源统计样式及数据，今日业务量无数据时展示



See merge request !50
Inline Side-by-side
Showing 30 changed files with 318 additions and 120 deletions
@@ -45,3 +45,13 @@ @@ -45,3 +45,13 @@
45 flex-flow: column; 45 flex-flow: column;
46 justify-content: space-around; 46 justify-content: space-around;
47 } 47 }
  48 +.condition-row{
  49 + text-align: left;
  50 + color:#409EFF;
  51 +}
  52 +.bottom-condition .el-dropdown,.bottom-condition .el-button{
  53 + width: 100%;
  54 +}
  55 +.bottom-condition .el-input__inner,.bottom-condition .el-button{
  56 + border-color:#409eff;
  57 +}
@@ -86,15 +86,13 @@ @@ -86,15 +86,13 @@
86 justify-content: space-around; 86 justify-content: space-around;
87 } 87 }
88 .width-86{ 88 .width-86{
89 - width:86%; 89 + width:96%;
90 margin-bottom: 10px; 90 margin-bottom: 10px;
91 align-items: flex-end; 91 align-items: flex-end;
92 } 92 }
93 .middle-right{ 93 .middle-right{
94 width: 20%; 94 width: 20%;
95 - /*flex: 1;*/  
96 position: relative; 95 position: relative;
97 - left: -5%;  
98 display: flex; 96 display: flex;
99 flex-flow: column; 97 flex-flow: column;
100 justify-content: center; 98 justify-content: center;
@@ -118,7 +116,7 @@ @@ -118,7 +116,7 @@
118 } 116 }
119 .middle-left-declare-rate{ 117 .middle-left-declare-rate{
120 height: 36%; 118 height: 36%;
121 - width:86%; 119 + width:96%;
122 120
123 } 121 }
124 .screen-middle #middle-bottom { 122 .screen-middle #middle-bottom {
@@ -166,12 +164,11 @@ @@ -166,12 +164,11 @@
166 cursor: pointer; 164 cursor: pointer;
167 margin-right: 15px; 165 margin-right: 15px;
168 } 166 }
169 -  
170 -.el-dropdown__popper .el-dropdown-menu{ 167 +.cpuDropdown.el-dropdown-menu{
171 background-color: rgba(0,0,0,0.5); 168 background-color: rgba(0,0,0,0.5);
172 border:none; 169 border:none;
173 } 170 }
174 -.el-dropdown-menu__item{ 171 +.cpuDropdown .el-dropdown-menu__item{
175 color:#ffffff; 172 color:#ffffff;
176 } 173 }
177 .el-dropdown__popper.el-popper[role="tooltip"]{ 174 .el-dropdown__popper.el-popper[role="tooltip"]{
@@ -212,3 +209,7 @@ @@ -212,3 +209,7 @@
212 background-repeat: no-repeat; 209 background-repeat: no-repeat;
213 background-position: center; 210 background-position: center;
214 } 211 }
  212 +.width-13{
  213 + flex: 0 0 14%;
  214 + max-width: 14%;
  215 +}
@@ -28,9 +28,9 @@ @@ -28,9 +28,9 @@
28 height: 100%; 28 height: 100%;
29 max-width: 475px; 29 max-width: 475px;
30 max-height: 403px; 30 max-height: 403px;
31 - background-size: contain; 31 + background-size: auto;
32 background-position: center; 32 background-position: center;
33 - margin-left: 12px; 33 + /*margin-left: 12px;*/
34 margin-right: 2px; 34 margin-right: 2px;
35 } 35 }
36 .ypt .item.active{ 36 .ypt .item.active{
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 .ypt .item .ui_base { 55 .ypt .item .ui_base {
56 position: relative; 56 position: relative;
57 top:11%; 57 top:11%;
58 - left: 9%; 58 + left: 5%;
59 width: 100%; 59 width: 100%;
60 height: 100%; 60 height: 100%;
61 -webkit-perspective: 1000px; 61 -webkit-perspective: 1000px;
@@ -108,8 +108,8 @@ @@ -108,8 +108,8 @@
108 } 108 }
109 109
110 .ypt .item .ball { 110 .ypt .item .ball {
111 - width: 56px;  
112 - height: 56px; 111 + width: 70px;
  112 + height: 67px;
113 background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat; 113 background: url("/vue3/src/assets/images/zjdp/cloudItem-bg.png") no-repeat;
114 background-size: contain; 114 background-size: contain;
115 word-break: break-all; 115 word-break: break-all;
@@ -145,29 +145,29 @@ @@ -145,29 +145,29 @@
145 transform: scale(1.0); 145 transform: scale(1.0);
146 } 146 }
147 .ypt__info div.ball_base:nth-child(1) { 147 .ypt__info div.ball_base:nth-child(1) {
148 - top: 17px;  
149 - left: 133px; 148 + top: 0;
  149 + left: 129px;
150 } 150 }
151 151
152 .ypt__info div.ball_base:nth-child(2) { 152 .ypt__info div.ball_base:nth-child(2) {
153 - top: 68px;  
154 - left: 50px; 153 + top: 51px;
  154 + left:30px;
155 } 155 }
156 .ypt__info div.ball_base:nth-child(3) { 156 .ypt__info div.ball_base:nth-child(3) {
157 - top: 68px;  
158 - left: 214px; 157 + top: 51px;
  158 + left: 224px;
159 } 159 }
160 .ypt__info div.ball_base:nth-child(4) { 160 .ypt__info div.ball_base:nth-child(4) {
161 top: 150px; 161 top: 150px;
162 - left: 50px; 162 + left: 30px;
163 } 163 }
164 .ypt__info div.ball_base:nth-child(5) { 164 .ypt__info div.ball_base:nth-child(5) {
165 top: 150px; 165 top: 150px;
166 - left: 210px; 166 + left: 230px;
167 } 167 }
168 .ypt__info div.ball_base:nth-child(6) { 168 .ypt__info div.ball_base:nth-child(6) {
169 - top: 190px;  
170 - left: 133px; 169 + top: 205px;
  170 + left: 129px;
171 } 171 }
172 .ypt__info .ball_base .ball.active{ 172 .ypt__info .ball_base .ball.active{
173 -moz-transition: top 0.3s; 173 -moz-transition: top 0.3s;
@@ -51,3 +51,10 @@ @@ -51,3 +51,10 @@
51 .tabItem:hover,.tabItem.active{ 51 .tabItem:hover,.tabItem.active{
52 background-color: #0b1943; 52 background-color: #0b1943;
53 } 53 }
  54 +.nullDiv{
  55 + width:20%;
  56 + padding: 0px 8px;
  57 +}
  58 +.navTabs-card .el-carousel__item--card{
  59 + width:20%;
  60 +}
@@ -38,7 +38,7 @@ @@ -38,7 +38,7 @@
38 display: flex; 38 display: flex;
39 position: absolute; 39 position: absolute;
40 left: 18px; 40 left: 18px;
41 - top:36px; 41 + top:30px;
42 } 42 }
43 .listItem:nth-child(1) .listItem-health{ 43 .listItem:nth-child(1) .listItem-health{
44 /*left: 7px;*/ 44 /*left: 7px;*/
@@ -52,6 +52,12 @@ @@ -52,6 +52,12 @@
52 <div class="add-bottom"> 52 <div class="add-bottom">
53 <el-row> 53 <el-row>
54 <el-col :span="6" class="bottom-condition"> 54 <el-col :span="6" class="bottom-condition">
  55 + <el-row class="condition-row">
  56 + <el-col :span="24">
  57 + <i class="icon-condition"></i>
  58 + <span class="condition-title">查询条件</span>
  59 + </el-col>
  60 + </el-row>
55 <el-row> 61 <el-row>
56 <el-col :span="24"> 62 <el-col :span="24">
57 <el-dropdown> 63 <el-dropdown>
@@ -59,7 +65,7 @@ @@ -59,7 +65,7 @@
59 电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon> 65 电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
60 </el-button> 66 </el-button>
61 <template #dropdown> 67 <template #dropdown>
62 - <el-dropdown-menu> 68 + <el-dropdown-menu >
63 <el-dropdown-item>Action 1</el-dropdown-item> 69 <el-dropdown-item>Action 1</el-dropdown-item>
64 <el-dropdown-item>Action 2</el-dropdown-item> 70 <el-dropdown-item>Action 2</el-dropdown-item>
65 <el-dropdown-item>Action 3</el-dropdown-item> 71 <el-dropdown-item>Action 3</el-dropdown-item>
@@ -12,7 +12,8 @@ export default { @@ -12,7 +12,8 @@ export default {
12 domainName:sessionStorage.getItem('domainName'), 12 domainName:sessionStorage.getItem('domainName'),
13 apiUrl:'/api-web/sxview/getBusinessAvailability', 13 apiUrl:'/api-web/sxview/getBusinessAvailability',
14 kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4', 14 kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
15 - busId:'247c0c978f574285bf642f55611ea75d', 15 + // busId:'247c0c978f574285bf642f55611ea75d',
  16 + busId: '',
16 performanceData:'', 17 performanceData:'',
17 xAxisData:'', 18 xAxisData:'',
18 yAxisData:'', 19 yAxisData:'',
@@ -22,7 +22,7 @@ export default { @@ -22,7 +22,7 @@ export default {
22 { name: "网络发票",value: "712204", color: "#A35CFF"} 22 { name: "网络发票",value: "712204", color: "#A35CFF"}
23 ] 23 ]
24 }], 24 }],
25 - colorData:['#0D45FE','#00FFB9','#A35CFF'], 25 + colorData:['#0D45FE','#00FFB9','#A35CFF','#3d4b73'],
26 titleFontSize: 30 26 titleFontSize: 30
27 } 27 }
28 }, 28 },
@@ -94,6 +94,7 @@ export default { @@ -94,6 +94,7 @@ export default {
94 94
95 const seriesArr = this.allData.map((item, index) => { 95 const seriesArr = this.allData.map((item, index) => {
96 const dataArr = [] 96 const dataArr = []
  97 + let colorData=[];
97 if(item.data){ 98 if(item.data){
98 item.data.map(inner => { 99 item.data.map(inner => {
99 dataArr.push({ 100 dataArr.push({
@@ -104,19 +105,24 @@ export default { @@ -104,19 +105,24 @@ export default {
104 }*/ 105 }*/
105 }) 106 })
106 }) 107 })
  108 + colorData=this.colorData;
107 }else{ 109 }else{
  110 + for(let i=0;i<3;i++){
108 dataArr.push({ 111 dataArr.push({
109 - name: '暂无数据', 112 + name: ' ',
110 value: 0 113 value: 0
111 114
112 }) 115 })
113 } 116 }
114 117
  118 + colorData=this.colorData[3]
  119 + }
  120 +
115 return { 121 return {
116 type: 'pie', 122 type: 'pie',
117 radius: ['28%', '42%'], 123 radius: ['28%', '42%'],
118 center: centerArr[index], 124 center: centerArr[index],
119 - color:this.colorData, 125 + color:colorData,
120 itemStyle: { 126 itemStyle: {
121 borderRadius: 2, 127 borderRadius: 2,
122 borderWidth: 2 128 borderWidth: 2
@@ -283,7 +283,9 @@ export default { @@ -283,7 +283,9 @@ export default {
283 lineStyle: { 283 lineStyle: {
284 color:'#0a1b31' 284 color:'#0a1b31'
285 } 285 }
286 - } 286 + },
  287 + min:0,
  288 + max:100,
287 289
288 }, 290 },
289 series: seriesData 291 series: seriesData
@@ -27,68 +27,68 @@ @@ -27,68 +27,68 @@
27 </span> 27 </span>
28 </div> 28 </div>
29 </el-col>--> 29 </el-col>-->
30 - <el-col :span="3"> 30 + <el-col :span="3" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 34 + <span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
  35 + <span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
  36 + <span :style="comcommaStyle" style=" left: 13%;" 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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 44 + <span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
  45 + <span class="com-box-value" :style="combitnumberStyle" style="left: 18%;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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 53 + <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
  54 + <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 62 + <span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
  63 + <span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
  64 + <span :style="comcommaStyle" style="left: 55%;" 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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 72 + <span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
  73 + <span class="com-box-value" :style="combitnumberStyle" style="left: 60%;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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 81 + <span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
  82 + <span class="com-box-value" :style="combitnumberStyle" style="left: 74.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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 90 + <span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
  91 + <span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
92 </span> 92 </span>
93 </div> 93 </div>
94 </el-col> 94 </el-col>
@@ -27,68 +27,68 @@ @@ -27,68 +27,68 @@
27 </span> 27 </span>
28 </div> 28 </div>
29 </el-col>--> 29 </el-col>-->
30 - <el-col :span="3"> 30 + <el-col :span="3" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 34 + <span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #FEFEFE;" v-if="millionBitFalg > 0">{{millionBit}}</span>
  35 + <span class="com-box-value" :style="combitnumberStyle" style="left: 4%;color: #97969B;" v-if="millionBitFalg == 0">{{millionBit}}</span>
  36 + <span :style="comcommaStyle" style=" left: 13%;" 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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 44 + <span class="com-box-value" :style="combitnumberStyle" style="left: 18%;color: #FEFEFE;" v-if="hundredThousandBitFalg > 0">{{hundredThousandBit}}</span>
  45 + <span class="com-box-value" :style="combitnumberStyle" style="left: 18%;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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 53 + <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;color: #FEFEFE;" v-if="tenThousandBitFalg > 0">{{tenThousandBit}}</span>
  54 + <span class="com-box-value" :style="combitnumberStyle" style="left: 31%;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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 62 + <span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #FEFEFE;" v-if="thousandBitFalg > 0">{{thousandBit}}</span>
  63 + <span class="com-box-value" :style="combitnumberStyle" style="left: 46%;color: #97969B;" v-if="thousandBitFalg == 0">{{thousandBit}}</span>
  64 + <span :style="comcommaStyle" style="left: 55%;" 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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 72 + <span class="com-box-value" :style="combitnumberStyle" style="left: 60%;color: #FEFEFE;" v-if="hundredBitFalg > 0">{{hundredBit}}</span>
  73 + <span class="com-box-value" :style="combitnumberStyle" style="left: 60%;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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 81 + <span class="com-box-value" :style="combitnumberStyle" style="left: 74.5%;color: #FEFEFE;" v-if="tenBitFalg > 0">{{tenBit}}</span>
  82 + <span class="com-box-value" :style="combitnumberStyle" style="left: 74.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" class="width-13">
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/images/digitalDp/bit_box_2.png"> 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> 90 + <span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #FEFEFE;" v-if="bitBitFalg > 0">{{bitBit}}</span>
  91 + <span class="com-box-value" :style="combitnumberStyle" style="left: 88%;color: #97969B;" v-if="bitBitFalg == 0">{{bitBit}}</span>
92 </span> 92 </span>
93 </div> 93 </div>
94 </el-col> 94 </el-col>
@@ -271,7 +271,9 @@ export default { @@ -271,7 +271,9 @@ export default {
271 lineStyle: { 271 lineStyle: {
272 color:'#0a1b31' 272 color:'#0a1b31'
273 } 273 }
274 - } 274 + },
  275 + min:0,
  276 + max:100
275 277
276 }, 278 },
277 series: seriesData 279 series: seriesData
@@ -39,12 +39,15 @@ export default { @@ -39,12 +39,15 @@ export default {
39 let monitoringBarData=data.data; 39 let monitoringBarData=data.data;
40 let legendData=[]; 40 let legendData=[];
41 $.each(monitoringBarData,function (i,v){ 41 $.each(monitoringBarData,function (i,v){
42 - proxy.ySeriesCommonData.unshift(v.value)  
43 - legendData.push(i+1) 42 + proxy.ySeriesCommonData.unshift(
  43 + {value:v.value,date:v.date}
  44 + )
  45 + legendData.push(
  46 + {value:i+1,date:v.date}
  47 + )
44 }) 48 })
45 proxy.legendData=legendData 49 proxy.legendData=legendData
46 } 50 }
47 - // proxy.ySeriesCommon=  
48 proxy.optionInti() 51 proxy.optionInti()
49 }) 52 })
50 53
@@ -55,6 +58,20 @@ export default { @@ -55,6 +58,20 @@ export default {
55 text: '', 58 text: '',
56 59
57 }, 60 },
  61 + tooltip: {
  62 + trigger: 'axis',
  63 + backgroundColor:'rgba(50,50,50,0.7)',
  64 + borderColor:"#333",
  65 + textStyle:{
  66 + color:"#fff",
  67 + align:'left'
  68 + },
  69 + formatter: function(params) {
  70 + var res = '<div>'+params[0].data.date+'</div>'+params[0].data.value;
  71 + return res;
  72 + }
  73 +
  74 + },
58 grid: { 75 grid: {
59 top:'4%', 76 top:'4%',
60 left: '3%', 77 left: '3%',
@@ -67,7 +67,7 @@ @@ -67,7 +67,7 @@
67 </div> 67 </div>
68 <div id="right-bottom"> 68 <div id="right-bottom">
69 <div class="cpu-dropdown"> 69 <div class="cpu-dropdown">
70 - <el-dropdown @command="handleCommand" > 70 + <el-dropdown @command="handleCommand" class="elSelf" :popper-append-to-body="false">
71 <span class="el-dropdown-link"> 71 <span class="el-dropdown-link">
72 {{commandName}} 72 {{commandName}}
73 <i class="icon-arrow"></i> 73 <i class="icon-arrow"></i>
@@ -18,9 +18,40 @@ export default { @@ -18,9 +18,40 @@ export default {
18 // 挂载完 18 // 挂载完
19 Vue.onMounted(() => { 19 Vue.onMounted(() => {
20 let yptRunTimer = null; 20 let yptRunTimer = null;
21 - $.get(proxy.domainName +"/api-web/datavis/getCloudInfo"+'?access_token='+localStorage.getItem('access_token'),function(res){ 21 + $.get(proxy.domainName +"/api-web/bigScreen/getCloudInfo"+'?access_token='+localStorage.getItem('access_token'),function(res){
22 const data = res.data; 22 const data = res.data;
23 if(data && data.length > 0){ 23 if(data && data.length > 0){
  24 + data.map((item,index)=>{
  25 +
  26 + if(item.kpi && item.kpi.length==0){
  27 + item.kpi.push(
  28 + {
  29 + "kpiValue": "0%",
  30 + "kpiName": "CPU分配率"
  31 + },
  32 + {
  33 + "kpiValue": "0%",
  34 + "kpiName": "内存分配率"
  35 + },
  36 + {
  37 + "kpiValue": "0%",
  38 + "kpiName": "存储分配率"
  39 + },
  40 + {
  41 + "kpiValue": '0%',
  42 + "kpiName": "CPU核数"
  43 + },
  44 + {
  45 + "kpiValue": "0",
  46 + "kpiName": "内存大小"
  47 + },
  48 + {
  49 + "kpiValue": "0",
  50 + "kpiName": "存储空间总量"
  51 + }
  52 + )
  53 + }
  54 + })
24 proxy.cloudData=data; 55 proxy.cloudData=data;
25 56
26 run(); 57 run();
@@ -48,28 +79,28 @@ export default { @@ -48,28 +79,28 @@ export default {
48 function run() { 79 function run() {
49 const yptpostion = [ 80 const yptpostion = [
50 { 81 {
51 - top: '17px',//1  
52 - left: '133px' 82 + top: '0',//1
  83 + left: '129px'
53 }, 84 },
54 { 85 {
55 - top: '68px', // 2  
56 - left: '50px' 86 + top: '51px', // 2
  87 + left: '30px'
57 }, 88 },
58 { 89 {
59 - top: '68px', // 3  
60 - left: '214px' 90 + top: '51px', // 3
  91 + left: '224px'
61 }, 92 },
62 { 93 {
63 top: '150px', // 4 94 top: '150px', // 4
64 - left: '50px' 95 + left: '30px'
65 }, 96 },
66 { 97 {
67 top: '150px', // 5 98 top: '150px', // 5
68 - left: '210px' 99 + left: '230px'
69 }, 100 },
70 { 101 {
71 - top: '190px', // 6  
72 - left: '133px' 102 + top: '205px', // 6
  103 + left: '129px'
73 } 104 }
74 ]; 105 ];
75 // const runpostions = [[1, 2, 3, 4, 5, 0], [2, 3, 4, 5, 0, 1], [3, 4, 5, 0, 1, 2], [4, 5, 0, 1, 2, 3], [5, 0, 1, 2, 3, 4], [0, 1, 2, 3, 4, 5]]; 106 // const runpostions = [[1, 2, 3, 4, 5, 0], [2, 3, 4, 5, 0, 1], [3, 4, 5, 0, 1, 2], [4, 5, 0, 1, 2, 3], [5, 0, 1, 2, 3, 4], [0, 1, 2, 3, 4, 5]];
@@ -46,7 +46,7 @@ @@ -46,7 +46,7 @@
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" v-else style="justify-content: center;"> 48 <div class="volume-today-container" v-else style="justify-content: center;">
49 - <span>暂无数据</span> 49 + <span>0</span>
50 </div> 50 </div>
51 51
52 </div> 52 </div>
@@ -11,6 +11,7 @@ export default { @@ -11,6 +11,7 @@ export default {
11 domainName:sessionStorage.getItem('domainName'), 11 domainName:sessionStorage.getItem('domainName'),
12 apiUrl:'/api-web/bigScreen/digitalBoardData',//本月已申报/未申报 12 apiUrl:'/api-web/bigScreen/digitalBoardData',//本月已申报/未申报
13 apiUrl1:'/api-web/bigScreen/findPortfolio',//今日业务量 13 apiUrl1:'/api-web/bigScreen/findPortfolio',//今日业务量
  14 + allData:'',
14 volumeData:'',//业务量数据 15 volumeData:'',//业务量数据
15 declareData:'', 16 declareData:'',
16 reportable:0,//本月应申报 17 reportable:0,//本月应申报
@@ -27,24 +28,33 @@ export default { @@ -27,24 +28,33 @@ export default {
27 styleVolumeNet:'', 28 styleVolumeNet:'',
28 opactiyNum:0, //不透明显示的个数 29 opactiyNum:0, //不透明显示的个数
29 opactiyNumMath:0, //不透明显示的个数中间量 30 opactiyNumMath:0, //不透明显示的个数中间量
30 - opactiyNumTotal:20//总透明数 31 + opactiyNumTotal:20,//总透明数
  32 + curve: 'KPIDA0ACBBP',
  33 + rateTitle: 'KPIDA0ACBBK',
  34 + numerTitle: 'KPIDA0ACBBG'
31 } 35 }
32 }, 36 },
33 setup(props, {attrs, slots, emit}) { 37 setup(props, {attrs, slots, emit}) {
34 const {proxy} = Vue.getCurrentInstance(); 38 const {proxy} = Vue.getCurrentInstance();
35 // 挂载完 39 // 挂载完
36 Vue.onMounted(() => { 40 Vue.onMounted(() => {
37 - $.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD'+'&access_token='+localStorage.getItem('access_token'),function (res) {  
38 - const data = res;  
39 - if(data && data.map){  
40 - let reportableMonth=data.map.rightNumber;  
41 - proxy.declaredMonth=data.map.leftNumber;  
42 - proxy.reportableMonth=proxy.numberFilter(reportableMonth,-1); 41 + //本月应申报及申报率
  42 + let params = {
  43 + curve: proxy.curve,
  44 + rateTitle: proxy.rateTitle,
  45 + numerTitle: proxy.numerTitle
  46 + };
  47 + proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
  48 + if(res.success){
  49 + proxy.allData = res.obj;
  50 + const declareRate = proxy.allData.polyline.declareRate
43 51
44 - let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);  
45 - proxy.reportable=proxy.numberFilter(reportable,-1);  
46 - let declarationRate=(parseInt(proxy.declaredMonth) /reportable).toFixed(2);  
47 - proxy.opactiyNumMath=declarationRate*proxy.opactiyNumTotal 52 + proxy.reportable = proxy.allData.polyline.declareNumer
  53 + let declareRateNum=0;
  54 + if(declareRate.indexOf('%') > 0){
  55 + declareRateNum = parseInt(declareRate.split('%')[0] )
  56 + }
  57 + proxy.opactiyNumMath=(declareRateNum/100)*proxy.opactiyNumTotal
48 58
49 if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){ 59 if(proxy.opactiyNumMath>proxy.opactiyNumTotal-1){
50 proxy.opactiyNum=Math.floor(proxy.opactiyNumMath); 60 proxy.opactiyNum=Math.floor(proxy.opactiyNumMath);
@@ -53,7 +63,21 @@ export default { @@ -53,7 +63,21 @@ export default {
53 proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath); 63 proxy.opactiyNum=Math.ceil(proxy.opactiyNumMath);
54 64
55 } 65 }
56 - proxy.declarationRate=declarationRate*100+'%'; 66 + proxy.declarationRate=declareRate;
  67 +
  68 +
  69 + }
  70 + });
  71 + $.get(proxy.domainName +proxy.apiUrl+'?kipValue1=KPIDA0ACBBF&kipValue2=KPIDA0ACBBD'+'&access_token='+localStorage.getItem('access_token'),function (res) {
  72 + const data = res;
  73 + if(data && data.map){
  74 + let reportableMonth=data.map.rightNumber;
  75 + proxy.declaredMonth=data.map.leftNumber;
  76 + proxy.reportableMonth=proxy.numberFilter(reportableMonth,-1);
  77 +
  78 + // let reportable=parseInt(data.map.rightNumber)+parseInt(data.map.leftNumber);
  79 + // proxy.reportable=proxy.numberFilter(reportable,-1);
  80 +
57 81
58 } 82 }
59 83
@@ -74,7 +74,7 @@ export default { @@ -74,7 +74,7 @@ export default {
74 74
75 }) 75 })
76 const optionInit=()=>{ 76 const optionInit=()=>{
77 - let xAxisDataLength=proxy.ySeriesCommon[0].length; 77 + let xAxisDataLength=proxy.ySeriesCommon[0].data.length;
78 let xAxisData=[]; 78 let xAxisData=[];
79 for(let i=1;i<=xAxisDataLength;i++){ 79 for(let i=1;i<=xAxisDataLength;i++){
80 xAxisData.push(i) 80 xAxisData.push(i)
@@ -33,8 +33,12 @@ export default { @@ -33,8 +33,12 @@ export default {
33 let monitoringBarData=data.data; 33 let monitoringBarData=data.data;
34 let legendData=[]; 34 let legendData=[];
35 $.each(monitoringBarData,function (i,v){ 35 $.each(monitoringBarData,function (i,v){
36 - proxy.ySeriesCommonData.unshift(v.value)  
37 - legendData.push(i+1) 36 + proxy.ySeriesCommonData.unshift(
  37 + {value:v.value,date:v.date}
  38 + )
  39 + legendData.push(
  40 + {value:i+1,date:v.date}
  41 + )
38 }) 42 })
39 proxy.legendData=legendData 43 proxy.legendData=legendData
40 } 44 }
@@ -48,15 +52,34 @@ export default { @@ -48,15 +52,34 @@ export default {
48 title: { 52 title: {
49 text: '近30天访问量', 53 text: '近30天访问量',
50 x:'center', 54 x:'center',
51 - y:'7px', 55 + y:'9px',
52 textStyle:{ 56 textStyle:{
53 color:"#ffffff", 57 color:"#ffffff",
54 fontSize:14 58 fontSize:14
55 } 59 }
56 }, 60 },
  61 + tooltip: {
  62 + trigger: 'axis',
  63 + backgroundColor:'rgba(50,50,50,0.7)',
  64 + borderColor:"#333",
  65 + textStyle:{
  66 + color:"#fff",
  67 + align:'left'
  68 + },
  69 + formatter: function(params) {
  70 + var res = '<div>'+params[0].data.date+'</div>'+params[0].data.value;
  71 + return res;
  72 + }
  73 +
  74 + },
  75 + grid: {
  76 + left: '10%',
  77 + right: '4%',
  78 + bottom: '10%',
  79 + },
57 xAxis: { 80 xAxis: {
58 type: 'category', 81 type: 'category',
59 - data: props.legendData, 82 + data: proxy.legendData,
60 axisLine:{ 83 axisLine:{
61 show:true,//是否显示坐标线 84 show:true,//是否显示坐标线
62 lineStyle: { 85 lineStyle: {
@@ -2,14 +2,23 @@ @@ -2,14 +2,23 @@
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 class="navTabs-card" :interval="4000" type="card" height="50px" arrow="never" indicator-position="none" >
  6 + <el-carousel-item v-for="(item,index) in listArray" :key="item">
  7 + <div class="tabContaier">
  8 + <div @click="clickTabs(itemData.busId)" v-if="listArray" :class="['tabItem', {'active':checkId==item.busId,'borderColorGood':item.healthStatus==2,'borderColorMi':item.healthStatus==1}]">{{item.busTypeName}}</div>
  9 + </div>
  10 + </el-carousel-item>
  11 + </el-carousel>-->
5 <el-carousel height="50px" :autoplay="true" indicator-position="none" arrow="never" ref="cardShow"> 12 <el-carousel height="50px" :autoplay="true" indicator-position="none" arrow="never" ref="cardShow">
6 - <el-carousel-item v-for="item in listItem" :key="item" > 13 + <el-carousel-item v-for="(item,index) in listItem" :key="item" >
7 <div class="tabContaier"> 14 <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> 15 <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>
9 </div> 16 </div>
  17 + <div v-for="i in isDiv" class="nullDiv" ></div>
10 18
11 19
12 </el-carousel-item> 20 </el-carousel-item>
  21 +
13 </el-carousel> 22 </el-carousel>
14 <div class="rightArrow"> 23 <div class="rightArrow">
15 <img src="/vue3/src/assets/images/zjdp/icon-right.png" @click="arrowClick('right')" alt=""> 24 <img src="/vue3/src/assets/images/zjdp/icon-right.png" @click="arrowClick('right')" alt="">
@@ -16,6 +16,7 @@ export default { @@ -16,6 +16,7 @@ export default {
16 }, 16 },
17 data(){ 17 data(){
18 return { 18 return {
  19 + timer:null,
19 domainName:sessionStorage.getItem('domainName'), 20 domainName:sessionStorage.getItem('domainName'),
20 apiUrl:'/api-web/sxview/getbizListByUser?access_token=', 21 apiUrl:'/api-web/sxview/getbizListByUser?access_token=',
21 checkId:0,//当前选中的tabs 22 checkId:0,//当前选中的tabs
@@ -41,10 +42,40 @@ export default { @@ -41,10 +42,40 @@ export default {
41 proxy.listArray=navTabsData; 42 proxy.listArray=navTabsData;
42 proxy.checkId=navTabsData[0].busId; 43 proxy.checkId=navTabsData[0].busId;
43 busId.value=navTabsData[0].busId 44 busId.value=navTabsData[0].busId
  45 + proxy.startInterval();
44 } 46 }
45 }) 47 })
46 48
47 }) 49 })
  50 + const startInterval=()=>{
  51 + if (proxy.timer) {
  52 + clearInterval(proxy.timer)
  53 + }
  54 + proxy.timer=setInterval(function (){
  55 + let listArray=[];
  56 + proxy.listArray.map((item,index)=>{
  57 + listArray.push(item.busId)
  58 + })
  59 + let index=listArray.indexOf(proxy.checkId)
  60 +
  61 + if(index!=-1){
  62 + if(index>=4){
  63 + proxy.arrowClick('right')
  64 + }
  65 + if(index+1==listArray.length){
  66 + proxy.checkId=listArray[0]
  67 + proxy.arrowClick('left')
  68 +
  69 + }else{
  70 + proxy.checkId=listArray[index+1]
  71 +
  72 + }
  73 +
  74 + proxy.clickTabs(proxy.checkId)
  75 +
  76 + }
  77 + },4000)
  78 + }
48 79
49 const arrowClick=(val)=>{ 80 const arrowClick=(val)=>{
50 if(val=='right'){ 81 if(val=='right'){
@@ -76,6 +107,7 @@ export default { @@ -76,6 +107,7 @@ export default {
76 arrowClick, 107 arrowClick,
77 nextPage, 108 nextPage,
78 prePage, 109 prePage,
  110 + startInterval,
79 clickTabs 111 clickTabs
80 } 112 }
81 }, 113 },
@@ -85,8 +117,16 @@ export default { @@ -85,8 +117,16 @@ export default {
85 let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length) 117 let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length)
86 return this.listArray.slice(start, end) 118 return this.listArray.slice(start, end)
87 }, 119 },
  120 + isDiv:function (){
  121 + let length=this.dataShow.length;
  122 + let num=5-length;
  123 + return num;
  124 + },
88 pageNum: function(){ 125 pageNum: function(){
89 return Math.ceil(this.listArray.length / this.pageSize) || 1 ; 126 return Math.ceil(this.listArray.length / this.pageSize) || 1 ;
90 } 127 }
91 - } 128 + },
  129 + unmounted () {
  130 + clearInterval(this.timer)
  131 + },
92 } 132 }
  1 +// 获取状态
  2 +const indirectManage = () => {
  3 + const store = Vuex.useStore()
  4 +
  5 + // 用toRef获取 busId，有相应性，可以直接修改state
  6 + const busId = Vue.toRef(store.state, 'busId')
  7 +
  8 + return {
  9 + busId
  10 + }
  11 +}
1 export default { 12 export default {
2 name: 'performance', 13 name: 'performance',
3 template: '', 14 template: '',
@@ -11,7 +22,8 @@ export default { @@ -11,7 +22,8 @@ export default {
11 domainName:sessionStorage.getItem('domainName'), 22 domainName:sessionStorage.getItem('domainName'),
12 apiUrl:'/api-web/sxview/getBusinessAvailability', 23 apiUrl:'/api-web/sxview/getBusinessAvailability',
13 kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4', 24 kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
14 - busId:'247c0c978f574285bf642f55611ea75d', 25 + // busId:'247c0c978f574285bf642f55611ea75d',
  26 + busId:'',
15 performanceData:'', 27 performanceData:'',
16 xAxisData:'', 28 xAxisData:'',
17 yAxisData:'', 29 yAxisData:'',
@@ -24,6 +36,14 @@ export default { @@ -24,6 +36,14 @@ export default {
24 const xAxisData=Vue.ref(); 36 const xAxisData=Vue.ref();
25 const yAxisData=Vue.ref([]); 37 const yAxisData=Vue.ref([]);
26 const legendData=Vue.ref([]); 38 const legendData=Vue.ref([]);
  39 + // 获取状态
  40 + const { busId} = indirectManage()
  41 + // 监听编辑状态
  42 + Vue.watch(() =>busId.value, (newVal, oldVlaue) => {
  43 + // console.log("333",busId.value)
  44 + proxy.busId=busId.value
  45 + proxy.getData();
  46 + });
27 // 半透明的颜色值 47 // 半透明的颜色值
28 const colorArr1 = [ 48 const colorArr1 = [
29 'rgba(151,213,244, 0.8)', 49 'rgba(151,213,244, 0.8)',
@@ -34,7 +34,7 @@ @@ -34,7 +34,7 @@
34 </div> 34 </div>
35 </li> 35 </li>
36 </ul> 36 </ul>
37 - <div class="statisticsTotal">资源总量</div> 37 +<!-- <div class="statisticsTotal">资源总量</div>-->
38 </div> 38 </div>
39 39
40 </el-carousel-item> 40 </el-carousel-item>
@@ -23,6 +23,7 @@ export default { @@ -23,6 +23,7 @@ export default {
23 }, 23 },
24 setup(props, {attrs, slots, emit}) { 24 setup(props, {attrs, slots, emit}) {
25 const {proxy} = Vue.getCurrentInstance(); 25 const {proxy} = Vue.getCurrentInstance();
  26 + let resourceStatisticsData=Vue.ref();
26 27
27 // 获取状态 28 // 获取状态
28 const { busId} = indirectManage() 29 const { busId} = indirectManage()
@@ -45,10 +46,12 @@ export default { @@ -45,10 +46,12 @@ export default {
45 if(data && data.data){ 46 if(data && data.data){
46 // proxy.resourceStatisticsData=data.data; 47 // proxy.resourceStatisticsData=data.data;
47 let resData=data.data; 48 let resData=data.data;
48 - if(resData.length<4){  
49 - for(let i=0;i<4-resData.length;i++){ 49 + let length=resData.length;
  50 + if(length<4){
  51 + for(let i=0;i<4-length;i++){
  52 + console.log("&&&",i)
50 resData.push({ 53 resData.push({
51 - "resTypeAllNum": 2, 54 + "resTypeAllNum": 0,
52 "code": "other", 55 "code": "other",
53 "name": "其他", 56 "name": "其他",
54 "excellentNum": 0, 57 "excellentNum": 0,
@@ -59,12 +62,8 @@ export default { @@ -59,12 +62,8 @@ export default {
59 "goodPercent": 0 62 "goodPercent": 0
60 }) 63 })
61 } 64 }
62 -  
63 } 65 }
64 proxy.resourceStatisticsData=resData; 66 proxy.resourceStatisticsData=resData;
65 -  
66 -  
67 -  
68 } 67 }
69 68
70 }) 69 })