diff --git a/src/views/components/ChargingRanking.vue b/src/views/components/ChargingRanking.vue
index bc19696..f267ad4 100644
--- a/src/views/components/ChargingRanking.vue
+++ b/src/views/components/ChargingRanking.vue
@@ -55,13 +55,16 @@
watch(
() => chargingRankingData.value,
() => {
- if(chargingRankingData.value.paymentRanks){
- products.value = chargingRankingData.value.paymentRanks
-
- }
+ initData()
},
);
+ const initData = () => {
+ if(chargingRankingData.value.paymentRanks){
+ products.value = chargingRankingData.value.paymentRanks
+ }
+ }
+
const headerLeftSvg = ref("");
const headerRightSvg = ref("");
@@ -115,6 +118,8 @@
getGoldMedalSvg();
getSilverMedalSvg();
getBronzeMedalSvg();
+
+ initData();
});
diff --git a/src/views/components/OfflineStatus.vue b/src/views/components/OfflineStatus.vue
index 6603f49..41df4d9 100644
--- a/src/views/components/OfflineStatus.vue
+++ b/src/views/components/OfflineStatus.vue
@@ -77,21 +77,26 @@
watch(
() => askSectionData.value,
() => {
- if (askSectionData.value.offline.length > 0) {
+ initData()
+ },
+ );
+
+ const initData = () => {
+ if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
chartData.value = askSectionData.value.offline.map((item, index) => ({
name: item.tag,
value: item.total,
color: colorList.value[index % colorList.value.length],
}));
}
- },
- );
+ }
onBeforeMount(() => {
getHeaderLeftSvg();
getHeaderRightSvg();
getArrowLeftSvg();
getPaymentChartSvg();
+ initData();
});
diff --git a/src/views/components/OnlineStatus.vue b/src/views/components/OnlineStatus.vue
index baf24a1..0352059 100644
--- a/src/views/components/OnlineStatus.vue
+++ b/src/views/components/OnlineStatus.vue
@@ -76,20 +76,26 @@
const chartData = ref
([]);
watch(() => askSectionData.value, () => {
- if (askSectionData.value.online.length > 0) {
+ initData()
+ });
+
+ const initData = () => {
+ if (askSectionData.value.online && askSectionData.value.online.length > 0) {
chartData.value = askSectionData.value.online.map((item, index) => ({
name: item.tag,
value: item.total,
color: colorList.value[index % colorList.value.length],
}));
}
- });
+ }
onBeforeMount(() => {
getHeaderLeftSvg();
getHeaderRightSvg();
getArrowLeftSvg();
getPaymentChartSvg();
+
+ initData();
});
diff --git a/src/views/components/OperatingTrends.vue b/src/views/components/OperatingTrends.vue
index c5cef7d..1f11490 100644
--- a/src/views/components/OperatingTrends.vue
+++ b/src/views/components/OperatingTrends.vue
@@ -1,5 +1,5 @@
-
+
@@ -34,6 +34,7 @@
};
addRequest("getAcqTrendData", getAcqTrendData, [DateType]);
+ runImmediatelyByKey("getAcqTrendData");
const handleDateChange = (type: string) => {
DateType = type === "week" ? 0 : 1;
diff --git a/src/views/components/StudentSource.vue b/src/views/components/StudentSource.vue
index 6fabbc8..511ac9b 100644
--- a/src/views/components/StudentSource.vue
+++ b/src/views/components/StudentSource.vue
@@ -11,35 +11,29 @@
-
-
-
-
-
-
- {{onlineTotal }}
- 人
-
-
线上来源
-
-
-
-
-
-
- {{ offlineTotal }}
- 人
-
-
线下来源
+
+
+
+
+
+
+ {{ onlineTotal }}
+ 人
+
线上来源
+
+
+
+
+ {{ offlineTotal }}
+ 人
+
+
线下来源
+
+
+
@@ -67,31 +61,43 @@
arrowLeftSvg.value = svg;
};
- const onlineSvg = ref("")
- const offlineSvg = ref("")
+ const onlineSvg = ref("");
+ const offlineSvg = ref("");
const getOfflineSvg = async () => {
- const {default: svg} = await import('/src/assets/svg-img/offline.svg?raw')
- offlineSvg.value = svg
- }
+ const { default: svg } = await import("/src/assets/svg-img/offline.svg?raw");
+ offlineSvg.value = svg;
+ };
const getOnlineSvg = async () => {
- const {default: svg} = await import('/src/assets/svg-img/online.svg?raw')
- onlineSvg.value = svg
+ const { default: svg } = await import("/src/assets/svg-img/online.svg?raw");
+ onlineSvg.value = svg;
+ };
+
+ const askSectionData = inject("askSectionData", ref<{ online: any[]; offline: any[] }>({ online: [], offline: [] }));
+
+
+ const onlineTotal = ref(0);
+ const offlineTotal = ref(0);
+ const chartData = ref
([]);
+ watch(
+ () => askSectionData.value,
+ () => {
+ initData()
+ },
+ );
+
+ const initData = () => {
+ if (askSectionData.value.online && askSectionData.value.online.length > 0) {
+ onlineTotal.value = askSectionData.value.online.reduce((acc, curr) => acc + curr.total, 0);
+ }
+ if (askSectionData.value.offline && askSectionData.value.offline.length > 0) {
+ offlineTotal.value = askSectionData.value.offline.reduce((acc, curr) => acc + curr.total, 0);
+ }
+ chartData.value = [
+ { name: "线下", value: offlineTotal.value, itemStyle: { color: "rgba(147, 219, 255, 1)" } },
+ { name: "线上", value: onlineTotal.value, itemStyle: { color: "rgb(79, 214, 169)" } },
+ ];
}
- const askSectionData = inject("askSectionData",ref<{online:any[],offline:any[]}>({online:[],offline:[]}))
-
- const onlineTotal = ref(0)
- const offlineTotal = ref(0)
- watch(() =>askSectionData.value,() => {
-
- if(askSectionData.value.online.length > 0){
- onlineTotal.value = askSectionData.value.online.reduce((acc, curr) => acc + curr.total, 0)
- }
- if(askSectionData.value.offline.length > 0){
- offlineTotal.value = askSectionData.value.offline.reduce((acc, curr) => acc + curr.total, 0)
- }
- })
-
onBeforeMount(() => {
getHeaderLeftSvg();
getHeaderRightSvg();
@@ -99,6 +105,7 @@
getOfflineSvg();
getOnlineSvg();
+ initData();
});
diff --git a/src/views/components/WinCustomer.vue b/src/views/components/WinCustomer.vue
index f20e416..ebb5f76 100644
--- a/src/views/components/WinCustomer.vue
+++ b/src/views/components/WinCustomer.vue
@@ -57,11 +57,15 @@
watch(
() => chargingRankingData.value,
() => {PageTransitionEvent
- if(chargingRankingData.value.acqRanks){
- products.value = chargingRankingData.value.acqRanks
- }
+ initData()
},
);
+
+ const initData = () => {
+ if(chargingRankingData.value.acqRanks){
+ products.value = chargingRankingData.value.acqRanks
+ }
+ }
const headerLeftSvg = ref("");
const headerRightSvg = ref("");
@@ -116,6 +120,8 @@
getGoldMedalSvg();
getSilverMedalSvg();
getBronzeMedalSvg();
+
+ initData();
});
diff --git a/src/views/components/chartsComponents/AskSectionChart.vue b/src/views/components/chartsComponents/AskSectionChart.vue
index be1c335..489df6e 100644
--- a/src/views/components/chartsComponents/AskSectionChart.vue
+++ b/src/views/components/chartsComponents/AskSectionChart.vue
@@ -317,12 +317,14 @@
updateChartData();
}
},
- { deep: true }
+ { deep: true,immediate:true }
);
- onMounted(() => {
+onMounted(() => {
+ if(!myChart){
initChart();
- });
+ }
+})
onUnmounted(() => {
window.removeEventListener("resize", handleResize);
diff --git a/src/views/components/chartsComponents/SixStatisticsChart.vue b/src/views/components/chartsComponents/SixStatisticsChart.vue
index 737a035..bfdf34d 100644
--- a/src/views/components/chartsComponents/SixStatisticsChart.vue
+++ b/src/views/components/chartsComponents/SixStatisticsChart.vue
@@ -33,8 +33,20 @@ const props = defineProps({
})
watch(() => props.chartData,() => {
- initChart();
-})
+ if (chart) {
+
+ const options = {
+ xAxis: {
+ data: props.chartData.map((item:any) => item.date)
+ },
+ series: [{
+ data: props.chartData.map((item:any) => item.total)
+ }]
+ };
+ chart.setOption(options);
+ }
+
+}, { deep: true })
const initChart = () => {
if(!chartRef.value) return;
@@ -81,7 +93,7 @@ const initChart = () => {
},
series: [
{
- name: '数据1',
+ name: '获客数',
type: 'line',
smooth: true,
data: props.chartData.map((item:any) => item.total),
@@ -114,7 +126,9 @@ const initChart = () => {
}
onMounted(() => {
-
+ if(!chart){
+ initChart();
+ }
window.addEventListener('resize', () => {
chart?.resize();
});
diff --git a/src/views/components/chartsComponents/StudentSourceChart.vue b/src/views/components/chartsComponents/StudentSourceChart.vue
index 794bff7..a55b73f 100644
--- a/src/views/components/chartsComponents/StudentSourceChart.vue
+++ b/src/views/components/chartsComponents/StudentSourceChart.vue
@@ -17,7 +17,7 @@
import { CanvasRenderer } from "echarts/renderers";
import { SurfaceChart } from "echarts-gl/charts";
import { Grid3DComponent } from "echarts-gl/components";
- import { ref, onMounted, watch } from "vue";
+ import { ref, onMounted, watch, onBeforeUnmount } from "vue";
echarts.use([TooltipComponent, Grid3DComponent, SurfaceChart, CanvasRenderer]);
@@ -35,7 +35,7 @@
});
const chartRef = ref(null);
- let chart: echarts.ECharts | null = null;
+ let chartInstance: echarts.ECharts | null = null;
interface SeriesItem {
[key: string]: any;
@@ -206,7 +206,7 @@
height: 106,
},
z: 0,
- cursor:"point",
+ cursor: "point",
origin: [127, 53],
keyframeAnimation: [
{
@@ -241,173 +241,14 @@
// 初始化图表
const initChart = () => {
if (!chartRef.value) return;
-
- chart = echarts.init(chartRef.value);
- const option = getPie3D(props.chartData, props.ringSize);
-
- option.series.push({
- name: "pie2d",
- type: "pie",
- labelLine: {
- length: 18,
- length2: 18,
- smooth: true,
- minTurnAngle: 20,
- },
- label: {
- show: true,
- position: "outside",
- color: "inherit",
- rich: {
- a: {
- width: 5,
- height: 5,
- borderRadius: 50,
- backgroundColor: "inherit",
- },
- b: {
- fontSize: 12,
- },
- c: {
- fontSize: 12,
- },
- },
- formatter: "{a|} {b|{b}}{d|{d}}%",
- },
- startAngle: -30,
- clockwise: false,
- radius: ["30%", "60%"],
- padAngle: 360,
- center: ["50%", "50%"],
- data: props.chartData,
- itemStyle: {
- opacity: 1,
- borderWidth: 0,
- },
- z: 1,
- });
-
- chart.setOption(option);
- bindEvents();
+ chartInstance = echarts.init(chartRef.value);
+ updateChart();
};
- // 绑定事件
- const bindEvents = () => {
- if (!chart) return;
-
- // let selectedIndex = "";
- // let hoveredIndex = "";
-
- // chart.on("click", (params: any) => {
- // if (!chart) return;
-
- // const option = chart.getOption() as any;
- // const isSelected = !option.series[params.seriesIndex].pieStatus.selected;
- // const isHovered = option.series[params.seriesIndex].pieStatus.hovered;
- // const k = option.series[params.seriesIndex].pieStatus.k;
- // const startRatio = option.series[params.seriesIndex].pieData.startRatio;
- // const endRatio = option.series[params.seriesIndex].pieData.endRatio;
-
- // if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
- // option.series[selectedIndex].parametricEquation = getParametricEquation(
- // option.series[selectedIndex].pieData.startRatio,
- // option.series[selectedIndex].pieData.endRatio,
- // false,
- // false,
- // k,
- // option.series[selectedIndex].pieData.value,
- // );
- // option.series[selectedIndex].pieStatus.selected = false;
- // }
-
- // option.series[params.seriesIndex].parametricEquation = getParametricEquation(
- // startRatio,
- // endRatio,
- // isSelected,
- // isHovered,
- // k,
- // option.series[params.seriesIndex].pieData.value,
- // );
- // option.series[params.seriesIndex].pieStatus.selected = isSelected;
-
- // isSelected ? (selectedIndex = params.seriesIndex) : null;
- // chart.setOption(option);
- // });
-
- // 鼠标悬停事件
- // chart.on("mouseover", (params: any) => {
- // if (!chart) return;
-
- // const option = chart.getOption() as any;
- // if (hoveredIndex === params.seriesIndex) return;
-
- // if (hoveredIndex !== "") {
- // const isSelected = option.series[hoveredIndex].pieStatus.selected;
- // const isHovered = false;
- // const k = option.series[hoveredIndex].pieStatus.k;
- // const startRatio = option.series[hoveredIndex].pieData.startRatio;
- // const endRatio = option.series[hoveredIndex].pieData.endRatio;
-
- // option.series[hoveredIndex].parametricEquation = getParametricEquation(
- // startRatio,
- // endRatio,
- // isSelected,
- // isHovered,
- // k,
- // option.series[hoveredIndex].pieData.value,
- // );
- // option.series[hoveredIndex].pieStatus.hovered = isHovered;
- // hoveredIndex = "";
- // }
-
- // if (params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") {
- // const isSelected = option.series[params.seriesIndex].pieStatus.selected;
- // const isHovered = true;
- // const k = option.series[params.seriesIndex].pieStatus.k;
- // const startRatio = option.series[params.seriesIndex].pieData.startRatio;
- // const endRatio = option.series[params.seriesIndex].pieData.endRatio;
-
- // option.series[params.seriesIndex].parametricEquation = getParametricEquation(
- // startRatio,
- // endRatio,
- // isSelected,
- // isHovered,
- // k,
- // option.series[params.seriesIndex].pieData.value + 5,
- // );
- // option.series[params.seriesIndex].pieStatus.hovered = isHovered;
- // hoveredIndex = params.seriesIndex;
- // }
-
- // chart.setOption(option);
- // });
-
- // // 鼠标移出事件
- // chart.on("globalout", () => {
- // if (!chart) return;
-
- // const option = chart.getOption() as any;
- // if (hoveredIndex !== "") {
- // const isSelected = option.series[hoveredIndex].pieStatus.selected;
- // const isHovered = false;
- // const k = option.series[hoveredIndex].pieStatus.k;
- // const startRatio = option.series[hoveredIndex].pieData.startRatio;
- // const endRatio = option.series[hoveredIndex].pieData.endRatio;
-
- // option.series[hoveredIndex].parametricEquation = getParametricEquation(
- // startRatio,
- // endRatio,
- // isSelected,
- // isHovered,
- // k,
- // option.series[hoveredIndex].pieData.value,
- // );
- // option.series[hoveredIndex].pieStatus.hovered = isHovered;
- // hoveredIndex = "";
- // }
-
- // chart.setOption(option);
- // });
+ const updateChart = () => {
+ if (!chartInstance) return;
+ const option = getPie3D(props.chartData, props.ringSize);
+ chartInstance.setOption(option, true);
};
const total = computed(() => props.chartData.reduce((sum: number, item: any) => sum + item.value, 0));
@@ -416,15 +257,32 @@
watch(
() => props.chartData,
() => {
- initChart();
+ if (chartInstance) {
+ updateChart();
+ }
},
{ deep: true },
);
// 组件挂载时初始化
onMounted(() => {
- initChart();
+ if (!chartInstance) {
+ initChart();
+ }
+ window.addEventListener("resize", handleResize);
});
+
+ onBeforeUnmount(() => {
+ if (chartInstance) {
+ chartInstance.dispose();
+ chartInstance = null;
+ }
+ window.removeEventListener("resize", handleResize);
+ });
+
+ const handleResize = () => {
+ chartInstance?.resize();
+ };
diff --git a/src/views/home.vue b/src/views/home.vue
index 535e724..e002c6a 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -6,6 +6,11 @@
{{ year }}-{{ month }}-{{ day }} {{ weekday }}
+
@@ -15,21 +20,21 @@
-
-
-
+
-
-
-
-
+
+
+
+
@@ -40,28 +45,87 @@
diff --git a/src/views/login.vue b/src/views/login.vue
new file mode 100644
index 0000000..0bcf180
--- /dev/null
+++ b/src/views/login.vue
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+