Merge pull request #11490 from dataease/pr@dev-v2@feat_dataset-params

feat(仪表板): 数据集计算字段支持设置参数

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -45,6 +45,7 @@ import DragInfo from '@/components/visualization/common/DragInfo.vue'
 import { activeWatermark } from '@/components/watermark/watermark'
 import { personInfoApi } from '@/api/user'
 import PopArea from '@/custom-component/pop-area/Component.vue'
+import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
 
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
@@ -203,6 +204,7 @@ const isShowArea = ref(false)
 const svgFilterAttrs = ['width', 'height', 'top', 'left', 'rotate', 'backgroundColor']
 const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
 const userViewEnlargeRef = ref(null)
+const customDatasetParamsRef = ref(null)
 const linkJumpRef = ref(null)
 const linkageRef = ref(null)
 const mainDomId = ref('editor-' + canvasId.value)
@@ -1346,6 +1348,10 @@ const userViewEnlargeOpen = (opt, item) => {
   )
 }
 
+const datasetParamsInit = item => {
+  customDatasetParamsRef.value?.optInit(item)
+}
+
 const initSnapshotTimer = () => {
   snapshotTimer.value = setInterval(() => {
     snapshotStore.snapshotCatchToStore()
@@ -1531,6 +1537,7 @@ defineExpose({
       @onDragging="onDragging($event, item, index)"
       @onResizing="onResizing($event, item, index)"
       @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
+      @datasetParamsInit="datasetParamsInit(item)"
       @linkJumpSetOpen="linkJumpSetOpen(item)"
       @linkageSetOpen="linkageSetOpen(item)"
     >
@@ -1596,6 +1603,7 @@ defineExpose({
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
     <link-jump-set ref="linkJumpRef"></link-jump-set>
     <linkage-set ref="linkageRef"></linkage-set>
+    <dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>
   </div>
 </template>
 

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -90,7 +90,7 @@ const { config, showPosition, index, canvasStyleData, canvasViewInfo, dvInfo, se
   toRefs(props)
 let currentInstance
 const component = ref(null)
-const emits = defineEmits(['userViewEnlargeOpen', 'onPointClick'])
+const emits = defineEmits(['userViewEnlargeOpen', 'datasetParamsInit', 'onPointClick'])
 
 const htmlToImage = () => {
   setTimeout(() => {
@@ -254,6 +254,7 @@ const deepScale = computed(() => scale.value / 100)
       :show-position="showPosition"
       :class="{ 'wrapper-edit-bar-active': active }"
       @userViewEnlargeOpen="opt => emits('userViewEnlargeOpen', opt)"
+      @datasetParamsInit="() => emits('datasetParamsInit')"
     ></component-edit-bar>
     <component-selector
       v-if="

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -17,9 +17,11 @@ import { XpackComponent } from '@/components/plugin'
 import PopArea from '@/custom-component/pop-area/Component.vue'
 import CanvasFilterBtn from '@/custom-component/canvas-filter-btn/Component.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc, canvasState } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
+const customDatasetParamsRef = ref(null)
 
 const props = defineProps({
   canvasStyleData: {
@@ -377,6 +379,9 @@ const popAreaAvailable = computed(
 const filterBtnShow = computed(
   () => popAreaAvailable.value && popComponentData.value && popComponentData.value.length > 0
 )
+const datasetParamsInit = item => {
+  customDatasetParamsRef.value?.optInit(item)
+}
 
 defineExpose({
   restore
@@ -428,10 +433,12 @@ defineExpose({
       :scale="mobileInPc ? 100 : scaleMin"
       :is-selector="props.isSelector"
       @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
+      @datasetParamsInit="datasetParamsInit(item)"
       @onPointClick="onPointClick"
     />
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
   </div>
+  <dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -31,6 +31,7 @@
         :show-position="showPosition"
         :canvas-id="canvasId"
         @userViewEnlargeOpen="userViewEnlargeOpen"
+        @datasetParamsInit="datasetParamsInit"
         @linkJumpSetOpen="linkJumpSetOpen"
         @linkageSetOpen="linkageSetOpen"
       ></component-edit-bar>
@@ -132,6 +133,7 @@ const {
 const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
 const emit = defineEmits([
   'userViewEnlargeOpen',
+  'datasetParamsInit',
   'onStartResize',
   'onStartMove',
   'onDragging',
@@ -324,6 +326,10 @@ const userViewEnlargeOpen = opt => {
   emit('userViewEnlargeOpen', opt)
 }
 
+const datasetParamsInit = opt => {
+  emit('datasetParamsInit', opt)
+}
+
 const getPointStyle = point => {
   let { width, height } = defaultStyle.value
   const { sizeX, sizeY } = element.value

core/core-frontend/src/components/visualization/ComponentEditBar.vue

@@ -60,7 +60,7 @@
       effect="dark"
       placement="top"
       content="输入计算数据"
-      v-if="barShowCheck('datasetParams')"
+      v-if="barShowCheck('datasetParams') && datasetParamsSetShow"
     >
       <span>
         <el-icon class="bar-base-icon" @click="datasetParamsInit">
@@ -199,6 +199,7 @@ import { ElMessage, ElTooltip, ElButton } from 'element-plus-secondary'
 import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
 import { exportPivotExcel } from '@/views/chart/components/js/panel/common/common_table'
 import { XpackComponent } from '@/components/plugin'
+import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const copyStore = copyStoreWithOut()
@@ -206,6 +207,7 @@ const customTabsSortRef = ref(null)
 const authShow = computed(() => !dvInfo.value.weight || dvInfo.value.weight > 3)
 const emits = defineEmits([
   'userViewEnlargeOpen',
+  'datasetParamsInit',
   'closePreview',
   'showViewDetails',
   'amRemoveItem',
@@ -434,6 +436,7 @@ const deleteComponent = () => {
 
 const datasetParamsInit = () => {
   // do init
+  emits('datasetParamsInit')
 }
 
 const copyComponent = () => {
@@ -562,6 +565,10 @@ const initCurFields = () => {
 }
 // 富文本-End
 
+const datasetParamsSetShow = computed(() => {
+  return canvasViewInfo.value[element.value.id]?.calParams?.length > 0
+})
+
 onMounted(() => {
   if (element.value.component === 'UserView') {
     eventBus.on('initCurFields-' + element.value.id, initCurFields)

core/core-frontend/src/components/visualization/DatasetParamsComponent.vue

@@ -1,29 +1,21 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { deepCopy } from '@/utils/utils'
-import DeUpload from '@/components/visualization/common/DeUpload.vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import { ElMessage } from 'element-plus-secondary'
 const { t } = useI18n()
 const loading = ref(false)
-
-const rules = {
-  name: [
-    {
-      required: true,
-      message: t('commons.input_content'),
-      trigger: 'change'
-    },
-    {
-      max: 50,
-      message: t('commons.char_can_not_more_50'),
-      trigger: 'change'
-    }
-  ]
-}
 const subject = ref()
 const subjectDialogShow = ref(false)
-const optType = ref('new')
+const dvMainStore = dvMainStoreWithOut()
+const { canvasViewInfo } = storeToRefs(dvMainStore)
 
+const state = reactive({
+  viewId: null
+})
 const curDataSetParamsInfo = ref([])
 
 const resetForm = () => {
@@ -31,53 +23,87 @@ const resetForm = () => {
   subjectDialogShow.value = false
 }
 const subjectForm = ref(null)
-const title = computed(() => (optType.value === 'new' ? '新建主题' : '编辑主题'))
+const rules = ref({})
 
-const optInit = (subjectItem, opt) => {
-  optType.value = opt
+const optInit = item => {
+  if (item) {
+    state.viewId = item.id
+    const chartInfo = canvasViewInfo.value[state.viewId]
+    curDataSetParamsInfo.value = deepCopy(chartInfo.calParams)
     subjectDialogShow.value = true
-  curDataSetParamsInfo.value = subjectItem
+  }
 }
 
 const saveSubject = () => {
-  subject.value.validate(result => {
-    if (result) {
-      emits('finish', subjectForm.value)
+  if (disabledCheck.value) {
+    ElMessage.error('请输入正确参数')
+    return
   }
+  canvasViewInfo.value[state.viewId]['calParams'] = curDataSetParamsInfo.value
+  useEmitt().emitter.emit('calcData-' + state.viewId, canvasViewInfo.value[state.viewId])
+  resetForm()
+}
+
+const disabledCheck = computed(() => {
+  return (
+    !curDataSetParamsInfo.value ||
+    (curDataSetParamsInfo.value &&
+      curDataSetParamsInfo.value.filter(item => item.value === null || item.value === undefined)
+        .length > 0)
+  )
 })
+
+const statesCheck = () => {
+  return subjectDialogShow.value
+}
+
+const handleDialogClick = e => {
+  e.preventDefault()
+  e.stopPropagation()
 }
 
 defineExpose({
   optInit,
+  statesCheck,
   resetForm
 })
 
 const emits = defineEmits(['finish'])
-const onImgChange = imgUrl => {
-  subjectForm.value.coverUrl = imgUrl
-}
 </script>
 
 <template>
   <el-dialog
     v-loading="loading"
-    :title="title"
+    title="计算参数输入"
     v-model="subjectDialogShow"
     width="400px"
     :before-close="resetForm"
+    @click="handleDialogClick"
   >
     <el-form
+      v-if="subjectDialogShow"
       label-position="top"
-      require-asterisk-position="right"
       ref="subject"
       :model="subjectForm"
       :rules="rules"
     >
-      <el-form-item v-for="paramsItem in curDataSetParamsInfo" class="form-item" prop="name">
+      <el-form-item
+        v-for="paramsItem in curDataSetParamsInfo"
+        :key="paramsItem"
+        class="form-item"
+        :prop="'value_' + paramsItem.name"
+      >
         <template #label>
-          <label class="m-label"> {{ paramsItem.name }} </label>
+          <label class="m-label">
+            计算字段[{{ paramsItem.name }}] <span style="color: red">*</span>
+          </label>
         </template>
-        <el-input v-model="paramsItem.value" />
+        <el-input-number
+          style="width: 100%"
+          v-model="paramsItem.value"
+          placeholder="请输入一个数字"
+          controls-position="right"
+        />
       </el-form-item>
     </el-form>
     <template #footer>

core/core-frontend/src/custom-component/indicator/DeIndicator.vue

@@ -361,7 +361,7 @@ const calcData = (view, callback) => {
           chartData.value = res?.data as Partial<Chart['data']>
           emit('onDrillFilters', res?.drillFilters)
 
-          dvMainStore.setViewDataDetails(view.id, chartData.value)
+          dvMainStore.setViewDataDetails(view.id, res)
           renderChart(res)
         }
         callback?.()

core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue

@@ -377,7 +377,7 @@ const calcData = (view: Chart, callback) => {
           state.totalItems = res?.totalItems
           const curViewInfo = canvasViewInfo.value[element.value.id]
           curViewInfo['curFields'] = res.data.fields
-          dvMainStore.setViewDataDetails(element.value.id, state.data)
+          dvMainStore.setViewDataDetails(element.value.id, res)
           initReady.value = true
           initCurFields(res)
         }
@@ -398,7 +398,7 @@ const calcData = (view: Chart, callback) => {
     state.totalItems = 0
     const curViewInfo = canvasViewInfo.value[element.value.id]
     curViewInfo['curFields'] = []
-    dvMainStore.setViewDataDetails(element.value.id, state.data)
+    dvMainStore.setViewDataDetails(element.value.id, state.viewDataInfo)
     initReady.value = true
     initCurFields(curViewInfo)
     callback?.()

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -1189,8 +1189,12 @@ export const dvMainStore = defineStore('dataVisualization', {
         mobileLayout: false
       }
     },
-    setViewDataDetails(viewId, dataInfo) {
-      this.canvasViewDataInfo[viewId] = dataInfo
+    setViewDataDetails(viewId, chartDataInfo) {
+      this.canvasViewDataInfo[viewId] = chartDataInfo.data
+      const viewInfo = this.canvasViewInfo[viewId]
+      if (viewInfo.tableId !== chartDataInfo.tableId) {
+        this.canvasViewInfo[viewId]['calcParams'] = chartDataInfo.calcParams || null
+      }
     },
     getViewDataDetails(viewId) {
       return this.canvasViewDataInfo[viewId]

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -180,7 +180,7 @@ const calcData = async (view, callback) => {
               dynamicAreaId.value = country.value + dynamicAreaId.value
             }
           }
-          dvMainStore.setViewDataDetails(view.id, chartData.value)
+          dvMainStore.setViewDataDetails(view.id, res)
           if (
             !res.drill &&
             !res.chartExtRequest?.filter?.length &&

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -136,7 +136,7 @@ const calcData = (view: Chart, callback, resetPageInfo = true) => {
         } else {
           chartData.value = res?.data as Partial<Chart['data']>
           state.totalItems = res?.totalItems
-          dvMainStore.setViewDataDetails(view.id, chartData.value)
+          dvMainStore.setViewDataDetails(view.id, res)
           emit('onDrillFilters', res?.drillFilters)
           renderChart(res as unknown as Chart, resetPageInfo)
         }