update

report-ui/src/views/report/bigscreen/designer/form/dynamicAddTable.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>表格</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped></style>

report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue

@@ -10,7 +10,11 @@
       <template v-for="(item, index) in options">
         <div v-if="isShowForm(item, '[object Object]')" :key="index">
           <el-form-item
-            v-if="inputShow[item.name] && item.type != 'dycustComponents'"
+            v-if="
+              inputShow[item.name] &&
+                item.type != 'dycustComponents' &&
+                item.type != 'dynamic-add-table'
+            "
             :label="item.label"
             :prop="item.name"
             :required="item.required"
@@ -145,6 +149,11 @@
             :chart-type="item.chartType"
             @change="changed($event, item.name)"
           />
+          <dynamic-add-table
+            v-if="item.type == 'dynamic-add-table' && inputShow[item.name]"
+            v-model="formData[item.name]"
+            @change="changed($event, item.name)"
+          />
         </div>
         <div v-else-if="isShowForm(item, '[object Array]')" :key="'a-' + index">
           <el-collapse accordion>
@@ -274,13 +283,15 @@ import "codemirror/mode/sql/sql.js";
 import "codemirror/mode/shell/shell.js";
 import dynamicComponents from "./dynamicComponents.vue";
 import customColorComponents from "./customColorComponents";
+import dynamicAddTable from "./dynamicAddTable.vue";
 export default {
   name: "DynamicForm",
   components: {
     ColorPicker,
     vueJsonEditor,
     dynamicComponents,
-    customColorComponents
+    customColorComponents,
+    dynamicAddTable
   },
   model: {
     prop: "value",

report-ui/src/views/report/bigscreen/designer/tools.js

@@ -869,9 +869,54 @@ const widgetTools = [
     label: '表格',
     icon: 'iconbiaoge',
     options: {
-      setup: [],
+      setup: [
+        {
+          type: 'el-input-text',
+          label: '图层名称',
+          name: 'layerName',
+          required: false,
+          placeholder: '',
+          value: '表格',
+        },
+        {
+          type: 'dynamic-add-table',
+        }
+      ],
       data: [],
-      position: []
+      position: [
+        {
+          type: 'el-input-number',
+          label: '左边距',
+          name: 'left',
+          required: false,
+          placeholder: 'px',
+          value: 0,
+        },
+        {
+          type: 'el-input-number',
+          label: '上边距',
+          name: 'top',
+          required: false,
+          placeholder: 'px',
+          value: 0,
+        },
+        {
+          type: 'el-input-number',
+          label: '宽度',
+          name: 'width',
+          required: false,
+          placeholder: '该容器在1920px大屏中的宽度',
+          value: 600,
+        },
+        {
+          type: 'el-input-number',
+          label: '高度',
+          name: 'height',
+          required: false,
+          placeholder: '该容器在1080px大屏中的高度',
+          value: 300,
+        },
+      ]
     }
   },
   {

report-ui/src/views/report/bigscreen/designer/widget/temp.vue

@@ -29,6 +29,7 @@ import WidgetFunnel from "./widgetFunnel.vue";
 import WidgetGauge from "./widgetGauge.vue";
 import WidgetPieNightingaleRoseArea from "./pie/widgetPieNightingaleRoseArea";
 import widgetTable from "./widgetTable.vue";
+import widgetMap from "./widgetMap.vue";
 export default {
   name: "WidgetTemp",
   components: {
@@ -49,7 +50,8 @@ export default {
     WidgetFunnel,
     WidgetGauge,
     WidgetPieNightingaleRoseArea,
-    widgetTable
+    widgetTable,
+    widgetMap
   },
   model: {
     prop: "value",

report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue

@@ -1,3 +1,20 @@
 <template>
-  <div>表格</div>
+  <div class="table">
+    <div class="table_header">
+      <div>序号</div>
+      <div>列1</div>
+      <div>列2</div>
+      <div>列3</div>
+    </div>
+    <div class="table_content">
+      <div class="table_item">
+        <div>1</div>
+        <div>我们是第一行</div>
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped></style>