From fea7ceec9b1c127ab95ee721eac0d2d722fbd2f9 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 15 Apr 2021 10:33:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/MarkLine.vue     | 422 +++++++++---------
 .../canvas/components/Editor/Shape.vue        |  18 +-
 .../canvas/components/Editor/index.vue        |  22 +-
 .../widget/DeWidget/DeDrawingWidget.vue       |  21 +-
 .../widget/drawServiceImpl/MySelectImpl.js    |  87 ++++
 frontend/src/components/widget/index.js       |   3 +-
 .../widget/service/DrawWidgetService.js       |  83 ++++
 frontend/src/store/getters.js                 |   5 +-
 frontend/src/store/modules/application.js     |  30 +-
 frontend/src/views/panel/edit/index.vue       |  37 +-
 .../src/views/panel/filter/filterDialog.vue   |  23 +-
 frontend/src/views/panel/filter/index.vue     |  42 +-
 12 files changed, 512 insertions(+), 281 deletions(-)
 create mode 100644 frontend/src/components/widget/drawServiceImpl/MySelectImpl.js

diff --git a/frontend/src/components/canvas/components/Editor/MarkLine.vue b/frontend/src/components/canvas/components/Editor/MarkLine.vue
index 2ba5233d75..a07ccedc80 100644
--- a/frontend/src/components/canvas/components/Editor/MarkLine.vue
+++ b/frontend/src/components/canvas/components/Editor/MarkLine.vue
@@ -1,14 +1,14 @@
 <template>
-    <div class="mark-line">
-        <div
-            v-for="line in lines"
-            :key="line"
-            class="line"
-            :class="line.includes('x')? 'xline' : 'yline'"
-            :ref="line"
-            v-show="lineStatus[line] || false"
-        ></div>
-    </div>
+  <div class="mark-line">
+    <div
+      v-for="line in lines"
+      v-show="lineStatus[line] || false"
+      :key="line"
+      :ref="line"
+      class="line"
+      :class="line.includes('x')? 'xline' : 'yline'"
+    />
+  </div>
 </template>
 
 <script>
@@ -17,215 +17,215 @@ import { mapState } from 'vuex'
 import { getComponentRotatedStyle } from '@/components/canvas/utils/style'
 
 export default {
-    data() {
-        return {
-            lines: ['xt', 'xc', 'xb', 'yl', 'yc', 'yr'], // 分别对应三条横线和三条竖线
-            diff: 3, // 相距 dff 像素将自动吸附
-            lineStatus: {
-                xt: false,
-                xc: false,
-                xb: false,
-                yl: false,
-                yc: false,
-                yr: false,
+  data() {
+    return {
+      lines: ['xt', 'xc', 'xb', 'yl', 'yc', 'yr'], // 分别对应三条横线和三条竖线
+      diff: 3, // 相距 dff 像素将自动吸附
+      lineStatus: {
+        xt: false,
+        xc: false,
+        xb: false,
+        yl: false,
+        yc: false,
+        yr: false
+      }
+    }
+  },
+  computed: mapState([
+    'curComponent',
+    'componentData'
+  ]),
+  mounted() {
+    // 监听元素移动和不移动的事件
+    eventBus.$on('move', (isDownward, isRightward) => {
+      this.showLine(isDownward, isRightward)
+    })
+
+    eventBus.$on('unmove', () => {
+      this.hideLine()
+    })
+  },
+  methods: {
+    hideLine() {
+      Object.keys(this.lineStatus).forEach(line => {
+        this.lineStatus[line] = false
+      })
+    },
+
+    showLine(isDownward, isRightward) {
+      const lines = this.$refs
+      const components = this.componentData
+      const curComponentStyle = getComponentRotatedStyle(this.curComponent.style)
+      const curComponentHalfwidth = curComponentStyle.width / 2
+      const curComponentHalfHeight = curComponentStyle.height / 2
+
+      this.hideLine()
+      components.forEach(component => {
+        if (component == this.curComponent) return
+        const componentStyle = getComponentRotatedStyle(component.style)
+        const { top, left, bottom, right } = componentStyle
+        const componentHalfwidth = componentStyle.width / 2
+        const componentHalfHeight = componentStyle.height / 2
+
+        const conditions = {
+          top: [
+            {
+              isNearly: this.isNearly(curComponentStyle.top, top),
+              lineNode: lines.xt[0], // xt
+              line: 'xt',
+              dragShift: top,
+              lineShift: top
             },
+            {
+              isNearly: this.isNearly(curComponentStyle.bottom, top),
+              lineNode: lines.xt[0], // xt
+              line: 'xt',
+              dragShift: top - curComponentStyle.height,
+              lineShift: top
+            },
+            {
+              // 组件与拖拽节点的中间是否对齐
+              isNearly: this.isNearly(curComponentStyle.top + curComponentHalfHeight, top + componentHalfHeight),
+              lineNode: lines.xc[0], // xc
+              line: 'xc',
+              dragShift: top + componentHalfHeight - curComponentHalfHeight,
+              lineShift: top + componentHalfHeight
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.top, bottom),
+              lineNode: lines.xb[0], // xb
+              line: 'xb',
+              dragShift: bottom,
+              lineShift: bottom
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.bottom, bottom),
+              lineNode: lines.xb[0], // xb
+              line: 'xb',
+              dragShift: bottom - curComponentStyle.height,
+              lineShift: bottom
+            }
+          ],
+          left: [
+            {
+              isNearly: this.isNearly(curComponentStyle.left, left),
+              lineNode: lines.yl[0], // yl
+              line: 'yl',
+              dragShift: left,
+              lineShift: left
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.right, left),
+              lineNode: lines.yl[0], // yl
+              line: 'yl',
+              dragShift: left - curComponentStyle.width,
+              lineShift: left
+            },
+            {
+              // 组件与拖拽节点的中间是否对齐
+              isNearly: this.isNearly(curComponentStyle.left + curComponentHalfwidth, left + componentHalfwidth),
+              lineNode: lines.yc[0], // yc
+              line: 'yc',
+              dragShift: left + componentHalfwidth - curComponentHalfwidth,
+              lineShift: left + componentHalfwidth
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.left, right),
+              lineNode: lines.yr[0], // yr
+              line: 'yr',
+              dragShift: right,
+              lineShift: right
+            },
+            {
+              isNearly: this.isNearly(curComponentStyle.right, right),
+              lineNode: lines.yr[0], // yr
+              line: 'yr',
+              dragShift: right - curComponentStyle.width,
+              lineShift: right
+            }
+          ]
         }
-    },
-    computed: mapState([
-        'curComponent',
-        'componentData',
-    ]),
-    mounted() {
-        // 监听元素移动和不移动的事件
-        eventBus.$on('move', (isDownward, isRightward) => {
-            this.showLine(isDownward, isRightward)
+
+        const needToShow = []
+        const { rotate } = this.curComponent.style
+        Object.keys(conditions).forEach(key => {
+          // 遍历符合的条件并处理
+          conditions[key].forEach((condition) => {
+            if (!condition.isNearly) return
+            // 修改当前组件位移
+            this.$store.commit('setShapeSingleStyle', {
+              key,
+              value: rotate !== 0 ? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift
+            })
+
+            condition.lineNode && (condition.lineNode.style[key] = `${condition.lineShift}px`)
+            needToShow.push(condition.line)
+          })
         })
 
-        eventBus.$on('unmove', () => {
-            this.hideLine()
-        })
+        // 同一方向上同时显示三条线可能不太美观，因此才有了这个解决方案
+        // 同一方向上的线只显示一条，例如多条横条只显示一条横线
+        if (needToShow.length) {
+          this.chooseTheTureLine(needToShow, isDownward, isRightward)
+        }
+      })
     },
-    methods: {
-        hideLine() {
-            Object.keys(this.lineStatus).forEach(line => {
-                this.lineStatus[line] = false
-            })
-        },
 
-        showLine(isDownward, isRightward) {
-            const lines = this.$refs
-            const components = this.componentData
-            const curComponentStyle = getComponentRotatedStyle(this.curComponent.style)
-            const curComponentHalfwidth = curComponentStyle.width / 2
-            const curComponentHalfHeight = curComponentStyle.height / 2
+    translatecurComponentShift(key, condition, curComponentStyle) {
+      const { width, height } = this.curComponent.style
+      if (key === 'top') {
+        return Math.round(condition.dragShift - (height - curComponentStyle.height) / 2)
+      }
 
-            this.hideLine()
-            components.forEach(component => {
-                if (component == this.curComponent) return
-                const componentStyle = getComponentRotatedStyle(component.style)
-                const { top, left, bottom, right } = componentStyle
-                const componentHalfwidth = componentStyle.width / 2
-                const componentHalfHeight = componentStyle.height / 2
-
-                const conditions = {
-                    top: [
-                        {
-                            isNearly: this.isNearly(curComponentStyle.top, top),
-                            lineNode: lines.xt[0], // xt
-                            line: 'xt',
-                            dragShift: top,
-                            lineShift: top,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.bottom, top),
-                            lineNode: lines.xt[0], // xt
-                            line: 'xt',
-                            dragShift: top - curComponentStyle.height,
-                            lineShift: top,
-                        },
-                        {
-                            // 组件与拖拽节点的中间是否对齐
-                            isNearly: this.isNearly(curComponentStyle.top + curComponentHalfHeight, top + componentHalfHeight),
-                            lineNode: lines.xc[0], // xc
-                            line: 'xc',
-                            dragShift: top + componentHalfHeight - curComponentHalfHeight,
-                            lineShift: top + componentHalfHeight,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.top, bottom),
-                            lineNode: lines.xb[0], // xb
-                            line: 'xb',
-                            dragShift: bottom,
-                            lineShift: bottom,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.bottom, bottom),
-                            lineNode: lines.xb[0], // xb
-                            line: 'xb',
-                            dragShift: bottom - curComponentStyle.height,
-                            lineShift: bottom,
-                        },
-                    ],
-                    left: [
-                        {
-                            isNearly: this.isNearly(curComponentStyle.left, left),
-                            lineNode: lines.yl[0], // yl
-                            line: 'yl',
-                            dragShift: left,
-                            lineShift: left,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.right, left),
-                            lineNode: lines.yl[0], // yl
-                            line: 'yl',
-                            dragShift: left - curComponentStyle.width,
-                            lineShift: left,
-                        },
-                        {
-                            // 组件与拖拽节点的中间是否对齐
-                            isNearly: this.isNearly(curComponentStyle.left + curComponentHalfwidth, left + componentHalfwidth),
-                            lineNode: lines.yc[0], // yc
-                            line: 'yc',
-                            dragShift: left + componentHalfwidth - curComponentHalfwidth,
-                            lineShift: left + componentHalfwidth,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.left, right),
-                            lineNode: lines.yr[0], // yr
-                            line: 'yr',
-                            dragShift: right,
-                            lineShift: right,
-                        },
-                        {
-                            isNearly: this.isNearly(curComponentStyle.right, right),
-                            lineNode: lines.yr[0], // yr
-                            line: 'yr',
-                            dragShift: right - curComponentStyle.width,
-                            lineShift: right,
-                        },
-                    ],
-                }
-
-                const needToShow = []
-                const { rotate } = this.curComponent.style
-                Object.keys(conditions).forEach(key => {
-                    // 遍历符合的条件并处理
-                    conditions[key].forEach((condition) => {
-                        if (!condition.isNearly) return
-                        // 修改当前组件位移
-                        this.$store.commit('setShapeSingleStyle', {
-                            key,
-                            value: rotate !== 0? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift,
-                        })
-
-                        condition.lineNode.style[key] = `${condition.lineShift}px`
-                        needToShow.push(condition.line)
-                    })
-                })
-
-                // 同一方向上同时显示三条线可能不太美观，因此才有了这个解决方案
-                // 同一方向上的线只显示一条，例如多条横条只显示一条横线
-                if (needToShow.length) {
-                    this.chooseTheTureLine(needToShow, isDownward, isRightward)
-                }
-            })
-        },
-
-        translatecurComponentShift(key, condition, curComponentStyle) {
-            const { width, height } = this.curComponent.style
-            if (key === 'top') {
-                return Math.round(condition.dragShift - (height - curComponentStyle.height) / 2)
-            }
-
-            return Math.round(condition.dragShift - (width - curComponentStyle.width) / 2)
-        },
-
-        chooseTheTureLine(needToShow, isDownward, isRightward) {
-            // 如果鼠标向右移动 则按从右到左的顺序显示竖线 否则按相反顺序显示
-            // 如果鼠标向下移动 则按从下到上的顺序显示横线 否则按相反顺序显示
-            if (isRightward) {
-                if (needToShow.includes('yr')) {
-                    this.lineStatus.yr = true
-                } else if (needToShow.includes('yc')) {
-                    this.lineStatus.yc = true
-                } else if (needToShow.includes('yl')) {
-                    this.lineStatus.yl = true
-                }
-            } else {
-                // eslint-disable-next-line no-lonely-if
-                if (needToShow.includes('yl')) {
-                    this.lineStatus.yl = true
-                } else if (needToShow.includes('yc')) {
-                    this.lineStatus.yc = true
-                } else if (needToShow.includes('yr')) {
-                    this.lineStatus.yr = true
-                }
-            }
-
-            if (isDownward) {
-                if (needToShow.includes('xb')) {
-                    this.lineStatus.xb = true
-                } else if (needToShow.includes('xc')) {
-                    this.lineStatus.xc = true
-                } else if (needToShow.includes('xt')) {
-                    this.lineStatus.xt = true
-                }
-            } else {
-                // eslint-disable-next-line no-lonely-if
-                if (needToShow.includes('xt')) {
-                    this.lineStatus.xt = true
-                } else if (needToShow.includes('xc')) {
-                    this.lineStatus.xc = true
-                } else if (needToShow.includes('xb')) {
-                    this.lineStatus.xb = true
-                }
-            }
-        },
-
-        isNearly(dragValue, targetValue) {
-            return Math.abs(dragValue - targetValue) <= this.diff
-        },
+      return Math.round(condition.dragShift - (width - curComponentStyle.width) / 2)
     },
+
+    chooseTheTureLine(needToShow, isDownward, isRightward) {
+      // 如果鼠标向右移动 则按从右到左的顺序显示竖线 否则按相反顺序显示
+      // 如果鼠标向下移动 则按从下到上的顺序显示横线 否则按相反顺序显示
+      if (isRightward) {
+        if (needToShow.includes('yr')) {
+          this.lineStatus.yr = true
+        } else if (needToShow.includes('yc')) {
+          this.lineStatus.yc = true
+        } else if (needToShow.includes('yl')) {
+          this.lineStatus.yl = true
+        }
+      } else {
+        // eslint-disable-next-line no-lonely-if
+        if (needToShow.includes('yl')) {
+          this.lineStatus.yl = true
+        } else if (needToShow.includes('yc')) {
+          this.lineStatus.yc = true
+        } else if (needToShow.includes('yr')) {
+          this.lineStatus.yr = true
+        }
+      }
+
+      if (isDownward) {
+        if (needToShow.includes('xb')) {
+          this.lineStatus.xb = true
+        } else if (needToShow.includes('xc')) {
+          this.lineStatus.xc = true
+        } else if (needToShow.includes('xt')) {
+          this.lineStatus.xt = true
+        }
+      } else {
+        // eslint-disable-next-line no-lonely-if
+        if (needToShow.includes('xt')) {
+          this.lineStatus.xt = true
+        } else if (needToShow.includes('xc')) {
+          this.lineStatus.xc = true
+        } else if (needToShow.includes('xb')) {
+          this.lineStatus.xb = true
+        }
+      }
+    },
+
+    isNearly(dragValue, targetValue) {
+      return Math.abs(dragValue - targetValue) <= this.diff
+    }
+  }
 }
 </script>
 
diff --git a/frontend/src/components/canvas/components/Editor/Shape.vue b/frontend/src/components/canvas/components/Editor/Shape.vue
index c2ebc6bc61..9db1a349d0 100644
--- a/frontend/src/components/canvas/components/Editor/Shape.vue
+++ b/frontend/src/components/canvas/components/Editor/Shape.vue
@@ -3,13 +3,13 @@
     <span v-show="isActive()" class="iconfont icon-xiangyouxuanzhuan" @mousedown="handleRotate" />
     <span v-show="element.isLock" class="iconfont icon-suo" />
 
-<!--    <span v-show="isActive()" class="iconfont icon-more">-->
-<!--      <el-button-->
-<!--        icon="el-icon-more"-->
-<!--        type="text"-->
-<!--        size="small"-->
-<!--      />-->
-<!--    </span>-->
+    <!--    <span v-show="isActive()" class="iconfont icon-more">-->
+    <!--      <el-button-->
+    <!--        icon="el-icon-more"-->
+    <!--        type="text"-->
+    <!--        size="small"-->
+    <!--      />-->
+    <!--    </span>-->
     <div
       v-for="item in (isActive()? pointList : [])"
       :key="item"
@@ -335,9 +335,9 @@ export default {
           symmetricPoint
         })
 
-        console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
+        // console.log('this is test:' + JSON.stringify(this.element.propValue.viewId))
         this.$store.commit('setShapeStyle', style)
-        eventBus.$emit('resizing', this.element.propValue.viewId)
+        this.element.propValue && this.element.propValue.viewId && eventBus.$emit('resizing', this.element.propValue.viewId)
       }
 
       const up = () => {
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 06efece521..277591c938 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -30,8 +30,8 @@
         :id="'component' + item.id"
         class="component"
         :style="getComponentStyle(item.style)"
-        :element="item"
-        :item="item"
+        :service-name="item.widgetService.name"
+        :panel-id="panelInfo.id"
         @filter-value-change="filterValueChange"
       />
 
@@ -97,12 +97,18 @@ export default {
       isShowArea: false
     }
   },
-  computed: mapState([
-    'componentData',
-    'curComponent',
-    'canvasStyleData',
-    'editor'
-  ]),
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    ...mapState([
+      'componentData',
+      'curComponent',
+      'canvasStyleData',
+      'editor'
+    ])
+  },
+
   mounted() {
     // 获取编辑器元素
     this.$store.commit('getEditor')
diff --git a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
index ab37b9d57d..03bf5480d8 100644
--- a/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
+++ b/frontend/src/components/widget/DeWidget/DeDrawingWidget.vue
@@ -1,19 +1,30 @@
 <script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
 export default {
   name: 'DeDrawingWidget',
   functional: true,
   props: {
-    item: {
-      type: Object,
+    serviceName: {
+      type: String,
+      default: null
+    },
+    panelId: {
+      type: String,
       default: null
     }
   },
 
   render(createElement, context) {
-    const item = context.props.item
-    return createElement(item.component, {
+    const widgetInfo = ApplicationContext.getService(context.props.serviceName)
+    // const widgetInfo = context.props.widgetInfo
+    const panelId = context.props.panelId
+    const dialogInfo = widgetInfo.getDialogPanel && widgetInfo.getDialogPanel(panelId) || null
+    if (!dialogInfo) {
+      throw new Error('系统错误')
+    }
+    return createElement(dialogInfo.component, {
       props: {
-        element: item
+        element: dialogInfo
       },
       on: {
         'value-change': value => {
diff --git a/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js b/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
new file mode 100644
index 0000000000..69d0b5eff8
--- /dev/null
+++ b/frontend/src/components/widget/drawServiceImpl/MySelectImpl.js
@@ -0,0 +1,87 @@
+import { DrawWidgetService } from '../service/DrawWidgetService'
+
+const leftPanel = {
+//   name: 'text-select',
+  icon: 'iconfont icon-xialakuang',
+  label: '文本下拉',
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
+  options: {
+    refId: '1234567890',
+    attrs: {
+      multiple: false,
+      placeholder: '请选择',
+      datas: [],
+      key: 'id',
+      label: 'text',
+      value: 'id'
+    },
+    value: ''
+  },
+  defaultClass: 'text-filter',
+  component: 'de-select'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 200,
+    height: 22,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-select'
+}
+
+class MySelectImpl extends DrawWidgetService {
+  constructor(options = {}) {
+    Object.assign(options, { name: 'mySelectWidget' })
+    super(options)
+  }
+
+  initLeftPanel(uuid) {
+    uuid = uuid || this.uuid()
+    this.setLeftPanel(uuid, leftPanel)
+    return uuid
+    // console.log('this is first initWidget')
+  }
+
+  initFilterDialog(uuid) {
+    uuid = uuid || this.uuid()
+    this.setDialogPanel(uuid, dialogPanel)
+    return uuid
+  }
+
+  initDrawPanel(uuid) {
+    uuid = uuid || this.uuid()
+    this.setDrawPanel(uuid, drawPanel)
+    return uuid
+  }
+
+  toDrawWidget() {
+    // console.log('this is first toDrawWidget')
+  }
+  // 移动到画布之前回掉
+  beforeToDraw() {
+
+  }
+
+  setOptionDatas(uuid, data) {
+    const dialogPanel = this.getDialogPanel(uuid)
+    dialogPanel.options.attrs.datas = data
+    this.setDialogPanel(uuid, dialogPanel)
+  }
+
+  filterFieldMethod(fields) {
+    return fields.filter(field => {
+      return field['deType'] === 0
+    })
+  }
+}
+const mySelectImpl = new MySelectImpl()
+export default mySelectImpl
diff --git a/frontend/src/components/widget/index.js b/frontend/src/components/widget/index.js
index 3c251de807..3c6748ef3f 100644
--- a/frontend/src/components/widget/index.js
+++ b/frontend/src/components/widget/index.js
@@ -31,7 +31,8 @@ requireComponent.keys().forEach(fileName => {
   )
 })
 
-const req = require.context('./serviceImpl', false, /\.js$/)
+// const req = require.context('./serviceImpl', false, /\.js$/)
+const req = require.context('./drawServiceImpl', false, /\.js$/)
 const requireAll = requireContext => requireContext.keys()
 
 const widgets = {}
diff --git a/frontend/src/components/widget/service/DrawWidgetService.js b/frontend/src/components/widget/service/DrawWidgetService.js
index e69de29bb2..9c1c4f290c 100644
--- a/frontend/src/components/widget/service/DrawWidgetService.js
+++ b/frontend/src/components/widget/service/DrawWidgetService.js
@@ -0,0 +1,83 @@
+import store from '@/store'
+import { uuid } from 'vue-uuid'
+export const commonStyle = {
+  rotate: 0,
+  opacity: 1
+}
+
+export const commonAttr = {
+  animations: [],
+  events: {},
+  groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
+  isLock: false // 是否锁定组件
+}
+export class DrawWidgetService {
+  constructor(options) {
+    this.options = options
+    this.name = options.name
+    this.leftPanelPath = 'application/addLeftWidget'
+    this.dialogPanelPath = 'application/addDialogWidget'
+    this.drawPanelPath = 'application/addDrawWidget'
+    this.storeWidget()
+  }
+  /**
+   * 存储数据到本地
+   * @param {本地存储路径} path
+   * @param {要存储的数据} data
+   */
+  store(path, data) {
+    store.dispatch(path, data)
+  }
+  uuid() {
+    return uuid.v1()
+  }
+  setLeftPanel(uuid, leftPanel) {
+    this.store(this.leftPanelPath, { uuid: uuid, leftPanel: leftPanel })
+  }
+  getLeftPanel(uuid) {
+    if (!store.getters.leftWidgetMap[uuid]) {
+      this.initLeftPanel && this.initLeftPanel(uuid)
+    }
+    return store.getters.leftWidgetMap[uuid]
+  }
+
+  setDialogPanel(uuid, dialogPanel) {
+    this.store(this.dialogPanelPath, { uuid: uuid, dialogPanel: dialogPanel })
+  }
+  getDialogPanel(uuid) {
+    if (!store.getters.dialogWidgetMap[uuid]) {
+      this.initFilterDialog && this.initFilterDialog(uuid)
+    }
+    return store.getters.dialogWidgetMap[uuid]
+  }
+
+  setDrawPanel(uuid, drawPanel) {
+    if (!store.getters.drawWidgetMap[uuid]) { // 第一次
+      drawPanel.style = Object.assign(drawPanel.style, commonStyle)
+      drawPanel = Object.assign(drawPanel, commonAttr)
+      if (this.initFilterDialog) { // 需要弹窗
+        const dialogOptions = this.getDialogPanel(uuid)
+        drawPanel = Object.assign(drawPanel, dialogOptions)
+      }
+    }
+    this.store(this.drawPanelPath, { uuid: uuid, drawPanel: drawPanel })
+  }
+
+  getDrawPanel(uuid) {
+    if (!store.getters.drawWidgetMap[uuid]) {
+      this.initDrawPanel && this.initDrawPanel(uuid)
+    }
+    return store.getters.drawWidgetMap[uuid]
+  }
+
+  storeWidget() {
+    // store.dispatch('application/loadBean', { key: this.name, value: this })
+    this.store('application/loadBean', { key: this.name, value: this })
+  }
+  initWidget() {
+    console.log('this is initWidget')
+  }
+  toDrawWidget() {
+    console.log('this is toDrawWidget')
+  }
+}
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index ff4205f835..0695fe249b 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -18,6 +18,9 @@ const getters = {
   loadingMap: state => state.request.loadingMap,
   currentPath: state => state.permission.currentPath,
   permissions: state => state.user.permissions,
-  beanMap: state => state.application.beanMap
+  beanMap: state => state.application.beanMap,
+  leftWidgetMap: state => state.application.leftWidgetMap,
+  dialogWidgetMap: state => state.application.dialogWidgetMap,
+  drawWidgetMap: state => state.application.drawWidgetMap
 }
 export default getters
diff --git a/frontend/src/store/modules/application.js b/frontend/src/store/modules/application.js
index 44233e23a4..1e8a623140 100644
--- a/frontend/src/store/modules/application.js
+++ b/frontend/src/store/modules/application.js
@@ -1,11 +1,26 @@
 const state = {
-  beanMap: {}
+  beanMap: {},
+  leftWidgetMap: {},
+  dialogWidgetMap: {},
+  drawWidgetMap: {}
 }
 
 const mutations = {
 
   ADD_BEAN: (state, { key, value }) => {
     state.beanMap[key] = value
+  },
+
+  ADD_LEFT_WIDGET: (state, { uuid, leftPanel }) => {
+    state.leftWidgetMap[uuid] = leftPanel
+  },
+
+  ADD_DIALOG_WIDGET: (state, { uuid, dialogPanel }) => {
+    state.dialogWidgetMap[uuid] = dialogPanel
+  },
+
+  ADD_DRAW_WIDGET: (state, { uuid, drawPanel }) => {
+    state.drawWidgetMap[uuid] = drawPanel
   }
 
 }
@@ -13,7 +28,20 @@ const mutations = {
 const actions = {
   loadBean({ commit }, data) {
     commit('ADD_BEAN', data)
+  },
+
+  addLeftWidget({ commit }, data) {
+    commit('ADD_LEFT_WIDGET', data)
+  },
+
+  addDialogWidget({ commit }, data) {
+    commit('ADD_DIALOG_WIDGET', data)
+  },
+
+  addDrawWidget({ commit }, data) {
+    commit('ADD_DRAW_WIDGET', data)
   }
+
 }
 
 export default {
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index ec0a689730..c6e15c6139 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -69,19 +69,18 @@
     </de-container>
 
     <el-dialog
-      v-if="filterVisible"
+      v-if="filterVisible && panelInfo.id"
       title="过滤组件"
       :visible.sync="filterVisible"
       custom-class="de-filter-dialog"
     >
-      <filter-dialog v-if="filterVisible" :component-info="currentComponent" :widget-id="currentWidgetId" @re-fresh-component="reFreshComponent">
+      <filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" @re-fresh-component="reFreshComponent">
         <de-drawing-widget
-          v-if="filterVisible && currentComponent"
-          :id="'component' + currentComponent.id"
+          v-if="filterVisible"
           style="width: 100% !important;"
           class="component"
-          :element="currentComponent"
-          :item="currentComponent"
+          :service-name="currentWidget.name"
+          :panel-id="panelInfo.id"
         />
       </filter-dialog>
       <!-- <div slot="footer" class="dialog-footer">
@@ -144,9 +143,7 @@ export default {
       activeName: 'attr',
       reSelectAnimateIndex: undefined,
       filterVisible: false,
-      currentWidgetId: null,
-      currentWidget: null,
-      currentComponent: null
+      currentWidget: null
     }
   },
 
@@ -252,6 +249,7 @@ export default {
       e.stopPropagation()
       let component
       const newComponentId = uuid.v1()
+
       const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
 
       // 用户视图设置 复制一个模板
@@ -268,16 +266,18 @@ export default {
         })
       } else {
         this.currentWidget = ApplicationContext.getService(componentInfo.id)
-        if (this.currentWidget.filterDialog) {
+
+        const drawPanel = this.currentWidget.getDrawPanel(this.panelInfo.id)
+        drawPanel.style.top = e.offsetY
+        drawPanel.style.left = e.offsetX
+        drawPanel.id = newComponentId
+        this.currentWidget.setDrawPanel(this.panelInfo.id, drawPanel)
+        if (this.currentWidget.initFilterDialog) {
           this.show = false
-          this.currentComponent = deepCopy(this.currentWidget)
-          this.currentComponent.style.top = e.offsetY
-          this.currentComponent.style.left = e.offsetX
-          this.currentComponent.id = newComponentId
           this.openFilterDiolog()
           return
         }
-        component = deepCopy(this.currentWidget)
+        component = deepCopy(drawPanel)
       }
 
       component.style.top = e.offsetY
@@ -311,17 +311,16 @@ export default {
       }
     },
     openFilterDiolog() {
-      this.currentWidgetId = this.currentComponent.name
       this.filterVisible = true
     },
     cancelFilter() {
       this.filterVisible = false
-      this.currentWidgetId = null
       this.currentWidget = null
-      this.currentComponent = null
     },
     sureFilter() {
-      const component = deepCopy(this.currentComponent)
+      const currentComponent = this.currentWidget.getDrawPanel(this.panelInfo.id)
+      currentComponent.widgetService = this.currentWidget
+      const component = deepCopy(currentComponent)
       this.$store.commit('addComponent', { component })
       this.$store.commit('recordSnapshot')
       this.cancelFilter()
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index d7c0b6c72e..abdeb1e2a0 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -144,7 +144,7 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
 import DragItem from '@/components/DragItem'
-import { ApplicationContext } from '@/utils/ApplicationContext'
+// import { ApplicationContext } from '@/utils/ApplicationContext'
 import { groupTree, loadTable, fieldList, fieldValues } from '@/api/dataset/dataset'
 export default {
   name: 'FilterDialog',
@@ -156,11 +156,8 @@ export default {
     DragItem
   },
   props: {
-    widgetId: {
-      type: String,
-      default: null
-    },
-    componentInfo: {
+
+    widgetInfo: {
       type: Object,
       default: null
     }
@@ -184,23 +181,29 @@ export default {
       fieldValues: []
     }
   },
+  computed: {
+    uuid() {
+      return this.$store.state.panel.panelInfo.id
+    }
+  },
   watch: {
     selectField(values) {
       if (values && values.length > 0) {
         const value = values[0]
         const fieldId = value.id
-        this.componentInfo && this.componentInfo.setOptionDatas && fieldValues(fieldId).then(res => {
+        this.widget && this.widget.setOptionDatas && fieldValues(fieldId).then(res => {
           const datas = res.data.map(item => {
             return { id: item, text: item }
           })
-          this.componentInfo.setOptionDatas(datas)
-          this.$emit('re-fresh-component', this.componentInfo)
+          this.widget.setOptionDatas(this.uuid, datas)
+        //   this.$emit('re-fresh-component', this.componentInfo)
         })
       }
     }
   },
   created() {
-    this.widget = ApplicationContext.getService(this.widgetId)
+    // this.widget = ApplicationContext.getService(this.widgetId)
+    this.widget = this.widgetInfo
     this.loadDataSetTree()
   },
 
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index 4333644dcb..91e8b1a984 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -10,8 +10,8 @@
       <div class="filter-widget-content">
         <div
           v-for="(widget, index) in item"
-          :key="widget.name+index"
-          :data-id="widget.name"
+          :key="widget.widgetName+index"
+          :data-id="widget.widgetName"
           draggable
           :data-index="index"
           :class="'filter-widget '+ (widget.defaultClass || '')"
@@ -35,23 +35,29 @@ export default {
   data() {
     return {
       componentList,
+      panelInfo: this.$store.state.panel.panelInfo,
       widgetSubjects: {
-        '时间过滤组件': [
-          'timeYearWidget',
-          'timeMonthWidget',
-          'timeQuarterWidget',
-          'timeDateWidget',
-          'timeDateRangeWidget'
-
-        ],
         '文本过滤组件': [
-          'textSelectWidget',
-          'textInputWidget'
-        ],
-        '按钮': [
-          'buttonSureWidget'
+          'mySelectWidget'
         ]
       }
+      //   widgetSubjects: {
+      //     '时间过滤组件': [
+      //       'timeYearWidget',
+      //       'timeMonthWidget',
+      //       'timeQuarterWidget',
+      //       'timeDateWidget',
+      //       'timeDateRangeWidget'
+
+    //     ],
+    //     '文本过滤组件': [
+    //       'textSelectWidget',
+    //       'textInputWidget'
+    //     ],
+    //     '按钮': [
+    //       'buttonSureWidget'
+    //     ]
+    //   }
     }
   },
   created() {
@@ -59,7 +65,11 @@ export default {
       const widgetNames = this.widgetSubjects[key]
       this.widgetSubjects[key] = widgetNames.map(widgetName => {
         const widget = ApplicationContext.getService(widgetName)
-        return widget
+        const uuid = this.panelInfo.id
+        // widget.initLeftPanel(uuid)
+        const result = { widgetName: widgetName }
+        Object.assign(result, widget.getLeftPanel(uuid))
+        return result
       })
     }
   },