Merge remote-tracking branch 'origin/main' into main

backend/src/main/java/io/dataease/controller/panel/api/ViewApi.java

 package io.dataease.controller.panel.api;
 
 
+import io.dataease.base.domain.ChartView;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.dto.panel.PanelViewDto;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 
@@ -20,6 +22,11 @@ public interface ViewApi {
     List<PanelViewDto> tree(BaseGridRequest request);
 
 
+    @ApiOperation("根据仪表板Id查询视图")
+    @PostMapping("/viewsWithIds")
+    List<ChartView> viewsWithIds(List<String> viewIds);
+
+
 
 
 

backend/src/main/java/io/dataease/controller/panel/server/ViewServer.java

 package io.dataease.controller.panel.server;
 
+import io.dataease.base.domain.ChartView;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.controller.panel.api.ViewApi;
 import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.base.ConditionEntity;
 import io.dataease.dto.panel.PanelViewDto;
 import io.dataease.dto.panel.po.PanelViewPo;
+import io.dataease.service.chart.ChartViewService;
 import io.dataease.service.panel.PanelViewService;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RestController;
 
@@ -20,6 +23,9 @@ public class ViewServer implements ViewApi {
     @Autowired
     private PanelViewService panelViewService;
 
+    @Autowired
+    private ChartViewService chartViewService;
+
     /**
      * 为什么查两次？
      * 因为left join 会导致全表扫描
@@ -40,4 +46,10 @@ public class ViewServer implements ViewApi {
         List<PanelViewDto> panelViewDtos = panelViewService.buildTree(groups, views);
         return panelViewDtos;
     }
+
+    @Override
+    public List<ChartView> viewsWithIds(@RequestBody List<String> viewIds) {
+
+        return chartViewService.viewsByIds(viewIds);
+    }
 }

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -170,7 +170,11 @@ public class ChartViewService {
             x.add(a.toString());
             for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
                 int j = i - xAxis.size();
-                series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
+                try {
+                    series.get(j).getData().add(new BigDecimal(StringUtils.isEmpty(d[i]) ? "0" : d[i]));
+                } catch (Exception e) {
+                    series.get(j).getData().add(new BigDecimal(0));
+                }
             }
         }
         Map<String, Object> map = new HashMap<>();
@@ -316,4 +320,10 @@ public class ChartViewService {
         }
         return map;
     }
+
+    public List<ChartView> viewsByIds(List<String> viewIds){
+        ChartViewExample example = new ChartViewExample();
+        example.createCriteria().andIdIn(viewIds);
+        return chartViewMapper.selectByExample(example);
+    }
 }

frontend/src/api/panel/view.js

@@ -8,3 +8,12 @@ export function tree(data) {
     data
   })
 }
+
+export function viewsWithIds(data) {
+  return request({
+    url: '/api/panelView/viewsWithIds',
+    method: 'post',
+    loading: true,
+    data
+  })
+}

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

@@ -319,7 +319,8 @@ export default {
     setConditionValue(obj) {
       const { component, value, operator } = obj
       const fieldId = component.options.attrs.fieldId
-      const condition = new Condition(component.id, fieldId, operator, value, null)
+      const viewIds = component.options.attrs.viewIds
+      const condition = new Condition(component.id, fieldId, operator, value, viewIds)
       this.addCondition(condition)
     },
     addCondition(condition) {

frontend/src/components/widget/DeWidget/DeButton.vue

@@ -13,27 +13,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-
+      options: null,
+      operator: 'eq',
+      values: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-    //   this.defaultOptions = Object.assign({}, this.options)
-    //   const dom = this.$refs[this.options.refId]
-    //   for (const key in this.options.attrs) {
-    //     if (Object.hasOwnProperty.call(this.defaultOptions.attrs, key)) {
-    //       const element = this.defaultOptions.attrs[key]
-    //       dom.$props[key] = element
-    //     }
-    //   }
-    })
+  created() {
+    this.options = this.element.options
   }
 }
 </script>

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -14,10 +14,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
+  },
+  data() {
+    return {
+      options: null,
+      operator: 'eq',
+      values: null
+    }
+  },
+  created() {
+    this.options = this.element.options
   }
 }
 </script>

frontend/src/components/widget/DeWidget/DeDrawingWidget.vue

-<script>
-import { ApplicationContext } from '@/utils/ApplicationContext'
-import store from '@/store'
-export default {
-  name: 'DeDrawingWidget',
-  functional: true,
-  props: {
-    serviceName: {
-      type: String,
-      default: null
-    }
-  },
-
-  render(createElement, context) {
-    const widgetInfo = ApplicationContext.getService(context.props.serviceName)
-    // const widgetInfo = context.props.widgetInfo
-    const dialogInfo = widgetInfo.getDialogPanel && widgetInfo.getDialogPanel() || null
-    const drawInfo = widgetInfo.getDrawPanel && widgetInfo.getDrawPanel() || null
-    const curComponent = store.state.curComponent
-    if (!dialogInfo) {
-      throw new Error('系统错误')
-    }
-    return createElement(dialogInfo.component, {
-      props: {
-        element: curComponent || drawInfo || dialogInfo
-      },
-      style: context.data.style,
-      on: {
-        'value-change': value => {
-          context.listeners['filter-value-change'] && context.listeners['filter-value-change'](value)
-        }
-      }
-    },
-    context.data,
-    context.children
-    )
-  }
-}
-</script>

frontend/src/components/widget/DeWidget/DeInputSearch.vue

 <template>
 
-  <el-input v-if="options!== null && options.attrs!==null" v-model="options.value" style="width:260px;" :placeholder="options.attrs.placeholder">
+  <el-input v-if="options!== null && options.attrs!==null" v-model="options.value" style="width: 260px" :placeholder="options.attrs.placeholder">
 
     <el-button slot="append" icon="el-icon-search" />
   </el-input>
@@ -11,20 +11,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
-
+      options: null,
+      operator: 'eq',
+      values: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-
-    })
+  created() {
+    this.options = this.element.options
   }
 }
 </script>

frontend/src/components/widget/DeWidget/DeQuarter.vue

@@ -11,10 +11,24 @@
 export default {
 
   props: {
-    options: {
+    element: {
       type: Object,
       default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
     }
+  },
+  data() {
+    return {
+      options: null,
+      operator: 'eq',
+      values: null
+    }
+  },
+  created() {
+    this.options = this.element.options
   }
 }
 </script>

frontend/src/components/widget/DeWidget/DeSelect.vue

 <template>
 
-  <el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :style="element.style" :placeholder="options.attrs.placeholder" @change="changeValue">
+  <el-select v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
     <el-option
       v-for="item in options.attrs.datas"
       :key="item[options.attrs.key]"
@@ -28,12 +28,17 @@ export default {
   data() {
     return {
       options: null,
-      operator: 'eq'
+      operator: 'eq',
+      values: null
     }
   },
   watch: {
-    'element.style': function(value) {
-      // console.log(value)
+    'options.attrs.multiple': function(value) {
+      if (value) {
+        this.values = []
+      } else {
+        this.values = null
+      }
     }
   },
 

frontend/src/components/widget/DeWidget/DeTreeSelect.vue

+<template>
+
+  <el-select v-if="options!== null && options.attrs!==null" v-model="values" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
+    <el-option
+      v-for="item in options.attrs.datas"
+      :key="item[options.attrs.key]"
+      :label="item[options.attrs.label]"
+      :value="item[options.attrs.value]"
+    />
+  </el-select>
+
+</template>
+
+<script>
+
+export default {
+
+  props: {
+    element: {
+      type: Object,
+      default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      options: null,
+      operator: 'eq',
+      values: null
+    }
+  },
+  watch: {
+    'options.attrs.multiple': function(value) {
+      if (value) {
+        this.values = []
+      } else {
+        this.values = null
+      }
+    }
+  },
+
+  created() {
+    this.options = this.element.options
+  },
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    changeValue(value) {
+      this.inDraw && this.$emit('set-condition-value', { component: this.element, value: [value], operator: this.operator })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/src/components/widget/DeWidget/sources/ElQuarter.vue

@@ -11,7 +11,7 @@
     <el-card
       v-show="showSeason"
       class="box-card"
-      style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
+      style="width:322px !important;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
     >
       <div slot="header" class="clearfix" style="text-align:center;padding:0">
         <button

frontend/src/components/widget/index.js

@@ -31,8 +31,8 @@ requireComponent.keys().forEach(fileName => {
   )
 })
 
-// const req = require.context('./serviceImpl', false, /\.js$/)
-const req = require.context('./drawServiceImpl', false, /\.js$/)
+const req = require.context('./serviceImpl', false, /\.js$/)
+// const req = require.context('./drawServiceImpl', false, /\.js$/)
 const requireAll = requireContext => requireContext.keys()
 
 const widgets = {}

frontend/src/components/widget/service/DrawWidgetService.js

-import store from '@/store'
-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)
-  }
-
-  getLeftPanel() {
-    return this.initLeftPanel()
-  }
-
-  getDialogPanel() {
-    return this.initFilterDialog()
-  }
-
-  getDrawPanel() {
-    let drawPanel = this.initDrawPanel()
-    drawPanel.serviceName = this.options.name
-    drawPanel.style = Object.assign(drawPanel.style, commonStyle)
-    drawPanel = Object.assign(drawPanel, commonAttr)
-    if (this.filterDialog) {
-      const dialogOptions = this.getDialogPanel()
-      drawPanel = Object.assign(drawPanel, dialogOptions)
-    }
-    return drawPanel
-  }
-  storeWidget() {
-    this.store('application/loadBean', { key: this.name, value: this })
-  }
-}

frontend/src/components/widget/service/WidgetService.js

@@ -12,20 +12,42 @@ export const commonAttr = {
 }
 export class WidgetService {
   constructor(options) {
+    this.options = options
     this.name = options.name
-    options = { ...commonAttr, ...options }
-    Object.assign(this, options)
-    this.style = { ...commonStyle, ...options.style }
-    this.type = 'custom'
+    // this.leftPanelPath = 'application/addLeftWidget'
+    // this.dialogPanelPath = 'application/addDialogWidget'
+    // this.drawPanelPath = 'application/addDrawWidget'
     this.storeWidget()
   }
-  storeWidget() {
-    store.dispatch('application/loadBean', { key: this.name, value: this })
+  /**
+   * 存储数据到本地
+   * @param {本地存储路径} path
+   * @param {要存储的数据} data
+   */
+  store(path, data) {
+    store.dispatch(path, data)
+  }
+
+  getLeftPanel() {
+    return this.initLeftPanel()
   }
-  initWidget() {
-    console.log('this is initWidget')
+
+  getDialogPanel() {
+    return this.initFilterDialog()
   }
-  toDrawWidget() {
-    console.log('this is toDrawWidget')
+
+  getDrawPanel() {
+    let drawPanel = this.initDrawPanel()
+    drawPanel.serviceName = this.options.name
+    drawPanel.style = Object.assign(drawPanel.style, commonStyle)
+    drawPanel = Object.assign(drawPanel, commonAttr)
+    if (this.filterDialog) {
+      const dialogOptions = this.getDialogPanel()
+      drawPanel = Object.assign(drawPanel, dialogOptions)
+    }
+    return drawPanel
+  }
+  storeWidget() {
+    this.store('application/loadBean', { key: this.name, value: this })
   }
 }

frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'buttonSureWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-chaxunsousuo',
   label: '确定',
+  defaultClass: 'time-filter'
+}
+
+const drawPanel = {
+  type: 'custom',
   style: {
-    width: 100,
-    height: 34,
-    borderWidth: '',
-    borderColor: '',
-    borderRadius: '',
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
     letterSpacing: 0,
     textAlign: '',
-    color: '',
-    backgroundColor: ''
+    color: ''
   },
-  defaultClass: 'time-filter',
-  component: 'de-button',
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'primary',
       round: true
     },
     value: '测试按钮'
-  }
+  },
+  component: 'de-button'
 }
 
 class ButtonSureServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'buttonSureWidget' })
     super(options)
+    this.filterDialog = false
+    this.showSwitch = false
   }
 
-  initWidget() {
-    // console.log('this is first initWidget')
-  }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
 }
-const buttonSureServiceImpl = new ButtonSureServiceImpl({ name: 'buttonSureWidget' })
+const buttonSureServiceImpl = new ButtonSureServiceImpl()
 export default buttonSureServiceImpl

frontend/src/components/widget/drawServiceImpl/MySelectImpl.js → frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js

 
-import { DrawWidgetService } from '../service/DrawWidgetService'
+import { WidgetService } from '../service/WidgetService'
 
 const leftPanel = {
-//   name: 'text-select',
   icon: 'iconfont icon-xialakuang',
-  label: '文本下拉',
+  label: '数字下拉',
   defaultClass: 'text-filter'
 }
 
 const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       multiple: false,
       placeholder: '请选择',
@@ -27,8 +25,8 @@ const dialogPanel = {
 const drawPanel = {
   type: 'custom',
   style: {
-    width: 200,
-    height: 22,
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
@@ -39,9 +37,9 @@ const drawPanel = {
   component: 'de-select'
 }
 
-class MySelectImpl extends DrawWidgetService {
+class NumberSelectServiceImpl extends WidgetService {
   constructor(options = {}) {
-    Object.assign(options, { name: 'mySelectWidget' })
+    Object.assign(options, { name: 'numberSelectWidget' })
     super(options)
     this.filterDialog = true
     this.showSwitch = true
@@ -50,7 +48,6 @@ class MySelectImpl extends DrawWidgetService {
   initLeftPanel() {
     const value = JSON.parse(JSON.stringify(leftPanel))
     return value
-    // console.log('this is first initWidget')
   }
 
   initFilterDialog() {
@@ -65,7 +62,7 @@ class MySelectImpl extends DrawWidgetService {
 
   filterFieldMethod(fields) {
     return fields.filter(field => {
-      return field['deType'] === 0
+      return field['deType'] === 2
     })
   }
 
@@ -79,5 +76,5 @@ class MySelectImpl extends DrawWidgetService {
     })
   }
 }
-const mySelectImpl = new MySelectImpl()
-export default mySelectImpl
+const numberSelectServiceImpl = new NumberSelectServiceImpl()
+export default numberSelectServiceImpl

frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'textInputWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-shuru',
   label: '文本搜索',
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
+  options: {
+    attrs: {
+      placeholder: '请选择'
+
+    },
+    value: ''
+  },
+  defaultClass: 'text-filter',
+  component: 'de-input-search'
+}
+const drawPanel = {
+  type: 'custom',
   style: {
-    width: 100,
-    height: 34,
-    borderWidth: '',
-    borderColor: '',
-    borderRadius: '',
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
     letterSpacing: 0,
     textAlign: '',
-    color: '',
-    backgroundColor: ''
-  },
-  defaultClass: 'text-filter',
-  component: 'de-input-search',
-  options: {
-    refId: '1234567890',
-    attrs: {
-      placeholder: '请输入关键字'
-    },
-    value: ''
+    color: ''
   },
-  filterDialog: true
+  component: 'de-input-search'
 }
 
 class TextInputServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'textInputWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
-    // console.log('this is first initWidget')
-  }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
-  dynamicStype() {
-    return {
-      'background-color': 'rgba(35,190,239,.1)'
-    }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
+
   filterFieldMethod(fields) {
     return fields.filter(field => {
       return field['deType'] === 0
     })
   }
-//   dynamicIconStype() {
-//     return {
-//       color: '#23beef'
-//     }
-//   }
 }
-const textInputServiceImpl = new TextInputServiceImpl({ name: 'textInputWidget' })
+const textInputServiceImpl = new TextInputServiceImpl()
 export default textInputServiceImpl

frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js

+
 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'textSelectWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-xialakuang',
   label: '文本下拉',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       multiple: false,
       placeholder: '请选择',
@@ -26,29 +20,44 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'text-filter',
-  component: 'de-select',
-  filterDialog: true
+  component: 'de-select'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-select'
 }
 
 class TextSelectServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'textSelectWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = true
   }
 
-  initWidget() {
-    // console.log('this is first initWidget')
-  }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
 
-  setOptionDatas(data) {
-    this.options.attrs.datas = data
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
 
   filterFieldMethod(fields) {
@@ -56,6 +65,16 @@ class TextSelectServiceImpl extends WidgetService {
       return field['deType'] === 0
     })
   }
+
+  optionDatas(datas) {
+    if (!datas) return null
+    return datas.map(item => {
+      return {
+        id: item,
+        text: item
+      }
+    })
+  }
 }
-const textSelectServiceImpl = new TextSelectServiceImpl({ name: 'textSelectWidget' })
+const textSelectServiceImpl = new TextSelectServiceImpl()
 export default textSelectServiceImpl

frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeDateRangeWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-riqi',
   label: '日期范围',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'daterange',
       rangeSeparator: '至',
@@ -24,25 +17,45 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-date'
 }
 
 class TimeDateRangeServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeDateRangeWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {
@@ -50,5 +63,5 @@ class TimeDateRangeServiceImpl extends WidgetService {
     })
   }
 }
-const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl({ name: 'timeDateRangeWidget' })
+const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl

frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeDateWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-ri',
   label: '日期',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'date',
       placeholder: '请选择日期'
     },
     value: ''
   },
-
   defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-date'
 }
 
 class TimeDateServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeDateWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {

frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeMonthWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-yue',
   label: '年月',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'month',
       placeholder: '请选择年月'
@@ -22,25 +15,45 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-date'
 }
 
 class TimeMonthServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeMonthWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {
@@ -48,5 +61,5 @@ class TimeMonthServiceImpl extends WidgetService {
     })
   }
 }
-const timeMonthServiceImpl = new TimeMonthServiceImpl({ name: 'timeMonthWidget' })
+const timeMonthServiceImpl = new TimeMonthServiceImpl()
 export default timeMonthServiceImpl

frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeQuarterWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-jidu',
   label: '季度',
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
+  options: {
+    attrs: {
+      placeholder: '请选择季度'
+    },
+    value: ''
+  },
+  defaultClass: 'time-filter',
+  component: 'de-quarter'
+}
+const drawPanel = {
+  type: 'custom',
   style: {
-    width: 200,
-    height: 22,
+    width: 300,
+    height: 35,
     fontSize: 14,
     fontWeight: 500,
     lineHeight: '',
@@ -13,34 +28,31 @@ const defaultOptions = {
     textAlign: '',
     color: ''
   },
-  options: {
-    refId: '1234567890',
-    attrs: {
-
-      placeholder: '请选择季度'
-    },
-    value: ''
-  },
-  defaultClass: 'time-filter',
-  component: 'de-quarter',
-  filterDialog: true
+  component: 'de-quarter'
 }
 
 class TimeQuarterServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeQuarterWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
   filterFieldMethod(fields) {
     return fields.filter(field => {
@@ -48,5 +60,5 @@ class TimeQuarterServiceImpl extends WidgetService {
     })
   }
 }
-const timeQuarterServiceImpl = new TimeQuarterServiceImpl({ name: 'timeQuarterWidget' })
+const timeQuarterServiceImpl = new TimeQuarterServiceImpl()
 export default timeQuarterServiceImpl

frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
-const defaultOptions = {
-  name: 'timeYearWidget',
+
+const leftPanel = {
   icon: 'iconfont icon-nian',
   label: '年份',
-  style: {
-    width: 200,
-    height: 22,
-    fontSize: 14,
-    fontWeight: 500,
-    lineHeight: '',
-    letterSpacing: 0,
-    textAlign: '',
-    color: ''
-  },
+  defaultClass: 'time-filter'
+}
+
+const dialogPanel = {
   options: {
-    refId: '1234567890',
     attrs: {
       type: 'year',
       placeholder: '请选择年份'
@@ -22,25 +15,45 @@ const defaultOptions = {
     value: ''
   },
   defaultClass: 'time-filter',
-  component: 'de-date',
-  filterDialog: true
+  component: 'de-date'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 300,
+    height: 35,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-date'
 }
 
 class TimeYearServiceImpl extends WidgetService {
-  constructor(options) {
-    Object.assign(options, defaultOptions)
+  constructor(options = {}) {
+    Object.assign(options, { name: 'timeYearWidget' })
     super(options)
+    this.filterDialog = true
+    this.showSwitch = false
   }
 
-  initWidget() {
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
     // console.log('this is first initWidget')
   }
-  toDrawWidget() {
-    // console.log('this is first toDrawWidget')
+
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
   }
-  // 移动到画布之前回掉
-  beforeToDraw() {
 
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
   }
 
   filterFieldMethod(fields) {
@@ -49,5 +62,5 @@ class TimeYearServiceImpl extends WidgetService {
     })
   }
 }
-const timeYearServiceImpl = new TimeYearServiceImpl({ name: 'timeYearWidget' })
+const timeYearServiceImpl = new TimeYearServiceImpl()
 export default timeYearServiceImpl

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

@@ -97,7 +97,7 @@
       <div style="text-align: end !important;margin: 0 15px !important;">
         <span slot="footer">
           <el-button @click="cancelFilter">取 消</el-button>
-          <el-button type="primary" @click="sureFilter">确 定</el-button>
+          <el-button :disabled="!currentFilterCom.options.attrs.fieldId" type="primary" @click="sureFilter">确 定</el-button>
         </span>
       </div>
     </el-dialog>
@@ -342,6 +342,7 @@ export default {
     },
     reFreshComponent(component) {
       this.currentFilterCom = component
+      this.$forceUpdate()
     },
     eidtDialog() {
       const serviceName = this.curComponent.serviceName

frontend/src/views/panel/filter/filterDialog.vue

@@ -110,12 +110,36 @@
                 v-model="componentInfo.options.attrs.multiple"
                 active-text="多选"
                 inactive-text="单选"
+                @change="multipleChange"
               />
             </div>
           </el-col>
           <el-col :span="16"><div class="filter-options-right">
             <el-checkbox v-model="customRange"><span> 自定义控制范围 </span> </el-checkbox>
-            <i :class="{'i-filter-active': customRange, 'i-filter-inactive': !customRange}" class="el-icon-setting i-filter" @click="showFilterRange" />
+
+            <el-popover
+              v-model="popovervisible"
+              placement="bottom-end"
+              :disabled="!customRange"
+              width="200"
+            >
+              <div class="view-container-class">
+                <el-checkbox-group v-model="checkedViews" @change="checkedViewsChange">
+                  <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" border>
+                    <span>
+                      <svg-icon :icon-class="item.type" class="chart-icon" />
+                      <span style="margin-left: 6px">{{ item.name }}</span>
+                    </span>
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+
+              <!-- <div style="text-align: right; margin: 0">
+                <el-button size="mini" type="text" @click="popovervisible=false">取消</el-button>
+                <el-button type="primary" size="mini" @click="popovervisible=false">确定</el-button>
+              </div> -->
+              <i slot="reference" :class="{'i-filter-active': customRange, 'i-filter-inactive': !customRange}" class="el-icon-setting i-filter" />
+            </el-popover>
             <!-- <el-checkbox disabled>备选项</el-checkbox> -->
           </div>
 
@@ -147,8 +171,10 @@ import DeContainer from '@/components/dataease/DeContainer'
 import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 import draggable from 'vuedraggable'
 import DragItem from '@/components/DragItem'
+import { mapState } from 'vuex'
 // import { ApplicationContext } from '@/utils/ApplicationContext'
 import { groupTree, loadTable, fieldList, fieldValues } from '@/api/dataset/dataset'
+import { viewsWithIds } from '@/api/panel/view'
 export default {
   name: 'FilterDialog',
   components: {
@@ -169,6 +195,7 @@ export default {
       default: null
     }
   },
+
   data() {
     return {
       activeName: 'dataset',
@@ -186,22 +213,45 @@ export default {
       selectField: [],
       widget: null,
       fieldValues: [],
-      customRange: false
+      customRange: false,
+      popovervisible: false,
+      viewInfos: [],
+      checkedViews: []
     }
   },
+  computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    ...mapState([
+      'componentData',
+      'curComponent',
+      'isClickComponent',
+      'canvasStyleData',
+      'curComponentIndex'
+    ])
+  },
 
   watch: {
     selectField(values) {
       if (values && values.length > 0) {
         const value = values[0]
         const fieldId = value.id
-        const info = this.componentInfo
-        this.widget && fieldValues(fieldId).then(res => {
-          info.options.attrs.datas = this.widget.optionDatas(res.data)
-          info.options.attrs.fieldId = fieldId
-          info.options.attrs.dragItems = values
-          this.$emit('re-fresh-component', info)
-        })
+        if (this.widget && this.widget.optionDatas) {
+          fieldValues(fieldId).then(res => {
+            this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
+            this.componentInfo.options.attrs.fieldId = fieldId
+            this.componentInfo.options.attrs.dragItems = values
+            this.$emit('re-fresh-component', this.componentInfo)
+          })
+        } else {
+          this.componentInfo.options.attrs.fieldId = fieldId
+          this.componentInfo.options.attrs.dragItems = values
+          this.$emit('re-fresh-component', this.componentInfo)
+        }
+      } else if (this.componentInfo && this.componentInfo.options.attrs.fieldId) {
+        this.componentInfo.options.attrs.fieldId = null
+        this.$emit('re-fresh-component', this.componentInfo)
       }
     }
   },
@@ -213,9 +263,26 @@ export default {
     if (this.componentInfo && this.componentInfo.options.attrs.dragItems) {
       this.selectField = this.componentInfo.options.attrs.dragItems
     }
+    this.loadViews()
   },
 
   methods: {
+
+    loadViews() {
+      const viewIds = this.componentData
+        .filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
+        .map(item => item.propValue.viewId)
+      viewsWithIds(viewIds).then(res => {
+        const datas = res.data
+
+        // for (let index = 0; index < 4; index++) {
+        //   datas = datas.concat(datas)
+        // }
+        // datas.forEach(item => item.name += 'aaaaaaaaabbbbb')
+
+        this.viewInfos = datas
+      })
+    },
     handleNodeClick(data) {
       if (data.type === 'scene') {
         this.showSceneTable(data)
@@ -334,11 +401,16 @@ export default {
       const index = tag.index
       this.selectField.splice(index, 1)
     },
-    showFilterRange() {
-      // 如果不是自定义范围 直接返回
-      if (!this.customRange) {
-        return
-      }
+
+    multipleChange(value) {
+      // this.componentInfo.options.attrs.multiple = value
+    //   this.componentInfo.options.value = null
+      this.$emit('re-fresh-component', this.componentInfo)
+    },
+
+    checkedViewsChange(values) {
+      this.componentInfo.options.attrs.viewIds = values
+      this.$emit('re-fresh-component', this.componentInfo)
     }
   }
 }
@@ -484,4 +556,18 @@ export default {
       cursor: pointer!important;
   }
 
+  .view-container-class {
+
+      min-height: 150px;
+      max-height: 200px;
+      width: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      word-break:break-all;
+      position: relative;
+        >>> label {
+            width: 100%;
+        }
+  }
+
 </style>

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

@@ -36,28 +36,31 @@ export default {
     return {
       componentList,
       panelInfo: this.$store.state.panel.panelInfo,
+      //   widgetSubjects: {
+      //     '文本过滤组件': [
+      //       'mySelectWidget'
+      //     ]
+      //   }
       widgetSubjects: {
+        '时间过滤组件': [
+          'timeYearWidget',
+          'timeMonthWidget',
+          //   'timeQuarterWidget',
+          'timeDateWidget',
+          'timeDateRangeWidget'
+
+        ],
         '文本过滤组件': [
-          'mySelectWidget'
+          'textSelectWidget',
+          'textInputWidget'
+        ],
+        '数字过滤组件': [
+          'numberSelectWidget'
+        ],
+        '按钮': [
+          'buttonSureWidget'
         ]
       }
-      //   widgetSubjects: {
-      //     '时间过滤组件': [
-      //       'timeYearWidget',
-      //       'timeMonthWidget',
-      //       'timeQuarterWidget',
-      //       'timeDateWidget',
-      //       'timeDateRangeWidget'
-
-    //     ],
-    //     '文本过滤组件': [
-    //       'textSelectWidget',
-    //       'textInputWidget'
-    //     ],
-    //     '按钮': [
-    //       'buttonSureWidget'
-    //     ]
-    //   }
     }
   },
   created() {
@@ -186,6 +189,24 @@ export default {
         color: #fff;
     }
   }
+  .tree-filter {
+    background-color: rgba(22,160,132,.1);
+    .filter-widget-icon {
+        color: #37b4aa;
+    }
+    .filter-widget-text {
+        color: #3d4d66;
+    }
+  }
+  .tree-filter:hover {
+    background-color: #37b4aa;
+    .filter-widget-icon {
+        color: #37b4aa;
+    }
+    .filter-widget-text {
+        color: #fff;
+    }
+  }
 
   .filter-widget-icon {
     width: 40px;