add tag
This commit is contained in:
Timi
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<section class="chart-section">
|
||||
<h2>登记事件结构</h2>
|
||||
<div ref="chartElement" class="chart" />
|
||||
<div
|
||||
ref="chartElement"
|
||||
class="chart"
|
||||
:style="chartStyle"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -14,6 +18,8 @@ import type { EventItem } from "@/types/EventItem";
|
||||
import type { StoreEventRecordDailyStatView } from "@/types/Store";
|
||||
import { buildCustomerBaseChartOption, useCustomerChart } from "@/pages/customer/component/useCustomerChart";
|
||||
|
||||
const chartColorList = ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed"];
|
||||
|
||||
const props = defineProps<{
|
||||
customerId: string;
|
||||
dateTextList: string[];
|
||||
@@ -26,13 +32,38 @@ const eventList = ref<EventItem[]>([]);
|
||||
const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
|
||||
let statRequestId = 0;
|
||||
|
||||
// ---------- 图表窗口 ----------
|
||||
|
||||
const chartWidth = ref(window.innerWidth);
|
||||
const selectedEventIdSet = computed(() => new Set(props.selectedEventIdList));
|
||||
const visibleEventList = computed(() => eventList.value.filter(item => item.id && selectedEventIdSet.value.has(item.id)));
|
||||
const shouldRotateAxisLabel = computed(() => visibleEventList.value.length > 4 || visibleEventList.value.some(item => 6 < getEventName(item).length));
|
||||
const legendRowCount = computed(() => countLegendRows(visibleEventList.value.map(getEventName)));
|
||||
const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
|
||||
const legendBottom = computed(() => 20 + legendRowCount.value * 24);
|
||||
const chartStyle = computed(() => ({
|
||||
height: chartHeight.value
|
||||
}));
|
||||
const chartOption = computed<EChartsOption>(() => ({
|
||||
...buildCustomerBaseChartOption(props.dateTextList),
|
||||
grid: {
|
||||
top: Math.max(72, legendBottom.value),
|
||||
left: 12,
|
||||
right: 12,
|
||||
bottom: 12,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
top: 0,
|
||||
type: "scroll",
|
||||
icon: "roundRect",
|
||||
textStyle: {
|
||||
color: "#52607a"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a}：{c} 次"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@@ -49,21 +80,19 @@ const chartOption = computed<EChartsOption>(() => ({
|
||||
width: shouldRotateAxisLabel.value ? 72 : 56
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "登记次数",
|
||||
type: "bar",
|
||||
data: visibleEventList.value.map(item => ({
|
||||
value: countRecordByEvent(item.id || ""),
|
||||
itemStyle: getEventColor(item) ? {
|
||||
color: getEventColor(item)
|
||||
} : undefined
|
||||
}))
|
||||
}
|
||||
]
|
||||
series: visibleEventList.value.map((event, index) => ({
|
||||
name: getEventName(event),
|
||||
type: "bar",
|
||||
stack: "event",
|
||||
itemStyle: {
|
||||
color: getEventLegendColor(event, index)
|
||||
},
|
||||
data: visibleEventList.value.map(item => item.id === event.id ? countRecordByEvent(event.id || "") : undefined)
|
||||
}))
|
||||
}));
|
||||
|
||||
const { chartElement } = useCustomerChart(chartOption);
|
||||
let resizeObserver: ResizeObserver | undefined;
|
||||
|
||||
watch([
|
||||
() => props.customerId,
|
||||
@@ -76,10 +105,20 @@ watch([
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
resizeObserver = new window.ResizeObserver(updateChartWidth);
|
||||
if (chartElement.value) {
|
||||
resizeObserver.observe(chartElement.value);
|
||||
updateChartWidth();
|
||||
}
|
||||
await loadEvents();
|
||||
await loadDailyStat();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver?.disconnect();
|
||||
resizeObserver = undefined;
|
||||
});
|
||||
|
||||
async function loadEvents(): Promise<void> {
|
||||
eventList.value = await EventAPI.listValid();
|
||||
}
|
||||
@@ -110,10 +149,38 @@ function getEventColor(event: EventItem): string | undefined {
|
||||
return event.color || undefined;
|
||||
}
|
||||
|
||||
function getEventLegendColor(event: EventItem, index: number): string {
|
||||
return getEventColor(event) || chartColorList[index % chartColorList.length];
|
||||
}
|
||||
|
||||
function getEventName(event: EventItem): string {
|
||||
return event.name || "未命名事件";
|
||||
}
|
||||
|
||||
function updateChartWidth(): void {
|
||||
const width = chartElement.value?.clientWidth || window.innerWidth;
|
||||
chartWidth.value = Math.max(1, width);
|
||||
}
|
||||
|
||||
function countLegendRows(nameList: string[]): number {
|
||||
let rowCount = 1;
|
||||
let rowWidth = 0;
|
||||
const maxWidth = Math.max(160, chartWidth.value - 24);
|
||||
for (const name of nameList) {
|
||||
const itemWidth = estimateLegendItemWidth(name);
|
||||
if (0 < rowWidth && maxWidth < rowWidth + itemWidth) {
|
||||
rowCount++;
|
||||
rowWidth = 0;
|
||||
}
|
||||
rowWidth += itemWidth;
|
||||
}
|
||||
return rowCount;
|
||||
}
|
||||
|
||||
function estimateLegendItemWidth(name: string): number {
|
||||
return Math.min(chartWidth.value, 38 + Array.from(name).length * 14);
|
||||
}
|
||||
|
||||
function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
|
||||
const map: Record<string, StoreEventRecordDailyStatView[]> = {};
|
||||
for (const item of list) {
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<section class="customer-tag-card bg-white" @click="emitEdit">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<t-icon name="tag" />
|
||||
<span>客户标签</span>
|
||||
</div>
|
||||
<t-icon v-if="editable" name="chevron-right" />
|
||||
</div>
|
||||
<div v-if="tagList.length" class="scroll">
|
||||
<div class="rows">
|
||||
<div v-for="(row, index) in tagRowList" :key="index" class="row">
|
||||
<t-tag
|
||||
v-for="item in row"
|
||||
:key="item.id"
|
||||
size="large"
|
||||
theme="primary"
|
||||
variant="light-outline"
|
||||
:content="getTagName(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="empty gray">未设置</span>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Tag } from "@/types/Tag";
|
||||
|
||||
interface Props {
|
||||
editable: boolean;
|
||||
tagList: Tag[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
edit: [];
|
||||
}>();
|
||||
|
||||
const maxRowCount = 5;
|
||||
const tagRowList = computed(() => {
|
||||
const rowCount = Math.min(maxRowCount, props.tagList.length);
|
||||
const rowList = Array.from({ length: rowCount }, () => [] as Tag[]);
|
||||
props.tagList.forEach((item, index) => {
|
||||
rowList[index % rowCount].push(item);
|
||||
});
|
||||
return rowList;
|
||||
});
|
||||
|
||||
function getTagName(tag: Tag): string {
|
||||
return tag.name || tag.zhCN || "未命名标签";
|
||||
}
|
||||
|
||||
function emitEdit(): void {
|
||||
if (props.editable) {
|
||||
emit("edit");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.customer-tag-card {
|
||||
gap: .75rem;
|
||||
margin: 0 1rem;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
border-radius: .75rem;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
|
||||
.rows {
|
||||
gap: .5rem;
|
||||
width: max-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.t-tag) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user