feat:仪表板矩形组件增加透明度样式设置

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

@@ -32,6 +32,14 @@
         </el-tooltip>
       </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" />
+      </div>
+
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip content="边框颜色">
@@ -51,6 +59,7 @@
           <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
         </div>
       </div>
+
     </div>
   </el-card>
 </template>
@@ -101,7 +110,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: {
@@ -173,7 +195,7 @@ export default {
   .el-card-main {
     height: 34px;
     z-index: 1000000000;
-    width: 210px;
+    width: 300px;
     position: absolute;
 
   }

frontend/src/lang/tw.js

@@ -1126,7 +1126,7 @@ export default {
     lineHeight: '行高',
     letterSpacing: '字間距',
     textAlign: '左右對齊',
-    opacity: '透明度',
+    opacity: '不透明度',
     verticalAlign: '上下對齊',
     text_align_left: '左對齊',
     text_align_center: '左右居中',

frontend/src/lang/zh.js

@@ -1127,7 +1127,7 @@ export default {
     lineHeight: '行高',
     letterSpacing: '字间距',
     textAlign: '左右对齐',
-    opacity: '透明度',
+    opacity: '不透明度',
     verticalAlign: '上下对齐',
     text_align_left: '左对齐',
     text_align_center: '左右居中',

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">透明</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61a;</span>
+                <div class="name">弧度</div>
+                <div class="code-name">&amp;#xe61a;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe62d;</span>
                 <div class="name">放大</div>
@@ -282,9 +294,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1626147352097') format('woff2'),
+  src: url('iconfont.woff2?t=1626919869905') format('woff2'),
-       url('iconfont.woff?t=1626147352097') format('woff'),
+       url('iconfont.woff?t=1626919869905') format('woff'),
-       url('iconfont.ttf?t=1626147352097') format('truetype');
+       url('iconfont.ttf?t=1626919869905') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -310,6 +322,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-touming"></span>
+            <div class="name">
+              透明
+            </div>
+            <div class="code-name">.icon-touming
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fangxing-"></span>
+            <div class="name">
+              弧度
+            </div>
+            <div class="code-name">.icon-fangxing-
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-fangda"></span>
             <div class="name">
@@ -652,6 +682,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-touming"></use>
+                </svg>
+                <div class="name">透明</div>
+                <div class="code-name">#icon-touming</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fangxing-"></use>
+                </svg>
+                <div class="name">弧度</div>
+                <div class="code-name">#icon-fangxing-</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-fangda"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1626147352097') format('woff2'),
+  src: url('iconfont.woff2?t=1626919869905') format('woff2'),
-       url('iconfont.woff?t=1626147352097') format('woff'),
+       url('iconfont.woff?t=1626919869905') format('woff'),
-       url('iconfont.ttf?t=1626147352097') format('truetype');
+       url('iconfont.ttf?t=1626919869905') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-touming:before {
+  content: "\e642";
+}
+
+.icon-fangxing-:before {
+  content: "\e61a";
+}
+
 .icon-fangda:before {
   content: "\e62d";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "4454064",
+      "name": "透明",
+      "font_class": "touming",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "7311866",
+      "name": "弧度",
+      "font_class": "fangxing-",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
     {
       "icon_id": "20921234",
       "name": "放大",