Authored by 鲁尚清

虚拟化容量分析及云平台容量分析二级页面趋势图样式调整

@@ -184,6 +184,18 @@ export const monitorCustomBarLineChart = { @@ -184,6 +184,18 @@ export const monitorCustomBarLineChart = {
184 value: 'left' 184 value: 'left'
185 }, 185 },
186 { 186 {
  187 + type: 'el-select',
  188 + label: '标题垂直位置',
  189 + name: 'textAlignVertical',
  190 + required: false,
  191 + placeholder: '',
  192 + selectOptions: [
  193 + {code: 'top', name: '靠上'},
  194 + {code: 'bottom', name: '靠下'},
  195 + ],
  196 + value: 'top'
  197 + },
  198 + {
187 type: 'el-input-text', 199 type: 'el-input-text',
188 label: '副标题', 200 label: '副标题',
189 name: 'subText', 201 name: 'subText',
@@ -170,6 +170,18 @@ export const monitorCustomLineTrend = { @@ -170,6 +170,18 @@ export const monitorCustomLineTrend = {
170 value: 'left' 170 value: 'left'
171 }, 171 },
172 { 172 {
  173 + type: 'el-select',
  174 + label: '标题垂直位置',
  175 + name: 'textAlignVertical',
  176 + required: false,
  177 + placeholder: '',
  178 + selectOptions: [
  179 + {code: 'top', name: '靠上'},
  180 + {code: 'bottom', name: '靠下'},
  181 + ],
  182 + value: 'top'
  183 + },
  184 + {
173 type: 'el-input-text', 185 type: 'el-input-text',
174 label: '副标题', 186 label: '副标题',
175 name: 'subText', 187 name: 'subText',
@@ -268,7 +268,7 @@ @@ -268,7 +268,7 @@
268 imgSizeStyle() { 268 imgSizeStyle() {
269 return { 269 return {
270 "width": this.transStyle.pictureSize + "px", 270 "width": this.transStyle.pictureSize + "px",
271 - "height" : $(".basic-ul-right").height() 271 + // "height" : $(".basic-ul-right").height()
272 } 272 }
273 }, 273 },
274 //监控地址 274 //监控地址
@@ -369,7 +369,6 @@ @@ -369,7 +369,6 @@
369 getEchartData(val) { 369 getEchartData(val) {
370 const data = this.queryEchartsData(val); 370 const data = this.queryEchartsData(val);
371 data.then(res => { 371 data.then(res => {
372 - console.log("1111",res)  
373 if (res && res[0].code == 0){ 372 if (res && res[0].code == 0){
374 this.informationDataAll = res[0].data; 373 this.informationDataAll = res[0].data;
375 if (this.informationDataAll && this.informationDataAll.length > 0) { 374 if (this.informationDataAll && this.informationDataAll.length > 0) {
@@ -189,7 +189,11 @@ export default { @@ -189,7 +189,11 @@ export default {
189 fontWeight: optionsSetup.subTextFontWeight, 189 fontWeight: optionsSetup.subTextFontWeight,
190 fontSize: optionsSetup.subTextFontSize 190 fontSize: optionsSetup.subTextFontSize
191 }; 191 };
192 - title.top='8px'; 192 + if(optionsSetup.textAlignVertical=='bottom'){
  193 + title.bottom='0';
  194 + }else{
  195 + title.top='8px';
  196 + }
193 this.options.title = title; 197 this.options.title = title;
194 }, 198 },
195 // X轴设置 199 // X轴设置
@@ -142,7 +142,11 @@ export default { @@ -142,7 +142,11 @@ export default {
142 fontWeight: optionsSetup.subTextFontWeight, 142 fontWeight: optionsSetup.subTextFontWeight,
143 fontSize: optionsSetup.subTextFontSize 143 fontSize: optionsSetup.subTextFontSize
144 }; 144 };
145 - title.top='8px'; 145 + if(optionsSetup.textAlignVertical=='bottom'){
  146 + title.bottom='0';
  147 + }else{
  148 + title.top='8px';
  149 + }
146 this.options.title = title; 150 this.options.title = title;
147 }, 151 },
148 // X轴设置 152 // X轴设置
@@ -14,7 +14,8 @@ @@ -14,7 +14,8 @@
14 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 - <div class="wave-title" :style="subTitleStyle">当前使用率</div> 17 + <div class="wave-title" :style="subTitleStyle" v-if="index==0">当前使用率</div>
  18 + <div class="wave-title" :style="subTitleStyle" v-if="index==1">使用增长率</div>
18 </div> 19 </div>
19 </div> 20 </div>
20 21
@@ -161,7 +162,7 @@ export default { @@ -161,7 +162,7 @@ export default {
161 return { 162 return {
162 /* width: width + "px", 163 /* width: width + "px",
163 height: width + "px",*/ 164 height: width + "px",*/
164 - margin:this.optionsSetup.flexFlow=='column'?'5px 10px':'10px' 165 + margin:this.optionsSetup.flexFlow=='column'?'5px 10px':'10px 15px'
165 } 166 }
166 }, 167 },
167 //波纹样式 168 //波纹样式
@@ -307,9 +308,13 @@ export default { @@ -307,9 +308,13 @@ export default {
307 justify-content: space-around; 308 justify-content: space-around;
308 } 309 }
309 .fill-item{ 310 .fill-item{
310 - width:100%;height:100%; 311 + //width:100%;
  312 + height:100%;
311 //flex: 1; 313 //flex: 1;
312 margin:10px; 314 margin:10px;
  315 + align-items: start;
  316 + display: flex;
  317 + flex-flow: column;
313 } 318 }
314 .circle{ 319 .circle{
315 background-image: linear-gradient(20deg, #5a8ef5 , #aeedf1); 320 background-image: linear-gradient(20deg, #5a8ef5 , #aeedf1);
@@ -358,9 +363,11 @@ export default { @@ -358,9 +363,11 @@ export default {
358 font-size: 20px; 363 font-size: 20px;
359 } 364 }
360 .wave-title{ 365 .wave-title{
361 - padding:10px; 366 + padding:10px 0;
  367 + margin-top:10px;
362 } 368 }
363 .fillContainer-title{ 369 .fillContainer-title{
364 padding:15px; 370 padding:15px;
  371 + margin-bottom:15px;
365 } 372 }
366 </style> 373 </style>