fix: 优化
This commit is contained in:
admin
parent
6e9d903a29
commit
90c7700370
|
|
@ -3,7 +3,6 @@ VITE_APP_PORT = 3000
|
||||||
|
|
||||||
# 代理前缀
|
# 代理前缀
|
||||||
VITE_APP_BASE_API = '/'
|
VITE_APP_BASE_API = '/'
|
||||||
# /test/sh0001/api
|
|
||||||
|
|
||||||
# 线上接口地址
|
# 线上接口地址
|
||||||
VITE_APP_API_URL = 'https://ifanda.52zaisheng.cn/dy'
|
VITE_APP_API_URL = 'https://ifanda.52zaisheng.cn/dy'
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
# 代理前缀
|
# 代理前缀
|
||||||
VITE_APP_BASE_API = '/test'
|
VITE_APP_BASE_API = 'https://ifanda.52zaisheng.cn/dy'
|
||||||
|
|
||||||
|
# 线上接口地址
|
||||||
|
VITE_APP_API_URL = ''
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,205 +0,0 @@
|
||||||
<!-- 线 + 柱混合图 -->
|
|
||||||
<template>
|
|
||||||
<el-card>
|
|
||||||
<template #header>
|
|
||||||
<div class="flex-x-between">
|
|
||||||
<div class="flex-y-center">
|
|
||||||
访问趋势
|
|
||||||
<el-tooltip effect="dark" content="点击试试下载" placement="bottom">
|
|
||||||
<i-ep-download
|
|
||||||
class="cursor-pointer hover:color-#409eff ml-1"
|
|
||||||
@click="handleDownloadChart"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-radio-group v-model="dataRange" size="small">
|
|
||||||
<el-radio-button label="近7天" :value="1" />
|
|
||||||
<el-radio-button label="近30天" :value="2" />
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div :id="id" :class="className" :style="{ height, width }"></div>
|
|
||||||
</el-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
import StatsAPI, { VisitTrendVO, VisitTrendQuery } from "@/api/log";
|
|
||||||
|
|
||||||
const dataRange = ref(1);
|
|
||||||
const chart: Ref<echarts.ECharts | null> = ref(null);
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: "VisitTrend",
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
width: {
|
|
||||||
type: String,
|
|
||||||
default: "200px",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: "200px",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 设置图表 */
|
|
||||||
const setChartOptions = (data: VisitTrendVO) => {
|
|
||||||
if (!chart.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ["浏览量(PV)", "IP"],
|
|
||||||
bottom: 0,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: "1%",
|
|
||||||
right: "5%",
|
|
||||||
bottom: "10%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: data.dates,
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
type: "dashed",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "浏览量(PV)",
|
|
||||||
type: "line",
|
|
||||||
data: data.pvList,
|
|
||||||
areaStyle: {
|
|
||||||
color: "rgba(64, 158, 255, 0.1)",
|
|
||||||
},
|
|
||||||
smooth: true,
|
|
||||||
itemStyle: {
|
|
||||||
color: "#409EFF",
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
color: "#409EFF",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "IP",
|
|
||||||
type: "line",
|
|
||||||
data: data.ipList,
|
|
||||||
areaStyle: {
|
|
||||||
color: "rgba(103, 194, 58, 0.1)",
|
|
||||||
},
|
|
||||||
smooth: true,
|
|
||||||
itemStyle: {
|
|
||||||
color: "#67C23A",
|
|
||||||
},
|
|
||||||
lineStyle: {
|
|
||||||
color: "#67C23A",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
chart.value.setOption(options);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 计算起止时间范围 */
|
|
||||||
const calculateDateRange = () => {
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
||||||
|
|
||||||
const days = dataRange.value === 1 ? 7 : 30;
|
|
||||||
const startDate = new Date(endDate);
|
|
||||||
startDate.setDate(startDate.getDate() - days);
|
|
||||||
|
|
||||||
// 手动调整日期为当地时间的 23:59:59
|
|
||||||
const adjustDateToLocal = (date: Date) => {
|
|
||||||
date.setHours(23, 59, 59, 999);
|
|
||||||
return date;
|
|
||||||
};
|
|
||||||
|
|
||||||
const adjustedEndDate = adjustDateToLocal(new Date(endDate));
|
|
||||||
const adjustedStartDate = adjustDateToLocal(new Date(startDate));
|
|
||||||
const formattedStartDate = adjustedStartDate.toISOString().split("T")[0];
|
|
||||||
const formattedEndDate = adjustedEndDate.toISOString().split("T")[0];
|
|
||||||
|
|
||||||
return { startDate: formattedStartDate, endDate: formattedEndDate };
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 下载图表 */
|
|
||||||
const handleDownloadChart = () => {
|
|
||||||
if (!chart.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取画布图表地址信息
|
|
||||||
const img = new Image();
|
|
||||||
img.src = chart.value.getDataURL({
|
|
||||||
type: "png",
|
|
||||||
pixelRatio: 1,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
});
|
|
||||||
// 当图片加载完成后，生成 URL 并下载
|
|
||||||
img.onload = () => {
|
|
||||||
const canvas = document.createElement("canvas");
|
|
||||||
canvas.width = img.width;
|
|
||||||
canvas.height = img.height;
|
|
||||||
const ctx = canvas.getContext("2d");
|
|
||||||
if (ctx) {
|
|
||||||
ctx.drawImage(img, 0, 0, img.width, img.height);
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.download = `访问趋势.png`;
|
|
||||||
link.href = canvas.toDataURL("image/png", 0.9);
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
link.remove();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 窗口大小变化时，重置图表大小 */
|
|
||||||
const handleResize = () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (chart.value) {
|
|
||||||
chart.value.resize();
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
};
|
|
||||||
/** 初始化图表 */
|
|
||||||
onMounted(() => {
|
|
||||||
chart.value = markRaw(
|
|
||||||
echarts.init(document.getElementById(props.id) as HTMLDivElement)
|
|
||||||
);
|
|
||||||
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
window.removeEventListener("resize", handleResize);
|
|
||||||
});
|
|
||||||
|
|
||||||
onActivated(() => {
|
|
||||||
handleResize();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
|
|
@ -50,6 +50,7 @@
|
||||||
@keyup.enter="handleLoginSubmit"
|
@keyup.enter="handleLoginSubmit"
|
||||||
size="large"
|
size="large"
|
||||||
class="h-[48px] pr-2"
|
class="h-[48px] pr-2"
|
||||||
|
type="password"
|
||||||
>
|
>
|
||||||
<!-- <template #suffix>
|
<!-- <template #suffix>
|
||||||
<el-text
|
<el-text
|
||||||
|
|
@ -133,8 +134,8 @@ const captchaBase64 = ref();
|
||||||
const loginFormRef = ref<FormInstance>();
|
const loginFormRef = ref<FormInstance>();
|
||||||
|
|
||||||
const loginData = ref<LoginData>({
|
const loginData = ref<LoginData>({
|
||||||
phone: "13100000006",
|
phone: "",
|
||||||
code: "a12345678",
|
code: "",
|
||||||
} as LoginData);
|
} as LoginData);
|
||||||
|
|
||||||
const seconds = ref(0);
|
const seconds = ref(0);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue