Merge pull request #285 from dataease/pr@dev@feat_panel_rectangle-radius

feat:仪表板矩形组件增加边框弧度设置

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

@@ -32,6 +32,14 @@
         </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" />
+      </div>
+
       <el-tooltip :content="$t('panel.opacity')">
         <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
       </el-tooltip>
@@ -194,8 +202,8 @@ export default {
   }
   .el-card-main {
     height: 34px;
-    z-index: 1000000000;
+    z-index: 10;
-    width: 300px;
+    width: 400px;
     position: absolute;
 
   }

frontend/src/components/canvas/custom-component/component-list.js

@@ -122,7 +122,8 @@ const list = [
       borderStyle: 'solid',
       borderWidth: 1,
       borderColor: '#000000',
-      backgroundColor: '#ffffff'
+      backgroundColor: '#ffffff',
+      borderRadius: 0
     }
   },
   {

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">&#xe603;</span>
+                <div class="name">弧形框</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">弧形框</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe642;</span>
                 <div class="name">透明</div>
@@ -294,9 +306,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1626919869905') format('woff2'),
+  src: url('iconfont.woff2?t=1626927148990') format('woff2'),
-       url('iconfont.woff?t=1626919869905') format('woff'),
+       url('iconfont.woff?t=1626927148990') format('woff'),
-       url('iconfont.ttf?t=1626919869905') format('truetype');
+       url('iconfont.ttf?t=1626927148990') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -322,6 +334,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-weibiaoti-1"></span>
+            <div class="name">
+              弧形框
+            </div>
+            <div class="code-name">.icon-weibiaoti-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-weibiaoti-"></span>
+            <div class="name">
+              弧形框
+            </div>
+            <div class="code-name">.icon-weibiaoti-
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-touming"></span>
             <div class="name">
@@ -682,6 +712,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-weibiaoti-1"></use>
+                </svg>
+                <div class="name">弧形框</div>
+                <div class="code-name">#icon-weibiaoti-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weibiaoti-"></use>
+                </svg>
+                <div class="name">弧形框</div>
+                <div class="code-name">#icon-weibiaoti-</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-touming"></use>

frontend/src/styles/deicon/iconfont.css

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

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "12617190",
+      "name": "弧形框",
+      "font_class": "weibiaoti-1",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "12617065",
+      "name": "弧形框",
+      "font_class": "weibiaoti-",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
     {
       "icon_id": "4454064",
       "name": "透明",