feat-表单增加输入框

report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-input.js

@@ -0,0 +1,100 @@
+export const widgetInput = {
+  code: 'widget-input',
+  type: 'form',
+  tabName: '表单',
+  label: '输入框',
+  icon: 'iconchaolianjie',
+  options: {
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '输入框',
+      },
+      {
+        type: 'el-input-text',
+        label: '字段属性值',
+        name: 'field',
+        required: false,
+        placeholder: '请输入',
+        value: '',
+      },
+      {
+        type: 'vue-color',
+        label: '字体颜色',
+        name: 'color',
+        required: false,
+        placeholder: '',
+        value: '#FAD400',
+      },
+      {
+        type: 'vue-color',
+        label: '字体背景',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: 'rgba(115,170,229,.5)',
+      },
+      {
+        type: 'el-select',
+        label: '关联图表',
+        name: 'assChart',
+        required: false,
+        placeholder: '',
+        multiple: true,
+        selectOptions: [],
+        value: '',
+      },
+      {
+        type: 'el-select',
+        label: '触发事件',
+        name: 'event',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'change', name: 'change'},
+          {code: 'blur', name: 'blur'},
+          {code: 'focus', name: 'focus'},
+        ],
+        value: 'change',
+      }
+    ],
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 100,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 40,
+      },
+    ],
+  }
+}

report-ui/src/views/bigscreenDesigner/designer/tools/main.js

@@ -38,7 +38,8 @@ import { widgetWordCloud } from "./configure/wordcloudCharts/widget-word-cloud";
 import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
 import { widgetRadar } from "./configure/radarCharts/widget-radar";
 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
-import { widgetSelect } from "./configure/form/widget-select"
+import { widgetSelect } from "./configure/form/widget-select";
+import {widgetInput} from "./configure/form/widget-input";
 
 export const widgetTool = [
   // type=html类型的组件
@@ -73,5 +74,6 @@ export const widgetTool = [
   widgetHeatmap,
   widgetRadar,
   widgetBarLineStack,
-  widgetSelect
+  widgetSelect,
+  widgetInput
 ]

report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetInput.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-input
+    ref="input"
+    :style="styleObj"
+    v-model="inputValue" placeholder="请输入内容"
+    @[eventChange]="change"
+  />
+</template>
+<script>
+import {eventBus} from "@/utils/eventBus";
+
+export default {
+  name: "WidgetInput",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      inputValue: "",
+      optionsStyle: {},
+      optionsData: {},
+      optionsSetup: {},
+      options:{}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+      };
+    },
+    eventChange() {
+      return this.optionsSetup.event || "change";
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetup = val.setup;
+        this.optionsData = val.data;
+        this.optionsStyle = val.position;
+        this.setOptions()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsSetup = this.value.setup;
+    this.optionsData = this.value.data;
+    this.optionsStyle = this.value.position;
+    this.setOptions()
+  },
+  methods: {
+    change(event) {
+      const optionsSetup = this.optionsSetup;
+      const params = {};
+      params[optionsSetup.field] = event;
+      params["assChart"] = optionsSetup.assChart;
+      eventBus.$emit("eventParams", params);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ .el-select {
+  height: 100%;
+
+  .el-input {
+    height: 100%;
+
+    .el-input__inner {
+      height: 100%;
+    }
+  }
+}
+</style>

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

@@ -42,6 +42,7 @@ import widgetHeatmap from "./heatmap/widgetHeatmap";
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetSelect from "./form/widgetSelect";
+import widgetInput from "./form/widgetInput.vue";
 
 export default {
   name: "WidgetTemp",
@@ -77,6 +78,7 @@ export default {
     widgetRadar,
     widgetBarLineStackChart,
     widgetSelect,
+    widgetInput
   },
   model: {
     prop: "value",

report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue

@@ -53,6 +53,7 @@ import widgetHeatmap from "./heatmap/widgetHeatmap";
 import widgetRadar from "./radar/widgetRadar";
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetSelect from "./form/widgetSelect";
+import widgetInput from "./form/widgetInput.vue";
 
 export default {
   name: "Widget",
@@ -88,6 +89,7 @@ export default {
     widgetRadar,
     widgetBarLineStackChart,
     widgetSelect,
+    widgetInput
   },
   model: {
     prop: "value",