fix: 调整数据来源配置
This commit is contained in:
parent
91832d1e8c
commit
7afe485d90
@ -52,7 +52,9 @@ const emit = defineEmits(["toFilt"]);
|
|||||||
|
|
||||||
const chartType = ref("line");
|
const chartType = ref("line");
|
||||||
const dateType = ref("day");
|
const dateType = ref("day");
|
||||||
const filterData = ref({});
|
const filterData = ref({
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
const rangePicker = computed(() => {
|
const rangePicker = computed(() => {
|
||||||
switch(dateType.value) {
|
switch(dateType.value) {
|
||||||
@ -72,9 +74,9 @@ const currentChart = computed(() => {
|
|||||||
watch(
|
watch(
|
||||||
() => props.filterConfig,
|
() => props.filterConfig,
|
||||||
(newVal) => {
|
(newVal) => {
|
||||||
newVal.forEach((item) => {
|
// newVal.forEach((item) => {
|
||||||
filterData.value[item.name] = undefined;
|
// filterData.value[item.name] = undefined;
|
||||||
});
|
// });
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -91,9 +91,9 @@ watch(
|
|||||||
() => props.filterConfig,
|
() => props.filterConfig,
|
||||||
(newVal) => {
|
(newVal) => {
|
||||||
|
|
||||||
newVal.forEach((item) => {
|
// newVal.forEach((item) => {
|
||||||
filterData.value[item.name] = undefined;
|
// filterData.value[item.name] = undefined;
|
||||||
});
|
// });
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -22,5 +22,5 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { container } = useChart(Column, props.config);
|
const { container } = useChart(Column, props);
|
||||||
</script>
|
</script>
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { watch } from "vue";
|
||||||
import { Line } from "@antv/g2plot";
|
import { Line } from "@antv/g2plot";
|
||||||
// hooks
|
// hooks
|
||||||
import useChart from "./useChart";
|
import useChart from "./useChart";
|
||||||
@ -21,6 +22,8 @@ const props = defineProps({
|
|||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
watch(() => props.config, (newVal) => {
|
||||||
const { container } = useChart(Line, props.config);
|
console.log('newVal', newVal)
|
||||||
|
})
|
||||||
|
const { container } = useChart(Line, props);
|
||||||
</script>
|
</script>
|
||||||
|
@ -22,5 +22,5 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { container } = useChart(Pie, props.config);
|
const { container } = useChart(Pie, props);
|
||||||
</script>
|
</script>
|
||||||
|
@ -1,20 +1,20 @@
|
|||||||
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
|
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
|
||||||
export default function useChart(ChartClass, config) {
|
export default function useChart(ChartClass, props) {
|
||||||
const chart = ref(null); // 表格实例
|
const chart = ref(null); // 表格实例
|
||||||
const chartOptions = ref(null); // 图表配置
|
const chartOptions = ref(null); // 图表配置
|
||||||
const container = ref(null); // 渲染图表元素
|
const container = ref(null); // 渲染图表元素
|
||||||
const { onReady, onEvent } = config;
|
const { onReady, onEvent } = props.config;
|
||||||
|
|
||||||
// 全局事件侦听器
|
// 全局事件侦听器
|
||||||
let handler;
|
let handler;
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
chartOptions.value = _.cloneDeep(config);
|
chartOptions.value = _.cloneDeep(props.config);
|
||||||
|
|
||||||
// 实例化图表
|
// 实例化图表
|
||||||
const chartInstance = new ChartClass(container.value, { ...config });
|
const chartInstance = new ChartClass(container.value, { ...props.config });
|
||||||
chartInstance.toDataURL = (type, encoderOptions) => {
|
chartInstance.toDataURL = (type, encoderOptions) => {
|
||||||
return toDataURL(type, encoderOptions);
|
return toDataURL(type, encoderOptions);
|
||||||
};
|
};
|
||||||
@ -46,7 +46,7 @@ export default function useChart(ChartClass, config) {
|
|||||||
|
|
||||||
// 配置更改时更新图表
|
// 配置更改时更新图表
|
||||||
watch(
|
watch(
|
||||||
() => config,
|
() => props.config,
|
||||||
(config) => {
|
(config) => {
|
||||||
const newConfig = _.cloneDeep(config);
|
const newConfig = _.cloneDeep(config);
|
||||||
chartOptions.value = newConfig;
|
chartOptions.value = newConfig;
|
||||||
|
@ -40,6 +40,18 @@
|
|||||||
{{ record[column.dataIndex] }}
|
{{ record[column.dataIndex] }}
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-if="column.dataIndex === 'field_numerical_name'">
|
||||||
|
<a-select
|
||||||
|
v-if="editableData[record.field_id]"
|
||||||
|
v-model:value="record.field_numerical_type_id"
|
||||||
|
:options="fieldNumTypeSel"
|
||||||
|
placeholder="请选择"
|
||||||
|
style="width: 160px">
|
||||||
|
</a-select>
|
||||||
|
<template v-else>
|
||||||
|
{{ record.field_numerical_name }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
<template v-if="column.dataIndex === 'field_type_name'">
|
<template v-if="column.dataIndex === 'field_type_name'">
|
||||||
<a-select
|
<a-select
|
||||||
v-if="editableData[record.field_id]"
|
v-if="editableData[record.field_id]"
|
||||||
@ -67,14 +79,14 @@
|
|||||||
<template v-if="column.dataIndex === 'action'">
|
<template v-if="column.dataIndex === 'action'">
|
||||||
<a-space v-if="editableData[record.field_id]">
|
<a-space v-if="editableData[record.field_id]">
|
||||||
<a-button type="primary" size="small" @click="handleSave(record)"
|
<a-button type="primary" size="small" @click="handleSave(record)"
|
||||||
>保存</a-button
|
>保存</a-button
|
||||||
>
|
>
|
||||||
<a-button size="small" @click="handleCancel(record)"
|
<a-button size="small" @click="handleCancel(record)"
|
||||||
>取消</a-button
|
>取消</a-button
|
||||||
>
|
>
|
||||||
</a-space>
|
</a-space>
|
||||||
<a-button v-else type="link" @click="handleEdit(record)"
|
<a-button v-else type="link" @click="handleEdit(record)"
|
||||||
>修改</a-button
|
>修改</a-button
|
||||||
>
|
>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@ -96,6 +108,7 @@ import { onMounted, reactive, ref, watch } from "vue";
|
|||||||
import { viewCfgCols } from "@/views/config-manage/module-cfg/config";
|
import { viewCfgCols } from "@/views/config-manage/module-cfg/config";
|
||||||
import {
|
import {
|
||||||
getFieldTypeSelect,
|
getFieldTypeSelect,
|
||||||
|
getFieldNumSelect,
|
||||||
getFieldList,
|
getFieldList,
|
||||||
// deleteField,
|
// deleteField,
|
||||||
saveField,
|
saveField,
|
||||||
@ -117,6 +130,7 @@ const listLoading = ref(false);
|
|||||||
const fieldName = ref("");
|
const fieldName = ref("");
|
||||||
const dataList = ref([]);
|
const dataList = ref([]);
|
||||||
const fieldTypeSel = ref([]);
|
const fieldTypeSel = ref([]);
|
||||||
|
const fieldNumTypeSel = ref([]);
|
||||||
const pageState = reactive({
|
const pageState = reactive({
|
||||||
page: 1,
|
page: 1,
|
||||||
perPage: 20,
|
perPage: 20,
|
||||||
@ -135,15 +149,23 @@ watch(
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
toGetFieldTypes();
|
toGetFieldTypes();
|
||||||
|
toGetFieldNumSelect();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 字段类型下拉
|
// 字段搜索类型下拉
|
||||||
const toGetFieldTypes = () => {
|
const toGetFieldTypes = () => {
|
||||||
getFieldTypeSelect().then((res) => {
|
getFieldTypeSelect().then((res) => {
|
||||||
fieldTypeSel.value = res.data;
|
fieldTypeSel.value = res.data;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 字段类型下拉
|
||||||
|
const toGetFieldNumSelect = () => {
|
||||||
|
getFieldNumSelect().then((res) => {
|
||||||
|
fieldNumTypeSel.value = res.data;
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
// 字段列表
|
// 字段列表
|
||||||
const toGetList = () => {
|
const toGetList = () => {
|
||||||
listLoading.value = true;
|
listLoading.value = true;
|
||||||
@ -172,6 +194,7 @@ const addField = () => {
|
|||||||
field_id: new Date().getTime() + "",
|
field_id: new Date().getTime() + "",
|
||||||
field_title: undefined,
|
field_title: undefined,
|
||||||
field_name: undefined,
|
field_name: undefined,
|
||||||
|
field_numerical_type_id: undefined,
|
||||||
is_search: 0,
|
is_search: 0,
|
||||||
field_type_id: undefined,
|
field_type_id: undefined,
|
||||||
belong_to_table: undefined,
|
belong_to_table: undefined,
|
||||||
@ -203,6 +226,7 @@ const handleSave = (record) => {
|
|||||||
field_id: record.field_id,
|
field_id: record.field_id,
|
||||||
field_title: record.field_title,
|
field_title: record.field_title,
|
||||||
field_name: record.field_name,
|
field_name: record.field_name,
|
||||||
|
field_numerical_type_id: record.field_numerical_type_id,
|
||||||
is_search: record.is_search,
|
is_search: record.is_search,
|
||||||
field_type_id: record.field_type_id,
|
field_type_id: record.field_type_id,
|
||||||
belong_to_table: record.belong_to_table,
|
belong_to_table: record.belong_to_table,
|
||||||
|
@ -11,7 +11,8 @@ export const moduleCfgCols = [
|
|||||||
export const viewCfgCols = [
|
export const viewCfgCols = [
|
||||||
{ dataIndex: 'field_name', title: '字段名称', align: 'center'},
|
{ dataIndex: 'field_name', title: '字段名称', align: 'center'},
|
||||||
{ dataIndex: 'field_title', title: '字段标题', align: 'center'},
|
{ dataIndex: 'field_title', title: '字段标题', align: 'center'},
|
||||||
{ dataIndex: 'field_type_name', title: '字段类型', align: 'center'},
|
{ dataIndex: 'field_numerical_name', title: '字段类型', align: 'center'},
|
||||||
|
{ dataIndex: 'field_type_name', title: '搜索类型', align: 'center'},
|
||||||
{ dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
|
{ dataIndex: 'is_search', title: '是否可搜索', align: 'center'},
|
||||||
{ dataIndex: 'sort', title: '排序', align: 'center'},
|
{ dataIndex: 'sort', title: '排序', align: 'center'},
|
||||||
{ dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'},
|
{ dataIndex: 'belong_to_table', title: '所属表名称', align: 'center'},
|
||||||
|
@ -64,13 +64,20 @@ export function getDbTableSelect({ projectId }) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 字段类型下拉
|
// 字段搜索类型下拉
|
||||||
export function getFieldTypeSelect() {
|
export function getFieldTypeSelect() {
|
||||||
return get({
|
return get({
|
||||||
url: `/api/v1/field/get-field-type-drop`,
|
url: `/api/v1/field/get-field-type-drop`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 字段类型下拉
|
||||||
|
export function getFieldNumSelect() {
|
||||||
|
return get({
|
||||||
|
url: `/api/v1/field/get-field-numerical-type-drop`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 获取字段列表
|
// 获取字段列表
|
||||||
export function getFieldList({ modularId, fieldName, page, perPage }) {
|
export function getFieldList({ modularId, fieldName, page, perPage }) {
|
||||||
return get({
|
return get({
|
||||||
|
@ -111,6 +111,11 @@ const selectedRowId = ref();
|
|||||||
const selectViewInfo = ref({
|
const selectViewInfo = ref({
|
||||||
type: "",
|
type: "",
|
||||||
filter: [],
|
filter: [],
|
||||||
|
config: {
|
||||||
|
line: {
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const pageState = reactive({
|
const pageState = reactive({
|
||||||
@ -146,6 +151,9 @@ const toGetViewInfo = (params = {}) => {
|
|||||||
...params,
|
...params,
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
selectViewInfo.value = res.data;
|
selectViewInfo.value = res.data;
|
||||||
|
delete selectViewInfo.value.config.line.isGroup
|
||||||
|
delete selectViewInfo.value.config.line.label
|
||||||
|
selectViewInfo.value.config.line.data = res.data.config.line.data
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user