Merge pull request #345 from dataease/pr@dev@refactor_panel-rectangle-attr

frontend/src/components/canvas/components/RectangleAttr.vue

@@ -32,13 +32,29 @@
         </el-tooltip>
       </div>
 
+      <el-tooltip :content="$t('panel.borderRadius')">
+        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-fangxing-" />
+      </el-tooltip>
+
+      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-input v-model="styleInfo.borderRadius" type="number" size="mini" min="0" max="100" step="1" @change="styleChange" />
+      </div>
+
+      <el-tooltip :content="$t('panel.opacity')">
+        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
+      </el-tooltip>
+
+      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
+      </div>
+
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip content="边框颜色">
             <i class="iconfont icon-huabi" @click="goBoardColor" />
           </el-tooltip>
           <div :style="boardDivColor" />
-          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
 
@@ -48,9 +64,10 @@
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
-          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
         </div>
       </div>
+
     </div>
   </el-card>
 </template>
@@ -101,7 +118,20 @@ export default {
       }, {
         value: '5',
         label: '5'
-      }]
+      }],
+      innerOpacity: 0
+    }
+  },
+  watch: {
+    innerOpacity: {
+      handler(oldVal, newVal) {
+        this.styleInfo['opacity'] = this.innerOpacity / 100
+      }
+    }
+  },
+  mounted() {
+    if (this.styleInfo['opacity']) {
+      this.innerOpacity = this.styleInfo['opacity'] * 100
     }
   },
   computed: {
@@ -176,7 +206,7 @@ export default {
   .el-card-main {
     height: 34px;
     z-index: 10;
-    width: 210px;
+    width: 400px;
     position: absolute;
 
   }