|
|
@@ -8,14 +8,15 @@
|
|
|
<div class="title"><span style="color: red">*</span>度量</div>
|
|
|
<div class="measure-list">
|
|
|
<a-popover>
|
|
|
- <div class="measure-item">
|
|
|
+ <div class="measure-item" v-if="measure_name">
|
|
|
<img :src="MetricsIcon" alt="" />
|
|
|
- <span class="measure-name">{{ measure_name }}</span>
|
|
|
- <span v-if="measure_aggregate" class="measure-aggregate">({{ measure_aggregate }})</span>
|
|
|
+ <span class="measure-name">{{ measure_name }}</span>
|
|
|
+ <span v-if="measure_aggregate" class="measure-aggregate">({{ measure_aggregate }})</span>
|
|
|
<!-- <icon-caret-down class="item-end-icon" /> -->
|
|
|
</div>
|
|
|
+ <div v-else class="empty-tip">暂无度量</div>
|
|
|
<template #content>
|
|
|
- <p style="font-size: 14px; color: #666">度量名称：{{ measure_name }}</p>
|
|
|
+ <p style="font-size: 14px; color: #666">度量名称：{{ measure_name || '暂无度量' }}</p>
|
|
|
<p style="font-size: 14px; color: #666" v-if="measure_aggregate">聚合方式：{{ measure_aggregate }}</p>
|
|
|
</template>
|
|
|
</a-popover>
|
|
|
@@ -29,15 +30,23 @@
|
|
|
v-for="item in dimension_list"
|
|
|
:key="item.dimesion_id"
|
|
|
:dimension_item="item"
|
|
|
+ :group_list="group_list"
|
|
|
@remove="handleDimensionRemove(item.dimesion_id)"
|
|
|
+ @remove_by_dim_group="handleDimensionRemoveByDimGroup(item.dimesion_id)"
|
|
|
></DimensionItem>
|
|
|
- <div v-if="!dimension_list.length" class="empty-tip">拖动数字段到此处</div>
|
|
|
+ <div v-if="!dimension_list.length" class="empty-tip">拖动字段到此处</div>
|
|
|
<!-- <div class="filter-item-tip">拖动数字段到此处</div> -->
|
|
|
<!-- <a-empty v-if="!dimension_list.length"></a-empty> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter" @dragover="onDragOver" @drop="onDropFilter">
|
|
|
- <div class="title">过滤器</div>
|
|
|
+ <div class="title">
|
|
|
+ <span>过滤器</span>
|
|
|
+ <div class="tools" v-if="false">
|
|
|
+ <img class="icon" :src="CopyIcon" alt="复制" title="复制" />
|
|
|
+ <img class="icon" :src="PasteIcon" alt="粘贴" title="粘贴" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="filter-list">
|
|
|
<DimensionItem
|
|
|
class="dimension-item"
|
|
|
@@ -47,7 +56,7 @@
|
|
|
@click="handleFilterClick(item)"
|
|
|
@remove="handleFilterRemove(item.filter_id)"
|
|
|
></DimensionItem>
|
|
|
- <div v-if="!filter_list.length" class="empty-tip">拖动数字段到此处</div>
|
|
|
+ <div v-if="!filter_list.length" class="empty-tip">拖动字段到此处</div>
|
|
|
<!-- <div class="filter-item-tip">拖动数字段到此处</div> -->
|
|
|
<!-- <div class=""></div> -->
|
|
|
</div>
|
|
|
@@ -55,13 +64,46 @@
|
|
|
<div class="filter-config">
|
|
|
<div class="title">全局取消继承</div>
|
|
|
<div class="filter-config-body">
|
|
|
- <div class="filter-config-body-item" v-for="item in common_config_list" :key="item.field_key">
|
|
|
- <a-checkbox v-model="item.is_checked" @change="(event) => handleCommonConfigClick(item, event)">{{
|
|
|
- item.field_name
|
|
|
- }}</a-checkbox>
|
|
|
- </div>
|
|
|
+ <template v-if="props.filter_option">
|
|
|
+ <div class="filter-config-body-item" v-for="item in common_config_list" :key="item.field_key">
|
|
|
+ <a-checkbox v-model="item.is_checked" @change="(event) => handleCommonConfigClick(item, event)">{{
|
|
|
+ item.field_name
|
|
|
+ }}</a-checkbox>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <a-empty v-if="!common_config_list.length"></a-empty>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="group">
|
|
|
+ <div class="title">分组</div>
|
|
|
+ <div class="group-list" @dragover="onDragOver" @drop="onDropGroup">
|
|
|
+ <GroupItem
|
|
|
+ class="dimension-item"
|
|
|
+ v-for="item in group_list"
|
|
|
+ :key="item.group_id"
|
|
|
+ :group_item="item"
|
|
|
+ @remove="handleGroupRemove(item.group_id)"
|
|
|
+ @update-top-n="handleUpdateTopN"
|
|
|
+ ></GroupItem>
|
|
|
+ <div v-if="!group_list.length" class="empty-tip">拖动字段到此处</div>
|
|
|
+ <!-- <div class="filter-item-tip">拖动数字段到此处</div> -->
|
|
|
+ <!-- <a-empty v-if="!dimension_list.length"></a-empty> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="filter-time"> -->
|
|
|
+ <!-- <span>动态时间</span> -->
|
|
|
+ <!-- <a-switch v-model="dynamic_time" type="round" checked-value="开启" unchecked-value="关闭" /> -->
|
|
|
+ <!-- <a-switch
|
|
|
+ v-model="dynamic_time"
|
|
|
+ type="round"
|
|
|
+ :checked-value="1"
|
|
|
+ :unchecked-value="0"
|
|
|
+ checked-color="var(--primary-default)"
|
|
|
+ checked-text="启用"
|
|
|
+ unchecked-text="停用"
|
|
|
+ @change="handleStatusChange(record)"
|
|
|
+ ></a-switch> -->
|
|
|
+ <!-- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<StringFilter
|
|
|
@@ -91,16 +133,26 @@
|
|
|
@confirm="handleNumberConfirm"
|
|
|
@cancel="closeNumberModel"
|
|
|
></NumberFilter>
|
|
|
+ <GroupReplaceModal
|
|
|
+ v-if="show_tips_by_group"
|
|
|
+ :visible="show_tips_by_group"
|
|
|
+ @ok="handleGroupReplaceConfirm"
|
|
|
+ @cancel="closeGroupReplaceModal"
|
|
|
+ ></GroupReplaceModal>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
|
|
|
import { Message } from '@arco-design/web-vue';
|
|
|
+import CopyIcon from '../../../assets/chat-report/copy.svg';
|
|
|
+import PasteIcon from '../../../assets/chat-report/paste.svg';
|
|
|
import MetricsIcon from '../../../assets/report-template/metrics_icon.svg';
|
|
|
import DimensionItem from './DimensionItem.vue';
|
|
|
+import GroupItem from './GroupItem.vue';
|
|
|
import StringFilter from './model/StringModel.vue';
|
|
|
import DateFilter from './model/DateModel.vue';
|
|
|
import NumberFilter from './model/NumberModel.vue';
|
|
|
+import GroupReplaceModal from '../../../components/GroupReplaceModal.vue';
|
|
|
import { generateID } from '../editor-model/common-tools';
|
|
|
import { useReportEditor } from '../../../base/store/use-report-editor';
|
|
|
import { num_form_default_data, str_form_default_data, date_form_default_data } from './filter_data';
|
|
|
@@ -120,6 +172,8 @@ const props = defineProps({
|
|
|
|
|
|
const emit = defineEmits(['content-changed']);
|
|
|
|
|
|
+const dynamic_time = ref(false);
|
|
|
+
|
|
|
const aggregation_map = {
|
|
|
sum: '求和',
|
|
|
avg: '求平均值',
|
|
|
@@ -129,10 +183,13 @@ const aggregation_map = {
|
|
|
};
|
|
|
|
|
|
const filter_title = computed(() => {
|
|
|
- return '指标 — ' + props.filter_option.option.field_name;
|
|
|
+ if (!props.filter_option?.option?.field_name) {
|
|
|
+ return '指标';
|
|
|
+ }
|
|
|
+ return '指标 — ' + props.filter_option?.option?.field_name || '';
|
|
|
});
|
|
|
const measure_name = computed(() => {
|
|
|
- return props.filter_option.option.field_name;
|
|
|
+ return props.filter_option?.option?.field_name || '';
|
|
|
});
|
|
|
const measure_aggregate = computed(() => {
|
|
|
return aggregation_map[reportEditor.QueryTargetAggregationType] || '无聚合';
|
|
|
@@ -140,6 +197,10 @@ const measure_aggregate = computed(() => {
|
|
|
|
|
|
const dimension_list = ref([]);
|
|
|
|
|
|
+const group_list = ref([]);
|
|
|
+const show_tips_by_group = ref(false);
|
|
|
+const temp_group_list = ref([]);
|
|
|
+
|
|
|
const filter_list = ref([]);
|
|
|
|
|
|
const filter_type = ref('');
|
|
|
@@ -174,16 +235,17 @@ const onDrop = (event) => {
|
|
|
if (event.dataTransfer.types.includes('application/x-dimension')) {
|
|
|
rawData = event.dataTransfer.getData('application/x-dimension');
|
|
|
}
|
|
|
- console.log('rawData', rawData);
|
|
|
+ // console.log('rawData', rawData);
|
|
|
// rawData = event.dataTransfer.getData('text/plain');
|
|
|
|
|
|
if (!rawData) return;
|
|
|
+ if (measure_name.value == '') return Message.error('请先选择指标');
|
|
|
try {
|
|
|
const item = JSON.parse(rawData);
|
|
|
- console.log(item, 999);
|
|
|
+ // console.log(item, 999);
|
|
|
if (item.filter_config) {
|
|
|
const filter_config = JSON.parse(item.filter_config);
|
|
|
- console.log(filter_config, 888);
|
|
|
+ // console.log(filter_config, 888);
|
|
|
if (!filter_config.is_aggregatable) {
|
|
|
return Message.error('该维度不支持聚合');
|
|
|
}
|
|
|
@@ -198,7 +260,69 @@ const onDrop = (event) => {
|
|
|
dimension_list.value.push(item);
|
|
|
|
|
|
reportEditor.changeDimensionListConfigItem(item);
|
|
|
- emit('content-changed', { dimension_list: dimension_list.value, filter_list: filter_list.value });
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.warn('Failed to parse dropped metric:', e);
|
|
|
+ }
|
|
|
+};
|
|
|
+const onDropGroup = (event) => {
|
|
|
+ event.preventDefault();
|
|
|
+ event.stopPropagation();
|
|
|
+ let rawData = null;
|
|
|
+ if (event.dataTransfer.types.includes('application/x-dimension')) {
|
|
|
+ rawData = event.dataTransfer.getData('application/x-dimension');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!rawData) return;
|
|
|
+ if (measure_name.value == '') return Message.error('请先选择指标');
|
|
|
+ if (!dimension_list.value.length) return Message.error('请先添加维度');
|
|
|
+ try {
|
|
|
+ const rawItem = JSON.parse(rawData);
|
|
|
+
|
|
|
+ // 检查维度是否已添加
|
|
|
+ const idx = dimension_list.value.findIndex((dimension) => dimension.field_key === rawItem.field_key);
|
|
|
+ if (idx == -1) {
|
|
|
+ Message.error('请先添加该维度，再添加分组维度');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查分组是否已存在
|
|
|
+ const index = group_list.value.findIndex((it) => it.field_name == rawItem.field_name);
|
|
|
+ if (index != -1) {
|
|
|
+ Message.warning('分组已存在');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建新对象，只提取需要的字段，避免循环引用
|
|
|
+ const groupItem = {
|
|
|
+ group_id: generateID(),
|
|
|
+ field_id: rawItem.id || rawItem.field_id || '',
|
|
|
+ field_name: rawItem.field_name || '',
|
|
|
+ field_key: rawItem.field_key || '',
|
|
|
+ field_type: rawItem.field_type || '',
|
|
|
+ field_description: rawItem.field_description || '',
|
|
|
+ top_n: ''
|
|
|
+ };
|
|
|
+ // 当往分组中拖入新的分组时，提示是否替换当前分组
|
|
|
+ if (group_list.value.length) {
|
|
|
+ show_tips_by_group.value = true;
|
|
|
+ temp_group_list.value = [{ ...groupItem }];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ reportEditor.changeGroupListConfig(groupItem);
|
|
|
+ group_list.value = [];
|
|
|
+ group_list.value.push(groupItem);
|
|
|
+ console.log(group_list.value, 890);
|
|
|
+ // 触发内容变更事件
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: [...group_list.value]
|
|
|
+ });
|
|
|
} catch (e) {
|
|
|
console.warn('Failed to parse dropped metric:', e);
|
|
|
}
|
|
|
@@ -215,7 +339,7 @@ const onDropFilter = (event) => {
|
|
|
rawData = event.dataTransfer.getData('application/x-metric');
|
|
|
}
|
|
|
if (!rawData) return;
|
|
|
-
|
|
|
+ if (measure_name.value == '') return Message.error('请先选择指标');
|
|
|
try {
|
|
|
const item = JSON.parse(rawData);
|
|
|
// insertOption(item);
|
|
|
@@ -223,14 +347,36 @@ const onDropFilter = (event) => {
|
|
|
filter_list.value.push(item);
|
|
|
filter_type.value = item.field_type;
|
|
|
setFilterConfig(item);
|
|
|
- emit('content-changed', { dimension_list: dimension_list.value, filter_list: filter_list.value });
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
} catch (e) {
|
|
|
console.warn('Failed to parse dropped metric:', e);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const handleGroupReplaceConfirm = () => {
|
|
|
+ reportEditor.changeGroupListConfig(temp_group_list.value[0]);
|
|
|
+ group_list.value = [];
|
|
|
+ group_list.value.push(...temp_group_list.value);
|
|
|
+ temp_group_list.value = [];
|
|
|
+ // 触发内容变更事件
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: [...group_list.value]
|
|
|
+ });
|
|
|
+ show_tips_by_group.value = false;
|
|
|
+};
|
|
|
+const closeGroupReplaceModal = () => {
|
|
|
+ show_tips_by_group.value = false;
|
|
|
+ temp_group_list.value = [];
|
|
|
+};
|
|
|
+
|
|
|
const closeNumberModel = (filter_config) => {
|
|
|
- console.log(filter_config, 112);
|
|
|
+ // console.log(filter_config, 112);
|
|
|
filter_list.value.forEach((item) => {
|
|
|
if (item.filter_id === filter_config.filter_id) {
|
|
|
if (!item.metric_fields_item) {
|
|
|
@@ -242,7 +388,7 @@ const closeNumberModel = (filter_config) => {
|
|
|
closeModel();
|
|
|
};
|
|
|
const closeDateModel = (filter_config) => {
|
|
|
- console.log(filter_config, 112);
|
|
|
+ // console.log(filter_config, 112);
|
|
|
filter_list.value.forEach((item) => {
|
|
|
if (item.filter_id === filter_config.filter_id) {
|
|
|
if (!item.metric_fields_item) {
|
|
|
@@ -254,7 +400,7 @@ const closeDateModel = (filter_config) => {
|
|
|
closeModel();
|
|
|
};
|
|
|
const closeStringModel = (filter_config) => {
|
|
|
- console.log(filter_config, 112);
|
|
|
+ // console.log(filter_config, 112);
|
|
|
filter_list.value.forEach((item) => {
|
|
|
if (item.filter_id === filter_config.filter_id) {
|
|
|
if (!item.metric_fields_item) {
|
|
|
@@ -271,13 +417,13 @@ const closeModel = () => {
|
|
|
};
|
|
|
|
|
|
const handleFilterClick = (item) => {
|
|
|
- console.log(item, 111111111111111);
|
|
|
+ // console.log(item, 111111111111111);
|
|
|
filter_type.value = item.field_type;
|
|
|
- console.log(item);
|
|
|
+ // console.log(item);
|
|
|
setFilterConfig(item);
|
|
|
};
|
|
|
const setFilterConfig = (item) => {
|
|
|
- console.log(item, item.field_type === 'date');
|
|
|
+ // console.log(item, item.field_type === 'date');
|
|
|
if (item.field_type == 'str') {
|
|
|
filter_config_str.value = JSON.parse(item.filter_config);
|
|
|
filter_config_str.value.metric_fields_item = str_form_default_data;
|
|
|
@@ -293,23 +439,61 @@ const setFilterConfig = (item) => {
|
|
|
filter_id.value = item.filter_id;
|
|
|
filter_form_data.value = item.metric_fields_item || null;
|
|
|
|
|
|
- console.log('asasasdasdasd', filter_list.value);
|
|
|
+ // console.log('asasasdasdasd', filter_list.value);
|
|
|
// return;
|
|
|
};
|
|
|
const handleDimensionRemove = (dimesion_id) => {
|
|
|
dimension_list.value = dimension_list.value.filter((item) => item.dimesion_id !== dimesion_id);
|
|
|
reportEditor.changeDimensionListConfig(dimension_list.value);
|
|
|
- emit('content-changed', { dimension_list: dimension_list.value, filter_list: filter_list.value });
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleDimensionRemoveByDimGroup = (dimesion_id) => {
|
|
|
+ handleDimensionRemove(dimesion_id);
|
|
|
+ handleGroupRemove(dimesion_id);
|
|
|
+};
|
|
|
+
|
|
|
+const handleGroupRemove = (group_id) => {
|
|
|
+ reportEditor.deleteGroupListConfig();
|
|
|
+ group_list.value = [];
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleUpdateTopN = ({ group_id, top_n }) => {
|
|
|
+ const index = group_list.value.findIndex((item) => item.group_id === group_id);
|
|
|
+ if (index !== -1) {
|
|
|
+ group_list.value[index] = {
|
|
|
+ ...group_list.value[index],
|
|
|
+ top_n
|
|
|
+ };
|
|
|
+ reportEditor.changeGroupListConfig(group_list.value[index]);
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const handleFilterRemove = (filter_id) => {
|
|
|
filter_list.value = filter_list.value.filter((item) => item.filter_id !== filter_id);
|
|
|
reportEditor.changeFilterListConfig(filter_list.value);
|
|
|
- emit('content-changed', { dimension_list: dimension_list.value, filter_list: filter_list.value });
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
};
|
|
|
// 数字过滤器配置项
|
|
|
const handleNumberConfirm = (filter_config) => {
|
|
|
- console.log(filter_config);
|
|
|
+ // console.log(filter_config);
|
|
|
filter_list.value.forEach((item) => {
|
|
|
if (item.filter_id === filter_config.filter_id) {
|
|
|
item.metric_fields_item = filter_config;
|
|
|
@@ -317,11 +501,15 @@ const handleNumberConfirm = (filter_config) => {
|
|
|
}
|
|
|
});
|
|
|
closeModel();
|
|
|
- emit('content-changed', { dimension_list: dimension_list.value, filter_list: filter_list.value });
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
};
|
|
|
// 字符串过滤器配置项
|
|
|
const handleStringConfirm = (filter_config) => {
|
|
|
- console.log(filter_config);
|
|
|
+ // console.log(filter_config);
|
|
|
filter_list.value.forEach((item) => {
|
|
|
if (item.filter_id === filter_config.filter_id) {
|
|
|
item.metric_fields_item = filter_config;
|
|
|
@@ -329,11 +517,15 @@ const handleStringConfirm = (filter_config) => {
|
|
|
}
|
|
|
});
|
|
|
closeModel();
|
|
|
- emit('content-changed', { dimension_list: dimension_list.value, filter_list: filter_list.value });
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
};
|
|
|
// 日期过滤器配置项
|
|
|
const handleDateConfirm = (filter_config) => {
|
|
|
- console.log(filter_config);
|
|
|
+ // console.log(filter_config);
|
|
|
filter_list.value.forEach((item) => {
|
|
|
if (item.filter_id === filter_config.filter_id) {
|
|
|
item.metric_fields_item = filter_config;
|
|
|
@@ -341,7 +533,11 @@ const handleDateConfirm = (filter_config) => {
|
|
|
}
|
|
|
});
|
|
|
closeModel();
|
|
|
- emit('content-changed', { dimension_list: dimension_list.value, filter_list: filter_list.value });
|
|
|
+ emit('content-changed', {
|
|
|
+ dimension_list: dimension_list.value,
|
|
|
+ filter_list: filter_list.value,
|
|
|
+ group_list: group_list.value
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
const handleUpdate = () => {
|
|
|
@@ -365,7 +561,7 @@ const handleCommonConfigClick = (item) => {
|
|
|
common_config_list.value.forEach((it) => {
|
|
|
if (it.field_key === item.field_key) {
|
|
|
it.is_extend = item.is_checked ? 0 : 1;
|
|
|
- it.is_checked = !item.is_checked;
|
|
|
+ it.is_checked = item.is_checked;
|
|
|
}
|
|
|
});
|
|
|
reportEditor.changeCommonConfigListConfig(common_config_list.value);
|
|
|
@@ -373,11 +569,11 @@ const handleCommonConfigClick = (item) => {
|
|
|
watch(
|
|
|
[() => props.filter_option, () => reportEditor.QueryTargetDimensionListConfig],
|
|
|
([newVal, newTargetDiemensionList]) => {
|
|
|
- console.log('newVal', newVal);
|
|
|
- const dimension_query_list = newVal.option.source.flexible_template_metric_fields.filter(
|
|
|
+ console.log('newVal', newVal, newTargetDiemensionList);
|
|
|
+ const dimension_query_list = newVal?.option?.source?.flexible_template_metric_fields?.filter(
|
|
|
(item) => item.column_role === 'dim'
|
|
|
);
|
|
|
- const result = dimension_query_list.filter((item) => newTargetDiemensionList.includes(item.field_key));
|
|
|
+ const result = dimension_query_list?.filter((item) => newTargetDiemensionList.includes(item.field_key)) || [];
|
|
|
// 深拷贝result数组中的每个item，避免直接修改props
|
|
|
const processedResult = result.map((item) => {
|
|
|
return {
|
|
|
@@ -385,7 +581,33 @@ watch(
|
|
|
dimesion_id: generateID()
|
|
|
};
|
|
|
});
|
|
|
+ console.log(processedResult, 9090);
|
|
|
dimension_list.value = [...processedResult];
|
|
|
+ // 当往维度中拖入时，如果存在已有分组，则不更新分组
|
|
|
+ if (group_list.value.length) return;
|
|
|
+ // 获取当前指标配置的分组信息
|
|
|
+ let group_filed_key = reportEditor.QueryTargetGroupListConfig;
|
|
|
+ let group_item = {};
|
|
|
+ if (!dimension_list.value.length) return;
|
|
|
+ dimension_list.value.forEach((item) => {
|
|
|
+ console.log(item, group_filed_key);
|
|
|
+
|
|
|
+ if (item.field_key === group_filed_key) {
|
|
|
+ group_item = {
|
|
|
+ ...item,
|
|
|
+ group_id: generateID(),
|
|
|
+ top_n: ''
|
|
|
+ };
|
|
|
+ group_list.value.push(group_item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(group_list.value, 9090);
|
|
|
+ if (group_list.value.length) {
|
|
|
+ group_list.value[0].top_n = reportEditor.QueryTargetTopNListConfig;
|
|
|
+ } else {
|
|
|
+ group_list.value = [];
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
immediate: true,
|
|
|
@@ -396,9 +618,9 @@ watch(
|
|
|
watch(
|
|
|
[() => props.filter_option, () => reportEditor.QueryTargetFilterListConfig],
|
|
|
([newVal, newTargetFilterList]) => {
|
|
|
- const filter_query_list = newVal.option.source.flexible_template_metric_fields;
|
|
|
+ const filter_query_list = newVal?.option?.source?.flexible_template_metric_fields || [];
|
|
|
const result = [];
|
|
|
- console.log(filter_query_list, newTargetFilterList);
|
|
|
+ // console.log(filter_query_list, newTargetFilterList);
|
|
|
filter_query_list.forEach((item) => {
|
|
|
newTargetFilterList.forEach((filterItem) => {
|
|
|
if (item.field_key === filterItem.field_key) {
|
|
|
@@ -411,7 +633,7 @@ watch(
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
- console.log(result, 111);
|
|
|
+ // console.log(result, 111);
|
|
|
// 深拷贝result数组中的每个item，避免直接修改props
|
|
|
filter_list.value = [...result];
|
|
|
},
|
|
|
@@ -428,7 +650,11 @@ watch(
|
|
|
if (targetExtendCommonConfigInfo) {
|
|
|
return;
|
|
|
}
|
|
|
- common_config_list.value = newVal.map((item) => ({
|
|
|
+ if (!newVal.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ common_config_list.value = (newVal || []).map((item) => ({
|
|
|
...item,
|
|
|
is_checked: item.is_extend / 1 === 1 ? false : true // 0: 不继承，选中，1: 继承，不选中
|
|
|
}));
|
|
|
@@ -436,7 +662,7 @@ watch(
|
|
|
...item,
|
|
|
is_extend: item.is_checked ? 0 : 1
|
|
|
}));
|
|
|
- console.log('common_config_list', common_config_list.value);
|
|
|
+ // console.log('common_config_list', common_config_list.value);
|
|
|
reportEditor.changeCommonConfigListConfig(submit_common_config_list);
|
|
|
},
|
|
|
{
|
|
|
@@ -449,6 +675,9 @@ watch(
|
|
|
[() => props.filter_option, () => reportEditor.QueryTargetExtendCommonConfigInfo],
|
|
|
([newVal, newTargetExtendCommonConfigInfo]) => {
|
|
|
console.log(1111111111111111111, newTargetExtendCommonConfigInfo);
|
|
|
+ if (!props.target_common_config_info.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
// 确保每个item都有is_checked属性
|
|
|
const processedConfig = newTargetExtendCommonConfigInfo.map((item) => ({
|
|
|
...item,
|
|
|
@@ -469,6 +698,7 @@ defineExpose({
|
|
|
</script>
|
|
|
<style scoped lang="css">
|
|
|
.mention_filter {
|
|
|
+ width: 300px;
|
|
|
height: 100%;
|
|
|
border-bottom: 1px solid #d8d8d8;
|
|
|
}
|
|
|
@@ -516,6 +746,10 @@ defineExpose({
|
|
|
cursor: pointer;
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
+.empty-tip {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
.measure-name {
|
|
|
flex: 1 1 auto;
|
|
|
min-width: 0; /* allow flex item to shrink for ellipsis */
|
|
|
@@ -533,8 +767,8 @@ defineExpose({
|
|
|
color: #0a817e;
|
|
|
}
|
|
|
.dimension {
|
|
|
- height: 240px;
|
|
|
- max-height: 240px;
|
|
|
+ height: 180px;
|
|
|
+ max-height: 180px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.dimension-list {
|
|
|
@@ -571,8 +805,23 @@ defineExpose({
|
|
|
.filter {
|
|
|
height: calc(100% - 100px - 240px - 30px - 200px);
|
|
|
}
|
|
|
+.filter .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.filter .title .tools {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+.filter .title .tools .icon {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
.filter-config {
|
|
|
- height: 200px;
|
|
|
+ height: 150px;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
@@ -622,6 +871,36 @@ defineExpose({
|
|
|
.empty-tip {
|
|
|
text-align: center;
|
|
|
}
|
|
|
+.group {
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
+ padding: 10px;
|
|
|
+ height: 140px;
|
|
|
+ max-height: 140px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.group-list {
|
|
|
+ min-height: 36px;
|
|
|
+ border-radius: 6px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px dashed rgba(147, 147, 147, 0.6);
|
|
|
+ max-height: calc(100% - 50px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ margin: 10px 0px;
|
|
|
+ padding: 5px 3px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* overflow-y: auto; */
|
|
|
+}
|
|
|
+.filter-time {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 10px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-top: 1px solid #ebeef5;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
:deep(.arco-checkbox-checked .arco-checkbox-icon) {
|
|
|
background-color: var(--primary-default);
|
|
|
}
|
韩洋
