|
@@ -4,7 +4,8 @@
|
|
|
<EditorModel
|
|
<EditorModel
|
|
|
ref="editorModel"
|
|
ref="editorModel"
|
|
|
:style="StyleEditor"
|
|
:style="StyleEditor"
|
|
|
- :metrics_list="metrics_list"
|
|
|
|
|
|
|
+ :metrics_list="existingMatchList"
|
|
|
|
|
+ :dimensions_list="dimensions_list"
|
|
|
:extracted_metrics="extracted_metrics"
|
|
:extracted_metrics="extracted_metrics"
|
|
|
:render_html="render_html"
|
|
:render_html="render_html"
|
|
|
:template_name="template_name"
|
|
:template_name="template_name"
|
|
@@ -18,26 +19,37 @@
|
|
|
@to-save-setting="handleToSaveSetting"
|
|
@to-save-setting="handleToSaveSetting"
|
|
|
@submit-html="handleSubmitHtml"
|
|
@submit-html="handleSubmitHtml"
|
|
|
@save-template="handleSaveTemplate"
|
|
@save-template="handleSaveTemplate"
|
|
|
|
|
+ @content-changed="handleContentChanged"
|
|
|
|
|
+ @update-draft="handleUpdateDraft"
|
|
|
></EditorModel>
|
|
></EditorModel>
|
|
|
- <FilterModel v-if="show_filter_model" ref="filterModelRef" :filter_option="target_filter_option"></FilterModel>
|
|
|
|
|
|
|
+ <FilterModel
|
|
|
|
|
+ v-if="show_filter_model"
|
|
|
|
|
+ ref="filterModelRef"
|
|
|
|
|
+ :filter_option="target_filter_option"
|
|
|
|
|
+ @content-changed="handleContentChanged"
|
|
|
|
|
+ ></FilterModel>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="body-right">
|
|
<div class="body-right">
|
|
|
<SourceModel
|
|
<SourceModel
|
|
|
|
|
+ :target_source_id="target_source_id"
|
|
|
|
|
+ :data_source_list="data_source_list"
|
|
|
:metrics_list="metrics_list"
|
|
:metrics_list="metrics_list"
|
|
|
|
|
+ :dimensions_list="dimensions_list"
|
|
|
:is_metrics_loading="is_metrics_loading"
|
|
:is_metrics_loading="is_metrics_loading"
|
|
|
- :target_filter_option="target_filter_option"
|
|
|
|
|
@metrics-click="handleMetricsClick"
|
|
@metrics-click="handleMetricsClick"
|
|
|
|
|
+ @change-source="handleChangeSource"
|
|
|
></SourceModel>
|
|
></SourceModel>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup >
|
|
<script setup >
|
|
|
-import { ref, computed, onMounted, nextTick } from 'vue';
|
|
|
|
|
|
|
+import { ref, computed, onMounted, nextTick, watch } from 'vue';
|
|
|
import EditorModel from './template-detail/EditorModel.vue';
|
|
import EditorModel from './template-detail/EditorModel.vue';
|
|
|
import FilterModel from './template-detail/FilterModel.vue';
|
|
import FilterModel from './template-detail/FilterModel.vue';
|
|
|
import SourceModel from './template-detail/SourceModel.vue';
|
|
import SourceModel from './template-detail/SourceModel.vue';
|
|
|
import { getMetrics } from '../conversation-dialog/api-template';
|
|
import { getMetrics } from '../conversation-dialog/api-template';
|
|
|
|
|
+import { funcThrottle, funcDebounce } from '../../utils/utils';
|
|
|
import {
|
|
import {
|
|
|
formatHtmlToMd,
|
|
formatHtmlToMd,
|
|
|
formatMdToHtml,
|
|
formatMdToHtml,
|
|
@@ -75,12 +87,16 @@ const props = defineProps({
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
-const emit = defineEmits(['save-template']);
|
|
|
|
|
|
|
+const emit = defineEmits(['save-template', 'update-draft']);
|
|
|
|
|
|
|
|
const show_filter_model = ref(false);
|
|
const show_filter_model = ref(false);
|
|
|
const target_filter_option = ref(null);
|
|
const target_filter_option = ref(null);
|
|
|
const is_metrics_loading = ref(false); // 指标列表加载中
|
|
const is_metrics_loading = ref(false); // 指标列表加载中
|
|
|
-const metrics_list = ref([]); // 指标列表
|
|
|
|
|
|
|
+const data_source_list = ref([]); // 数据源列表
|
|
|
|
|
+const metrics_list = ref([]); // 度量列表
|
|
|
|
|
+const dimensions_list = ref([]); // 维度列表
|
|
|
|
|
+const target_source_id = ref('');
|
|
|
|
|
+
|
|
|
const extracted_metrics = ref([]);
|
|
const extracted_metrics = ref([]);
|
|
|
|
|
|
|
|
const render_html = ref('');
|
|
const render_html = ref('');
|
|
@@ -100,11 +116,16 @@ const StyleEditor = computed(() => {
|
|
|
};
|
|
};
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+const existingMatchList = computed(() => {
|
|
|
|
|
+ return reportEditor.QueryExistingMatchList;
|
|
|
|
|
+});
|
|
|
const handleChange = () => {
|
|
const handleChange = () => {
|
|
|
show_filter_model.value = !show_filter_model.value;
|
|
show_filter_model.value = !show_filter_model.value;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleMentionClick = (option) => {
|
|
const handleMentionClick = (option) => {
|
|
|
|
|
+ console.log(option, 890);
|
|
|
|
|
+ target_source_id.value = option.option.source.id || '';
|
|
|
target_filter_option.value = null;
|
|
target_filter_option.value = null;
|
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
|
target_filter_option.value = option;
|
|
target_filter_option.value = option;
|
|
@@ -134,7 +155,19 @@ const getMetricsFun = async () => {
|
|
|
const res = await getMetrics({ metric_name: '', page: 1, size: 100000 });
|
|
const res = await getMetrics({ metric_name: '', page: 1, size: 100000 });
|
|
|
console.log(res);
|
|
console.log(res);
|
|
|
if (res.code / 1 === 200) {
|
|
if (res.code / 1 === 200) {
|
|
|
- metrics_list.value = res.data || [];
|
|
|
|
|
|
|
+ data_source_list.value = res.data;
|
|
|
|
|
+ target_source_id.value = data_source_list.value[0]?.id;
|
|
|
|
|
+ if (data_source_list.value.length > 0) {
|
|
|
|
|
+ const flexible_template_metric_fields = data_source_list.value[0].flexible_template_metric_fields;
|
|
|
|
|
+ if (flexible_template_metric_fields.length) {
|
|
|
|
|
+ setDataToMetricsAndDimension(flexible_template_metric_fields, data_source_list.value[0]);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ // 获取所有数据源中的度量数据
|
|
|
|
|
+ const all_metrics = extractMeasMetrics(data_source_list.value);
|
|
|
|
|
+ // console.log('all_metrics', all_metrics);
|
|
|
|
|
+ reportEditor.setExistingMatchList(all_metrics);
|
|
|
|
|
+ // console.log(all_metrics);
|
|
|
}
|
|
}
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
console.log(error);
|
|
@@ -143,11 +176,39 @@ const getMetricsFun = async () => {
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const setDataToMetricsAndDimension = (flexible_template_metric_fields, orgin_source) => {
|
|
|
|
|
+ metrics_list.value = flexible_template_metric_fields.filter((item) => item.column_role === 'meas');
|
|
|
|
|
+ metrics_list.value = metrics_list.value.map((item) => ({
|
|
|
|
|
+ ...item,
|
|
|
|
|
+ source: orgin_source
|
|
|
|
|
+ }));
|
|
|
|
|
+ dimensions_list.value = flexible_template_metric_fields.filter((item) => item.column_role === 'dim');
|
|
|
|
|
+};
|
|
|
|
|
+const extractMeasMetrics = (data) => {
|
|
|
|
|
+ return data
|
|
|
|
|
+ .flatMap((item) => {
|
|
|
|
|
+ return item.flexible_template_metric_fields.map((field) => ({
|
|
|
|
|
+ ...field,
|
|
|
|
|
+ source: item
|
|
|
|
|
+ }));
|
|
|
|
|
+ })
|
|
|
|
|
+ .filter((field) => field.column_role === 'meas');
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
const handleToSaveSetting = () => {
|
|
const handleToSaveSetting = () => {
|
|
|
if (filterModelRef.value) {
|
|
if (filterModelRef.value) {
|
|
|
filterModelRef.value.saveSettingToStore();
|
|
filterModelRef.value.saveSettingToStore();
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+// 切换数据源时,更新指标和维度列表
|
|
|
|
|
+const handleChangeSource = (id) => {
|
|
|
|
|
+ data_source_list.value.forEach((item) => {
|
|
|
|
|
+ if (item.id === id) {
|
|
|
|
|
+ setDataToMetricsAndDimension(item.flexible_template_metric_fields, item);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ show_filter_model.value = false;
|
|
|
|
|
+};
|
|
|
const handleSubmitHtml = (html) => {
|
|
const handleSubmitHtml = (html) => {
|
|
|
submit_html.value = html;
|
|
submit_html.value = html;
|
|
|
const md = formatHtmlToMd(submit_html.value);
|
|
const md = formatHtmlToMd(submit_html.value);
|
|
@@ -158,13 +219,63 @@ const handleSaveTemplate = (data) => {
|
|
|
emit('save-template', data);
|
|
emit('save-template', data);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
|
|
- await getMetricsFun();
|
|
|
|
|
- render_html.value = formatMdToHtml(metrics_list.value, props.md_data);
|
|
|
|
|
- const extract_metrics = getExistMetrics(metrics_list.value, props.md_data);
|
|
|
|
|
|
|
+const handleContentChanged = funcDebounce(() => {
|
|
|
|
|
+ console.log('需要各项');
|
|
|
|
|
+ if (props.template_id) {
|
|
|
|
|
+ reportEditor.setIsNeedSaveTemplate(true);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ reportEditor.setIsNeedSave(false);
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ reportEditor.setIsNeedSave(true);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+}, 5000);
|
|
|
|
|
+
|
|
|
|
|
+const handleUpdateDraft = (data) => {
|
|
|
|
|
+ emit('update-draft', data);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 标记 getMetricsFun 是否完成
|
|
|
|
|
+const isMetricsLoaded = ref(false);
|
|
|
|
|
+
|
|
|
|
|
+// 执行渲染逻辑
|
|
|
|
|
+const performRender = () => {
|
|
|
|
|
+ const existing_match_list = reportEditor.QueryExistingMatchList;
|
|
|
|
|
+ render_html.value = formatMdToHtml(existing_match_list, props.md_data);
|
|
|
|
|
+ console.log(props.md_data, 99999999);
|
|
|
|
|
+ console.log(existing_match_list, render_html.value, 99999999999);
|
|
|
|
|
+ const extract_metrics = getExistMetrics(existing_match_list, props.md_data);
|
|
|
extracted_metrics.value = extract_metrics || [];
|
|
extracted_metrics.value = extract_metrics || [];
|
|
|
console.log('xxxxx', extracted_metrics.value);
|
|
console.log('xxxxx', extracted_metrics.value);
|
|
|
reportEditor.addMetric(extract_metrics);
|
|
reportEditor.addMetric(extract_metrics);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 检查是否可以执行渲染
|
|
|
|
|
+const checkRenderReady = () => {
|
|
|
|
|
+ // 只有当 getMetricsFun 完成且模板详情不在加载中时,才执行渲染
|
|
|
|
|
+ if (isMetricsLoaded.value && !props.is_loading_template_detail) {
|
|
|
|
|
+ performRender();
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 监听模板详情加载状态变化
|
|
|
|
|
+watch(
|
|
|
|
|
+ () => props.is_loading_template_detail,
|
|
|
|
|
+ () => {
|
|
|
|
|
+ // 状态变化时检查是否可以渲染
|
|
|
|
|
+ checkRenderReady();
|
|
|
|
|
+ }
|
|
|
|
|
+);
|
|
|
|
|
+
|
|
|
|
|
+onMounted(async () => {
|
|
|
|
|
+ // 总是调用 getMetricsFun
|
|
|
|
|
+ await getMetricsFun();
|
|
|
|
|
+ isMetricsLoaded.value = true;
|
|
|
|
|
+
|
|
|
|
|
+ // 检查是否可以立即渲染
|
|
|
|
|
+ checkRenderReady();
|
|
|
|
|
+
|
|
|
|
|
+ // 如果模板详情还在加载中,等待 watch 监听状态变化后再渲染
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped lang="css">
|
|
<style scoped lang="css">
|