@ebiz/designer-components 0.1.138 → 0.2.0

package/src/components/EbizStatisticChart.vue

@@ -1,213 +1,298 @@
-<template>
-	<div>
-		<t-row :gutter="[16, 16]">
-			<t-col
-				:xs="24"
-				:sm="12"
-				:xl="6"
-				v-for="item in configList"
-				:key="item.id"
-			>
-				<div class="chart-item">
-					<h3>{{ item.title }}</h3>
-					<div :id="item.id" class="chart-container"></div>
-				</div>
-			</t-col>
-		</t-row>
-	</div>
-</template>
-
-<script setup>
-	import { onMounted, onUnmounted, ref } from 'vue';
-	import { Row as TRow, Col as TCol } from 'tdesign-vue-next';
-	import HuiCharts from '@opentiny/huicharts';
-	import dataService from '../apiService/simpleDataService';
-
-	const props = defineProps({
-		/**
-		 * 配置项
-		 * @param {string} title - 图表标题
-		 * @param {string} id - 图表id
-		 * @param {object} query - 查询参数
-		 * @param {string}   query[key].tableName - 表名
-		 * @param {string[]} query[key].fieldNames - 查询字段
-		 * @param {string[]} query[key].grouping - 分组字段
-		 * @param {string[]} query[key].ordering - 条件字段
-		 * @param {string[]} query[key].asc - 升序字段
-		 * @param {string[]} query[key].desc - 降序字段
-		 * @param {object} fieldMap - 字段映射
-		 * @param {string} chartType - 图表类型：LineChart、BarChart
-		 * @param {object} chartOptions - 图表配置项
-		 */
-		configList: {
-			type: Array,
-			default: () => [
-				{
-					title: '员工入职统计', // 图表标题
-					id: 'employeeEnteringChart', // 图表id
-					query: {
-						res1: {
-							tableName: 'employment_information',
-							fieldNames: ['count(1)', "to_char(real_time,'FMMM') as month"],
-							grouping: ["to_char(real_time,'FMMM')"],
-							ordering: ["to_char(real_time, 'YYYY') = to_char(CURRENT_DATE,'YYYY')"],
-							asc:["to_char(real_time,'FMMM')::int"]
-						}
-					},
-					fieldMap: { // 字段映射
-						count: '入职人数'
-					},
-					chartType: 'LineChart', // 图表类型：LineChart、BarChart
-					chartOptions: { // 图表配置项
-						smooth: true,
-						xAxis: {
-							data: 'month',
-							name: '月份'
-						},
-						yAxis: {
-							name: '人数'
-						}
-					}
-				}
-			]
-		}
-	});
-
-	// 图表默认配置
-	const defaultOptions = {
-		LineChart: {
-			theme: 'hdesign-light',
-			padding: [50, 70, 50, 20],
-			legend: {
-				show: true,
-				icon: 'line'
-			},
-			data: []
-		},
-		BarChart: {
-			theme: 'hdesign-light',
-			padding: [50, 50, 50, 20],
-			data: []
-		}
-	};
-
-	// 存储图表实例
-	const chartInsMap = ref({});
-
-	const fetchData = async (query, fieldMap = {}, xAxisDataKey = '') => {
-		try {
-			const res = await dataService.fetch(
-				query,
-				{},
-				'/graph-statistics/'
-			);
-			const resData = []
-			for (const k in res) {
-				const data = res[k]
-				for (const item of data) {
-					const month = item[xAxisDataKey]
-					const existingItem = resData.find(d => d[xAxisDataKey] === month)
-					if (existingItem) {
-						Object.assign(existingItem, item)
-					} else {
-						resData.push(item)
-					}
-				}
-			}
-			if (resData && resData.length > 0 && Object.keys(fieldMap).length > 0) {
-				resData.forEach(item => {
-					for (const key in item) {
-						if (fieldMap[key]) {
-							item[fieldMap[key]] = item[key];
-							delete item[key];
-						}
-					}
-				});
-			}
-			return resData || [];
-		} catch (error) {
-			console.error('数据获取失败:', error);
-			return [];
-		}
-	};
-
-	// 刷新图表数据
-	const refreshData = id => {
-		if (id) {
-			// 刷新指定图表数据
-			chartInsMap.value[id].showLoading({ theme: 'hdesign-light' });
-			const config = props.configList.find(item => item.id === id);
-			fetchData(config.query, config.fieldMap, config.chartOptions.xAxis?.data).then(newData => {
-				// 刷新图表数据
-				chartInsMap.value[id].refreshData(newData);
-				chartInsMap.value[id].closeLoading();
-			});
-			return;
-		}
-		props.configList.forEach(item => {
-			chartInsMap.value[item.id].showLoading({ theme: 'hdesign-light' });
-			fetchData(item.query, item.fieldMap, item.chartOptions.xAxis?.data).then(newData => {
-				// 更新图表数据
-				chartInsMap.value[item.id].refreshData(newData);
-				chartInsMap.value[item.id].closeLoading();
-			});
-		});
-	};
-
-	const initReportCharts = () => {
-		for (const k in props.configList) {
-			const item = props.configList[k];
-			if (!item.id || !item.chartType || !item.chartOptions) {
-				console.warn(`图表配置错误: ${JSON.stringify(item)}`);
-				continue;
-			}
-			// 创建图表实例
-			const chartIns = new HuiCharts();
-			// 初始化图表容器
-			chartIns.init(document.getElementById(item.id));
-			chartIns.showLoading({ theme: 'hdesign-light' });
-			fetchData(item.query, item.fieldMap, item.chartOptions.xAxis?.data).then(newData => {
-				item.chartOptions.data = newData;
-				chartIns.setSimpleOption(item.chartType, {
-					...defaultOptions[item.chartType],
-					...item.chartOptions
-				});
-				chartInsMap.value[item.id].closeLoading();
-				chartIns.render();
-			});
-			chartInsMap.value[item.id] = chartIns;
-		}
-	};
-
-	onMounted(() => {
-		initReportCharts();
-	});
-
-	onUnmounted(() => {
-		Object.keys(chartInsMap.value).forEach(key => {
-			// 卸载图表实例
-			chartInsMap.value[key].uninstall();
-		});
-	});
-
-	defineExpose({
-		refreshData
-	});
-</script>
-
-<style lang="less" scoped>
-	.panel-container {
-		border-radius: 8px;
-	}
-	.chart-item {
-		margin-bottom: 16px;
-		h3 {
-			margin-bottom: 8px;
-			font-size: 16px;
-		}
-		.chart-container {
-			width: 100%;
-			height: 400px;
-		}
-	}
-</style>
+<template>
+	<div class="panel-container">
+		<t-row :gutter="[16, 0]">
+			<t-col
+				:xs="24"
+				:sm="12"
+				:xl="6"
+				v-for="(item, index) in configList"
+				:key="item.id"
+				class="col-item"
+				:class="{
+					'second-last-item': (index + 1 === configList.length - 1 && configList.length % 2 === 0)
+				}"
+			>
+				<div class="chart-item">
+					<h3>{{ item.title }}</h3>
+					<div class="chart-form" v-if="item.form?.length > 0">
+						<template v-for="(elem, idx) in item.form" :key="idx">
+							<ebiz-remote-select v-if="elem.type === 'select'" v-model="formData[elem.key]" :queryParams="elem.queryParams || {}" 
+								placeholder="请选择" :filterable="true" :apiConfig="elem.remoteApiConfig" @change="refreshData(item.id)" />
+							<t-date-picker v-if="elem.type === 'date'" v-model="formData[elem.key]" placeholder="请选择日期" format="YYYY-MM-DD" mode="date" @change="refreshData(item.id)" />
+							<t-date-picker v-if="elem.type === 'month'" v-model="formData[elem.key]" placeholder="请选择月份" format="YYYY-MM" mode="month" @change="refreshData(item.id)" />
+							<t-date-picker v-if="elem.type === 'year'" v-model="formData[elem.key]" placeholder="请选择年份" format="YYYY" mode="year" @change="refreshData(item.id)" />
+						</template>
+					</div>
+					<div :id="item.id" class="chart-container"></div>
+				</div>
+			</t-col>
+		</t-row>
+	</div>
+</template>
+
+<script setup>
+	import { computed, onMounted, onUnmounted, ref } from 'vue';
+	import { Row as TRow, Col as TCol, DatePicker as TDatePicker } from 'tdesign-vue-next';
+	import HuiCharts from '@opentiny/huicharts';
+	import dataService from '../apiService/simpleDataService';
+	import EbizRemoteSelect from './EbizRemoteSelect.vue';
+
+	const props = defineProps({
+		/**
+		 * 配置项
+		 * @param {string} title - 图表标题
+		 * @param {string} id - 图表id
+		 * @param {object} query - 查询参数
+		 * @param {string}   query.tableName - 表名
+		 * @param {string[]} query.fieldNames - 查询字段
+		 * @param {string[]} query.grouping - 分组字段
+		 * @param {string[]} query.ordering - 排序字段
+		 * @param {object} fieldMap - 字段映射
+		 * @param {string} chartType - 图表类型：LineChart、BarChart
+		 * @param {object} chartOptions - 图表配置项
+		 */
+		configList: {
+			type: Array,
+			default: () => [
+				{
+					title: '员工入职统计', // 图表标题
+					id: 'employeeEnteringChart', // 图表id
+					form: [
+						{
+							key: "CURRENT_DATE",
+							type:"year", // select, year, month, date
+							defaultValue: "2025"
+						}
+					], // 筛选条件
+					query: {
+						res1: {
+							tableName: 'employment_information',
+							fieldNames: ['count(1)', "to_char(real_time,'FMMM') as month"],
+							grouping: ["to_char(real_time,'FMMM')"],
+							ordering: ["to_char(real_time, 'YYYY') = to_char(CURRENT_DATE,'YYYY')"],
+							asc:["to_char(real_time,'FMMM')::int"]
+						}
+					},
+					fieldMap: { // 字段映射
+						count: '入职人数'
+					},
+					chartType: 'LineChart', // 图表类型：LineChart、BarChart
+					chartOptions: { // 图表配置项
+						smooth: true,
+						xAxis: {
+							data: 'month',
+							name: '月份'
+						},
+						yAxis: {
+							name: '人数'
+						}
+					}
+				}
+			]
+		}
+	});
+
+	// 图表默认配置
+	const defaultOptions = {
+		LineChart: {
+			theme: 'hdesign-light',
+			padding: [50, 70, 50, 20],
+			legend: {
+				show: true,
+				icon: 'line'
+			},
+			data: []
+		},
+		BarChart: {
+			theme: 'hdesign-light',
+			padding: [50, 50, 50, 20],
+			data: []
+		}
+	};
+
+	// 存储图表实例
+	const chartInsMap = ref({});
+	// 表单数据
+	const formData = ref({});
+
+	const fetchData = async (query, form = [], fieldMap = {}, xAxisDataKey = '') => {
+		try {
+			const computedQuery = JSON.parse(JSON.stringify(query));
+			if (form.length > 0) {
+				form.forEach((item) => {
+					if (formData.value[item.key] || item.defaultValue) {
+						const val = formData.value[item.key] || item.defaultValue;
+						for (const k in computedQuery) {
+							if (computedQuery[k].ordering && Array.isArray(computedQuery[k].ordering)) {
+								computedQuery[k].ordering = computedQuery[k].ordering.map(v => v.replaceAll(item.key, val));
+							}
+						}
+					}
+				});
+			}
+			const res = await dataService.fetch(
+				computedQuery,
+				{},
+				'/graph-statistics/'
+			);
+			const resData = []
+			for (const k in res) {
+				const data = res[k]
+				for (const item of data) {
+					const month = item[xAxisDataKey]
+					const existingItem = resData.find(d => d[xAxisDataKey] === month)
+					if (existingItem) {
+						Object.assign(existingItem, item)
+					} else {
+						resData.push(item)
+					}
+				}
+			}
+			if (resData && resData.length > 0 && Object.keys(fieldMap).length > 0) {
+				resData.forEach(item => {
+					for (const key in item) {
+						if (fieldMap[key]) {
+							item[fieldMap[key]] = item[key];
+							delete item[key];
+						}
+					}
+				});
+			}
+			return resData || [];
+		} catch (error) {
+			console.error('数据获取失败:', error);
+			return [];
+		}
+	};
+
+	// 刷新图表数据
+	const refreshData = id => {
+		if (id) {
+			// 刷新指定图表数据
+			// 重新初始化图表
+			chartInsMap.value[id].uninstall();
+			const chartIns = new HuiCharts();
+			const config = props.configList.find(item => item.id === id);
+			chartIns.init(document.getElementById(config.id));
+			chartIns.showLoading({ theme: 'hdesign-light' });
+			console.log('config', config.query);
+			fetchData(config.query, config.form, config.fieldMap, config.chartOptions.xAxis['keyName' || 'data']).then(newData => {
+				config.chartOptions.data = newData;
+				chartIns.setSimpleOption(config.chartType, {
+					...defaultOptions[config.chartType],
+					...config.chartOptions
+				});
+				chartInsMap.value[config.id].closeLoading();
+				chartIns.render();
+			});
+			chartInsMap.value[config.id] = chartIns;
+			return;
+		}
+		props.configList.forEach(item => {
+			const chartIns = new HuiCharts();
+			// 初始化图表容器
+			chartIns.init(document.getElementById(item.id));
+			chartIns.showLoading({ theme: 'hdesign-light' });
+			fetchData(item.query, item.form, item.fieldMap, item.chartOptions.xAxis['keyName' || 'data']).then(newData => {
+				item.chartOptions.data = newData;
+				chartIns.setSimpleOption(item.chartType, {
+					...defaultOptions[item.chartType],
+					...item.chartOptions
+				});
+				chartInsMap.value[item.id].closeLoading();
+				chartIns.render();
+			});
+			chartInsMap.value[item.id] = chartIns;
+		});
+	};
+
+	const initReportCharts = () => {
+		for (const k in props.configList) {
+			const item = props.configList[k];
+			if (!item.id || !item.chartType || !item.chartOptions) {
+				console.warn(`图表配置错误: ${JSON.stringify(item)}`);
+				continue;
+			}
+			// 初始化表单
+			if (item.form?.length > 0) {
+				item.form.forEach(elem => {
+					if (elem.defaultValue) {
+						formData.value[elem.key] = elem.defaultValue;
+					}
+				});
+			}
+			// 创建图表实例
+			const chartIns = new HuiCharts();
+			// 初始化图表容器
+			chartIns.init(document.getElementById(item.id));
+			chartIns.showLoading({ theme: 'hdesign-light' });
+			fetchData(item.query, item.form, item.fieldMap, item.chartOptions.xAxis?.data).then(newData => {
+				item.chartOptions.data = newData;
+				chartIns.setSimpleOption(item.chartType, {
+					...defaultOptions[item.chartType],
+					...item.chartOptions
+				});
+				chartInsMap.value[item.id].closeLoading();
+				chartIns.render();
+			});
+			chartInsMap.value[item.id] = chartIns;
+		}
+	};
+
+	onMounted(() => {
+		initReportCharts();
+	});
+
+	onUnmounted(() => {
+		Object.keys(chartInsMap.value).forEach(key => {
+			// 卸载图表实例
+			chartInsMap.value[key].uninstall();
+		});
+	});
+
+	defineExpose({
+		refreshData
+	});
+</script>
+
+<style lang="less" scoped>
+	.panel-container {
+		.chart-item {
+			margin-bottom: 16px;
+			h3 {
+				margin-bottom: 8px;
+				font-size: 16px;
+			}
+			.chart-container {
+				width: 100%;
+				height: 400px;
+			}
+		}
+		.chart-form {
+			margin-top: 12px;
+			margin-bottom: 5px;
+		}
+		@media screen and (max-width: 1400px) {
+			.col-item {
+				border-bottom: 1px solid #e8e8e8;
+				&:last-child {
+					border-bottom: none !important;
+				}
+			}
+		}
+		@media screen and (min-width: 1400px) {
+			.col-item {
+				border-bottom: #e8e8e8 1px solid;
+				&:last-child {
+					border-bottom: none !important;
+				}
+				&.second-last-item {
+					border-bottom: none !important;
+				}
+				&:nth-child(2n + 1) {
+					border-right: 1px solid #e8e8e8;
+				}
+			}
+		}
+	}
+</style>