Merge pull request #2136 from dataease/pr@dev@refactor_panel-grid

frontend/src/components/canvas/components/Editor/Grid.vue

@@ -23,8 +23,8 @@
         <path
           :d="pathD"
           fill="none"
-          stroke="rgba(64,158,255,0.8)"
-          stroke-width="1"
+          stroke="rgba(64,158,255,0.5)"
+          stroke-width="2"
         />
       </pattern>
     </defs>

frontend/src/components/canvas/components/Toolbar.vue

@@ -41,6 +41,12 @@
       <el-tooltip :content="$t('panel.params_setting')">
         <el-button class="icon iconfont-tb icon-canshu" size="mini" circle @click="openOuterParamsSet" />
       </el-tooltip>
+      <el-tooltip v-if="!canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_close')">
+        <el-button class="icon iconfont-tb icon-wangge-close" size="mini" circle @click="showGridChange" />
+      </el-tooltip>
+      <el-tooltip v-if="canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_open')">
+        <el-button class="icon iconfont-tb icon-wangge-open" size="mini" circle @click="showGridChange" />
+      </el-tooltip>
       <span style="float: right;margin-left: 10px">
         <el-button size="mini" :disabled="saveButtonDisabled" @click="save(false)">
           {{ $t('commons.save') }}
@@ -372,6 +378,9 @@ export default {
     auxiliaryMatrixChange() {
       this.canvasStyleData.auxiliaryMatrix = !this.canvasStyleData.auxiliaryMatrix
     },
+    showGridChange() {
+      this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid
+    },
     // 启用移动端布局
     openMobileLayout() {
       this.$store.commit('openMobileLayout')

frontend/src/lang/en.js

@@ -1605,6 +1605,9 @@ export default {
     matrix: 'matrix',
     suspension: 'suspension',
     new_element_distribution: 'New element Distribution',
+    aided_grid: 'Aided Grid',
+    aided_grid_open: 'Open',
+    aided_grid_close: 'Close',
     subject_no_edit: 'System Subject Can Not Edit',
     subject_name_not_null: 'Subject Name Can Not Be Null And Less Than 20 charts',
     is_enable: 'Enable',

frontend/src/lang/tw.js

@@ -1606,6 +1606,9 @@ export default {
     matrix: '矩陣',
     suspension: '懸浮',
     new_element_distribution: '當前元素移入分佈方式',
+    aided_grid: '辅助设计网格',
+    aided_grid_open: '打开',
+    aided_grid_close: '关闭',
     subject_no_edit: '繫統主題不能修改',
     subject_name_not_null: '主題名稱需要1~20字符',
     is_enable: '是否啟用',

frontend/src/lang/zh.js

@@ -1616,6 +1616,9 @@ export default {
     matrix: '矩阵',
     suspension: '悬浮',
     new_element_distribution: '当前元素移入分布方式',
+    aided_grid: '辅助设计网格',
+    aided_grid_open: '打开',
+    aided_grid_close: '关闭',
     subject_no_edit: '系统主题不能修改',
     subject_name_not_null: '主题名称需要1~20字符',
     is_enable: '是否启用',

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">&#xe60b;</span>
+                <div class="name">网格\表格</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">关闭网格</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe607;</span>
                 <div class="name">流媒体，媒体列表</div>
@@ -528,9 +540,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1648734668996') format('woff2'),
-       url('iconfont.woff?t=1648734668996') format('woff'),
-       url('iconfont.ttf?t=1648734668996') format('truetype');
+  src: url('iconfont.woff2?t=1650350932327') format('woff2'),
+       url('iconfont.woff?t=1650350932327') format('woff'),
+       url('iconfont.ttf?t=1650350932327') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -556,6 +568,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-wangge-open"></span>
+            <div class="name">
+              网格\表格
+            </div>
+            <div class="code-name">.icon-wangge-open
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wangge-close"></span>
+            <div class="name">
+              关闭网格
+            </div>
+            <div class="code-name">.icon-wangge-close
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-a-liumeitimeitiliebiao"></span>
             <div class="name">
@@ -1267,6 +1297,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-wangge-open"></use>
+                </svg>
+                <div class="name">网格\表格</div>
+                <div class="code-name">#icon-wangge-open</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wangge-close"></use>
+                </svg>
+                <div class="name">关闭网格</div>
+                <div class="code-name">#icon-wangge-close</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-a-liumeitimeitiliebiao"></use>

frontend/src/styles/deicon/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1648734668996') format('woff2'),
-       url('iconfont.woff?t=1648734668996') format('woff'),
-       url('iconfont.ttf?t=1648734668996') format('truetype');
+  src: url('iconfont.woff2?t=1650350932327') format('woff2'),
+       url('iconfont.woff?t=1650350932327') format('woff'),
+       url('iconfont.ttf?t=1650350932327') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-wangge-open:before {
+  content: "\e60b";
+}
+
+.icon-wangge-close:before {
+  content: "\e609";
+}
+
 .icon-a-liumeitimeitiliebiao:before {
   content: "\e607";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "4674763",
+      "name": "网格\表格",
+      "font_class": "wangge-open",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "28110370",
+      "name": "关闭网格",
+      "font_class": "wangge-close",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
     {
       "icon_id": "26621948",
       "name": "流媒体，媒体列表",

frontend/src/views/panel/SubjectSetting/index.vue

@@ -17,7 +17,7 @@
         <el-collapse-item :title="$t('panel.panel')" name="panel">
           <el-row class="selector-div">
             <background-selector class="attr-selector" />
-            <panel-aided-design class="attr-selector" />
+<!--            <panel-aided-design class="attr-selector" />-->
             <component-gap class="attr-selector" />
             <panel-refresh-time class="attr-selector" />
             <panel-view-result class="attr-selector" />