@ebiz/designer-components 0.1.134 → 0.1.136

package/src/components/EbizStatisticChart.vue

@@ -0,0 +1,213 @@
+<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>

package/src/components/EbizStatsCard.vue

@@ -1,114 +1,114 @@
-<template>
-    <div class="ebiz-stats-card" :style="cardStyle">
-        <div class="card-title">{{ title }}</div>
-        <div class="card-value">{{ value }}</div>
-    </div>
-</template>
-
-<script setup>
-import { defineProps, computed } from 'vue';
-
-/**
- * EbizStatsCard 组件 - 统计数据卡片组件
- * 支持自定义背景色、标题文本和数值
- */
-const props = defineProps({
-    /**
-     * 卡片标题
-     */
-    title: {
-        type: String,
-        default: '标题'
-    },
-    /**
-     * 卡片数值
-     */
-    value: {
-        type: [String, Number],
-        default: '0'
-    },
-    /**
-     * 卡片背景色
-     */
-    backgroundColor: {
-        type: String,
-        default: '#f5f5f5'
-    },
-    /**
-     * 卡片边框颜色
-     */
-    borderColor: {
-        type: String,
-        default: '#d9d9d9'
-    },
-    /**
-     * 卡片宽度
-     */
-    width: {
-        type: String,
-        default: '240px'
-    },
-    /**
-     * 卡片高度
-     */
-    height: {
-        type: String,
-        default: '80px'
-    },
-    /**
-     * 卡片边框圆角
-     */
-    borderRadius: {
-        type: String,
-        default: '8px'
-    },
-    /**
-     * 标题颜色
-     */
-    titleColor: {
-        type: String,
-        default: '#333'
-    },
-    /**
-     * 数值颜色
-     */
-    valueColor: {
-        type: String,
-        default: '#000'
-    }
-});
-
-// 计算卡片样式
-const cardStyle = computed(() => {
-    return {
-        backgroundColor: props.backgroundColor,
-        border: `1px solid ${props.borderColor}`,
-        width: props.width,
-        height: props.height,
-        borderRadius: props.borderRadius
-    };
-});
-</script>
-
-<style scoped>
-.ebiz-stats-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px;
-    box-sizing: border-box;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.card-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: v-bind('props.titleColor');
-}
-
-.card-value {
-    font-size: 24px;
-    font-weight: bold;
-    color: v-bind('props.valueColor');
-}
+<template>
+    <div class="ebiz-stats-card" :style="cardStyle">
+        <div class="card-title">{{ title }}</div>
+        <div class="card-value">{{ value }}</div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+/**
+ * EbizStatsCard 组件 - 统计数据卡片组件
+ * 支持自定义背景色、标题文本和数值
+ */
+const props = defineProps({
+    /**
+     * 卡片标题
+     */
+    title: {
+        type: String,
+        default: '标题'
+    },
+    /**
+     * 卡片数值
+     */
+    value: {
+        type: [String, Number],
+        default: '0'
+    },
+    /**
+     * 卡片背景色
+     */
+    backgroundColor: {
+        type: String,
+        default: '#f5f5f5'
+    },
+    /**
+     * 卡片边框颜色
+     */
+    borderColor: {
+        type: String,
+        default: '#d9d9d9'
+    },
+    /**
+     * 卡片宽度
+     */
+    width: {
+        type: String,
+        default: '240px'
+    },
+    /**
+     * 卡片高度
+     */
+    height: {
+        type: String,
+        default: '80px'
+    },
+    /**
+     * 卡片边框圆角
+     */
+    borderRadius: {
+        type: String,
+        default: '8px'
+    },
+    /**
+     * 标题颜色
+     */
+    titleColor: {
+        type: String,
+        default: '#333'
+    },
+    /**
+     * 数值颜色
+     */
+    valueColor: {
+        type: String,
+        default: '#000'
+    }
+});
+
+// 计算卡片样式
+const cardStyle = computed(() => {
+    return {
+        backgroundColor: props.backgroundColor,
+        border: `1px solid ${props.borderColor}`,
+        width: props.width,
+        height: props.height,
+        borderRadius: props.borderRadius
+    };
+});
+</script>
+
+<style scoped>
+.ebiz-stats-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: v-bind('props.titleColor');
+}
+
+.card-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: v-bind('props.valueColor');
+}
 </style> 

package/src/components/EbizSwiper.vue

@@ -1,114 +1,114 @@
-<template>
-  <div>
-    <swiper v-model="innerCurrent" :animation="animation" :autoplay="autoplay" :direction="direction"
-      :duration="duration" :height="height" :interval="interval" :loop="loop" :navigation="navigationConfig"
-      :stop-on-hover="stopOnHover" :theme="theme" @change="handleChange">
-      <slot></slot>
-      <template v-if="$slots.navigation" #navigation>
-        <slot name="navigation"></slot>
-      </template>
-    </swiper>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { Swiper } from 'tdesign-vue-next';
-
-const props = defineProps({
-  // 轮播切换动画效果类型
-  animation: {
-    type: String,
-    default: 'slide',
-    validator: (val) => ['slide', 'fade'].includes(val)
-  },
-  // 是否自动播放
-  autoplay: {
-    type: Boolean,
-    default: true
-  },
-  // 当前轮播在哪一项（下标）
-  current: {
-    type: Number,
-    default: 0
-  },
-  // 默认当前轮播在哪一项（下标）
-  defaultCurrent: {
-    type: Number,
-    default: 0
-  },
-  // 轮播滑动方向
-  direction: {
-    type: String,
-    default: 'horizontal',
-    validator: (val) => ['horizontal', 'vertical'].includes(val)
-  },
-  // 滑动动画时长
-  duration: {
-    type: Number,
-    default: 300
-  },
-  // 当使用垂直方向滚动时的高度
-  height: {
-    type: Number,
-    default: undefined
-  },
-  // 轮播间隔时间
-  interval: {
-    type: Number,
-    default: 5000
-  },
-  // 是否循环播放
-  loop: {
-    type: Boolean,
-    default: true
-  },
-  // 导航器配置
-  navigation: {
-    type: Object,
-    default: () => ({})
-  },
-  // 是否悬浮时停止轮播
-  stopOnHover: {
-    type: Boolean,
-    default: true
-  },
-  // 深色模式和浅色模式
-  theme: {
-    type: String,
-    default: 'light',
-    validator: (val) => ['light', 'dark'].includes(val)
-  }
-});
-
-const emit = defineEmits(['update:current', 'change']);
-
-// 内部current值，支持双向绑定
-const innerCurrent = ref(props.current || props.defaultCurrent);
-
-// 监听props.current的变化
-watch(() => props.current, (newVal) => {
-  if (newVal !== undefined && newVal !== innerCurrent.value) {
-    innerCurrent.value = newVal;
-  }
-});
-
-// 计算导航器配置
-const navigationConfig = computed(() => {
-  if (!props.navigation) return undefined;
-  return props.navigation;
-});
-
-// 变更事件处理
-const handleChange = (index) => {
-  innerCurrent.value = index;
-  emit('update:current', index);
-  emit('change', index);
-};
-</script>
-
-<style scoped>
-.ebiz-swiper-wrapper {
-  width: 100%;
-}
+<template>
+  <div>
+    <swiper v-model="innerCurrent" :animation="animation" :autoplay="autoplay" :direction="direction"
+      :duration="duration" :height="height" :interval="interval" :loop="loop" :navigation="navigationConfig"
+      :stop-on-hover="stopOnHover" :theme="theme" @change="handleChange">
+      <slot></slot>
+      <template v-if="$slots.navigation" #navigation>
+        <slot name="navigation"></slot>
+      </template>
+    </swiper>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { Swiper } from 'tdesign-vue-next';
+
+const props = defineProps({
+  // 轮播切换动画效果类型
+  animation: {
+    type: String,
+    default: 'slide',
+    validator: (val) => ['slide', 'fade'].includes(val)
+  },
+  // 是否自动播放
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  // 当前轮播在哪一项（下标）
+  current: {
+    type: Number,
+    default: 0
+  },
+  // 默认当前轮播在哪一项（下标）
+  defaultCurrent: {
+    type: Number,
+    default: 0
+  },
+  // 轮播滑动方向
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (val) => ['horizontal', 'vertical'].includes(val)
+  },
+  // 滑动动画时长
+  duration: {
+    type: Number,
+    default: 300
+  },
+  // 当使用垂直方向滚动时的高度
+  height: {
+    type: Number,
+    default: undefined
+  },
+  // 轮播间隔时间
+  interval: {
+    type: Number,
+    default: 5000
+  },
+  // 是否循环播放
+  loop: {
+    type: Boolean,
+    default: true
+  },
+  // 导航器配置
+  navigation: {
+    type: Object,
+    default: () => ({})
+  },
+  // 是否悬浮时停止轮播
+  stopOnHover: {
+    type: Boolean,
+    default: true
+  },
+  // 深色模式和浅色模式
+  theme: {
+    type: String,
+    default: 'light',
+    validator: (val) => ['light', 'dark'].includes(val)
+  }
+});
+
+const emit = defineEmits(['update:current', 'change']);
+
+// 内部current值，支持双向绑定
+const innerCurrent = ref(props.current || props.defaultCurrent);
+
+// 监听props.current的变化
+watch(() => props.current, (newVal) => {
+  if (newVal !== undefined && newVal !== innerCurrent.value) {
+    innerCurrent.value = newVal;
+  }
+});
+
+// 计算导航器配置
+const navigationConfig = computed(() => {
+  if (!props.navigation) return undefined;
+  return props.navigation;
+});
+
+// 变更事件处理
+const handleChange = (index) => {
+  innerCurrent.value = index;
+  emit('update:current', index);
+  emit('change', index);
+};
+</script>
+
+<style scoped>
+.ebiz-swiper-wrapper {
+  width: 100%;
+}
 </style> 

package/src/components/EbizSwiperItem.vue

@@ -1,14 +1,14 @@
-<template>
-  <t-swiper-item>
-    <slot></slot>
-  </t-swiper-item>
-</template>
-
-<script setup>
-import { SwiperItem as TSwiperItem } from 'tdesign-vue-next';
-// 没有需要单独处理的props，直接透传slot到t-swiper-item
-</script>
-
-<style scoped>
-/* 自定义样式可以在这里添加 */
+<template>
+  <t-swiper-item>
+    <slot></slot>
+  </t-swiper-item>
+</template>
+
+<script setup>
+import { SwiperItem as TSwiperItem } from 'tdesign-vue-next';
+// 没有需要单独处理的props，直接透传slot到t-swiper-item
+</script>
+
+<style scoped>
+/* 自定义样式可以在这里添加 */
 </style>