Merge branch 'master-500-dev-lushangqing' into 'master-500-dev'

背景组件、圆环百分比组件、进度条组件、系统信息组件增加标题及边框样式



See merge request !36

@@ -18,6 +18,14 @@ export const monitorBgBorder = {
         placeholder: '',
         placeholder: '',
         value: '背景',
         value: '背景',
       },
       },
+      {
+        type: 'custom-upload',
+        label: '标题图标',
+        name: 'titleIcon',
+        required: false,
+        placeholder: '',
+        value:  require("../../../../../../../assets/images/monitor/capacityAnalysis/icon-plat-info.png"),
+      },
       [{
       [{
         name: '标题设置',
         name: '标题设置',
         list: [
         list: [

@@ -42,8 +42,82 @@ export const monitorCustomPiePercentageCard = {
         ],
         ],
         value: 'row'
         value: 'row'
       },
       },
+      {
+        type: 'custom-upload',
+        label: '标题图标',
+        name: 'imageAdress',
+        required: false,
+        placeholder: '',
+        value:  '',
+      },
       [
       [
         {
         {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '是否有标题',
+              name: 'isTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '标题名称',
+              name: 'titleName',
+              required: false,
+              placeholder: '',
+              value: 'vmware-80.12.89.77',
+            },
+
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'left'
+            },
+
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'titleFontSize',
+              required: false,
+              placeholder: '',
+              value: '18'
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'titleColor',
+              required: false,
+              placeholder: '',
+              value: '#666'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'titleFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ]
+        },
+        {
           name: '进度条设置',
           name: '进度条设置',
           list: [
           list: [
             {
             {

@@ -31,6 +31,30 @@ export const monitorProgressInformation = {
         value: ''
         value: ''
       },
       },
       {
       {
+        type: 'el-switch',
+        label: '加边框',
+        name: 'isBorder',
+        required: false,
+        placeholder: '',
+        value: true
+      },
+      {
+        type: 'el-switch',
+        label: '加描边',
+        name: 'isShadow',
+        required: false,
+        placeholder: '',
+        value: true
+      },
+      {
+        type: 'vue-color',
+        label: '边框颜色',
+        name: 'borderColor',
+        required: false,
+        placeholder: '',
+        value: 'rgba(151, 151, 151, 0.13)',
+      },
+      {
         type: 'el-select',
         type: 'el-select',
         label: '显示',
         label: '显示',
         name: 'flexFlow',
         name: 'flexFlow',

@@ -50,6 +50,14 @@ export const monitorSystemInformation = {
         placeholder: '',
         placeholder: '',
         value:  require("../../../../../../../assets/images/monitor/capacityAnalysis/icon-sys-info.png"),
         value:  require("../../../../../../../assets/images/monitor/capacityAnalysis/icon-sys-info.png"),
       },
       },
+      {
+        type: 'custom-upload',
+        label: '信息图片',
+        name: 'infoImageAdress',
+        required: false,
+        placeholder: '',
+        value:  require("../../../../../../../assets/images/monitor/capacityAnalysis/aliyun.png"),
+      },
       [
       [
         {
         {
           name: '标题设置',
           name: '标题设置',
@@ -68,7 +76,7 @@ export const monitorSystemInformation = {
               name: 'titleName',
               name: 'titleName',
               required: false,
               required: false,
               placeholder: '',
               placeholder: '',
-              value: '系统信息',
+              value: '虚拟化容量汇总信息',
             },
             },
 
 
             {
             {
@@ -258,7 +266,7 @@ export const monitorSystemInformation = {
         name: 'width',
         name: 'width',
         required: false,
         required: false,
         placeholder: '该容器在1920px大屏中的宽度',
         placeholder: '该容器在1920px大屏中的宽度',
-        value: 795,
+        value: 1890,
       },
       },
       {
       {
         type: 'el-input-number',
         type: 'el-input-number',
@@ -266,7 +274,7 @@ export const monitorSystemInformation = {
         name: 'height',
         name: 'height',
         required: false,
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
         placeholder: '该容器在1080px大屏中的高度',
-        value: 158,
+        value: 190,
       },
       },
     ],
     ],
   }
   }

 <template>
 <template>
   <div class="basicInformation-container" :style="styleObj">
   <div class="basicInformation-container" :style="styleObj">
-    <div class="info-title" :style="titleStyle">{{optionsSetUp.titleName}}</div>
-
-
+    <div class="info-title" :style="titleStyle">
+      <img :src="imgStyle.titleIcon" alt="" class="icon-title">
+      {{optionsSetUp.titleName}}
+    </div>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -46,13 +47,20 @@ export default {
     },
     },
     titleStyle(){
     titleStyle(){
       return{
       return{
-        'display':this.transStyle.isTitle?'block':'none',
+        'display':this.transStyle.isTitle?'flex':'none',
         'text-align':this.transStyle.textAlign,
         'text-align':this.transStyle.textAlign,
+        'justify-content':this.transStyle.textAlign=='left'?'start':this.transStyle.textAlign=='center'?'center':'flex-end',
         'font-size':this.transStyle.titleFontSize+'px',
         'font-size':this.transStyle.titleFontSize+'px',
         color: this.transStyle.titleColor,
         color: this.transStyle.titleColor,
         'font-weight': this.transStyle.titleFontWeight
         'font-weight': this.transStyle.titleFontWeight
       }
       }
-    }
+    },
+    //图片样式
+    imgStyle(){
+      return{
+        titleIcon:this.transStyle.titleIcon
+      }
+    },
 
 
 
 
   },
   },
@@ -107,5 +115,10 @@ export default {
 <style scoped lang="scss">
 <style scoped lang="scss">
 .info-title{
 .info-title{
   padding:5px;
   padding:5px;
+  display: flex;
+  align-items: center;
+}
+.icon-title{
+  margin-right:5px;
 }
 }
 </style>
 </style>

 <template>
 <template>
-  <div :style="styleObj" class="percentContainer">
-    <div class="percent-item" :style="percentItemStyle" v-for="item in percentData">
-      <v-chart :options="item.options" autoresize/>
-      <div class="chart-title" :style="titleStyle">{{ item.name }}</div>
+  <div :style="styleObj" class="">
+    <div class="percent-title" :style="titleStyle">
+      <img :src="imgStyle.imageAdress" alt="" class="icon-title">
+      {{ optionsSetup.titleName }}
     </div>
     </div>
+    <div class="percentContainer" :style="flexStyle">
+      <div class="percent-item" :style="percentItemStyle" v-for="item in percentData">
+        <v-chart :options="item.options" autoresize/>
+        <div class="chart-title" :style="subTitleStyle">{{ item.name }}</div>
+      </div>
+    </div>
+
   </div>
   </div>
 </template>
 </template>
 
 
@@ -127,9 +134,14 @@ export default {
         left: this.optionsStyle.left + "px",
         left: this.optionsStyle.left + "px",
         top: this.optionsStyle.top + "px",
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background,
         background: this.optionsSetup.background,
-        'flex-flow':this.optionsSetup.flexFlow
       };
       };
     },
     },
+    flexStyle(){
+      return{
+        'flex-flow':this.optionsSetup.flexFlow
+
+      }
+    },
     //环形图样式
     //环形图样式
     percentItemStyle(){
     percentItemStyle(){
       let length=this.percentData.length;
       let length=this.percentData.length;
@@ -141,14 +153,31 @@ export default {
         height: width + "px",
         height: width + "px",
       }
       }
     },
     },
-    //下标题样式
+    //标题样式设置
     titleStyle(){
     titleStyle(){
       return{
       return{
+        'display':this.optionsSetup.isTitle?'flex':'none',
+        'text-align':this.optionsSetup.textAlign,
+        'justify-content':this.optionsSetup.textAlign=='left'?'start':this.optionsSetup.textAlign=='center'?'center':'flex-end',
+        'font-size':this.optionsSetup.titleFontSize+'px',
+        color: this.optionsSetup.titleColor,
+        'font-weight': this.optionsSetup.titleFontWeight
+      }
+    },
+    //下标题样式
+    subTitleStyle(){
+      return{
         'font-size':this.optionsSetup.textFontSize+'px',
         'font-size':this.optionsSetup.textFontSize+'px',
         color: this.optionsSetup.textColor,
         color: this.optionsSetup.textColor,
         'font-weight': this.optionsSetup.textFontWeight
         'font-weight': this.optionsSetup.textFontWeight
       }
       }
-    }
+    },
+    //图片样式
+    imgStyle(){
+      return{
+        imageAdress:this.optionsSetup.imageAdress,
+      }
+    },
 
 
   },
   },
   watch: {
   watch: {
@@ -419,4 +448,13 @@ export default {
    right:0;
    right:0;
    bottom:20px;*/
    bottom:20px;*/
 }
 }
+.percent-title{
+  padding:5px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.icon-title{
+  margin-right:5px;
+}
 </style>
 </style>

@@ -67,7 +67,9 @@ export default {
     //横排竖排 排版设置
     //横排竖排 排版设置
     itemStyle(){
     itemStyle(){
       return{
       return{
-        width:this.optionsSetup.flexFlow=='column'?'100%':'auto'
+        width:this.optionsSetup.flexFlow=='column'?'100%':'auto',
+        'border':this.optionsSetup.isBorder?'0.5px solid '+this.optionsSetup.borderColor:'none',
+        'box-shadow':this.optionsSetup.isShadow?'0px 3px 12px '+this.optionsSetup.borderColor:'none'
       }
       }
     },
     },
     //标题样式设置
     //标题样式设置
@@ -183,7 +185,7 @@ export default {
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 .progressContainer{
 .progressContainer{
-  box-sizing: content-box;
+  //box-sizing: content-box;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: space-around;
   justify-content: space-around;
@@ -192,7 +194,12 @@ export default {
   font-size: 14px;
   font-size: 14px;
   text-align: left;
   text-align: left;
   flex:1;
   flex:1;
-  margin:10px 20px;
+  padding:10px 20px;
+  border:1px solid #ccc;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-around;
+
 }
 }
 .progress-title-proposal{
 .progress-title-proposal{
   margin-top:20px;
   margin-top:20px;

@@ -5,6 +5,9 @@
       {{ optionsSetup.titleName }}
       {{ optionsSetup.titleName }}
     </div>
     </div>
     <div class="systemContainer" :style="containerStyle">
     <div class="systemContainer" :style="containerStyle">
+      <div class="system-item system-item-img">
+        <img :src="imgStyle.infoImageAdress" alt="">
+      </div>
       <div class="system-item" :style="itemStyle"  v-for="item in systemData">
       <div class="system-item" :style="itemStyle"  v-for="item in systemData">
         <div class="system-img"><img :src="'/src/assets/images/monitor/capacityAnalysis/'+item.code+'.png'" alt=""></div>
         <div class="system-img"><img :src="'/src/assets/images/monitor/capacityAnalysis/'+item.code+'.png'" alt=""></div>
         <div class="system-info" :style="titleProposalStyle">
         <div class="system-info" :style="titleProposalStyle">
@@ -51,7 +54,8 @@ export default {
     //图片样式
     //图片样式
     imgStyle(){
     imgStyle(){
       return{
       return{
-        imageAdress:this.optionsSetup.imageAdress
+        imageAdress:this.optionsSetup.imageAdress,
+        infoImageAdress:this.optionsSetup.infoImageAdress
       }
       }
     },
     },
     //横排竖排样式
     //横排竖排样式
@@ -83,6 +87,7 @@ export default {
       return{
       return{
         'display':this.optionsSetup.isTitle?'flex':'none',
         'display':this.optionsSetup.isTitle?'flex':'none',
         'text-align':this.optionsSetup.textAlign,
         'text-align':this.optionsSetup.textAlign,
+        'justify-content':this.optionsSetup.textAlign=='left'?'start':this.optionsSetup.textAlign=='center'?'center':'flex-end',
         'font-size':this.optionsSetup.titleFontSize+'px',
         'font-size':this.optionsSetup.titleFontSize+'px',
         color: this.optionsSetup.titleColor,
         color: this.optionsSetup.titleColor,
         'font-weight': this.optionsSetup.titleFontWeight
         'font-weight': this.optionsSetup.titleFontWeight
@@ -201,6 +206,7 @@ export default {
   width: 100%;
   width: 100%;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
+  margin-bottom: 10px;
 }
 }
 .icon-title{
 .icon-title{
   margin-right:5px;
   margin-right:5px;
@@ -210,7 +216,7 @@ export default {
   margin:10px 20px;
   margin:10px 20px;
 }
 }
 .system-info{
 .system-info{
-  padding:10px 5px;
+  padding:20px 5px 10px;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;