|
|
@@ -0,0 +1,379 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="cards" v-if="visitor && visits">
|
|
|
+ <div class="card" v-if="visitor">
|
|
|
+ <div class="title">{{ $t("访客统计") }}（uv）</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visitor.day" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visitor.day }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('日访客')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("日访客") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visitor.week" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visitor.week }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('周访客')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("周访客") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visitor.month" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visitor.month }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('月访客')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("月访客") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visitor.year" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visitor.year }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('年访客')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("年访客") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visitor.all" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visitor.all }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('总访客')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("总访客") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card" v-if="visits">
|
|
|
+ <div class="title">{{ $t("访问量统计") }}</div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visits.day" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visits.day }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('日访问量')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("日访问量") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visits.week" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visits.week }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('周访问量')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("周访问量") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visits.month" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visits.month }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('月访问量')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("月访问量") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visits.year" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visits.year }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('年访问量')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("年访问量") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item">
|
|
|
+ <el-tooltip :content="visits.all" placement="top-start">
|
|
|
+ <div class="data text-ellipsis">
|
|
|
+ {{ visits.all }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="$t('总访问量')" placement="top-start">
|
|
|
+ <div class="explain text-ellipsis">
|
|
|
+ {{ $t("总访问量") }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="cards" style="margin-top: 20px">
|
|
|
+ <div class="card">
|
|
|
+ <cord-top title="访客趋势分析" @returnWhere="getVisitorTrend" />
|
|
|
+ <div ref="visitorTrend" style="margin-top: 20px"></div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <cord-top title="访问量趋势分析" @returnWhere="getPageViewTrend" />
|
|
|
+ <div ref="pageViewTrend" style="margin-top: 20px"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import cordTop from "./header.vue";
|
|
|
+import { Line } from "@antv/g2plot";
|
|
|
+
|
|
|
+/* 访客统计模块 */
|
|
|
+export default {
|
|
|
+ name: "visitorStatistics",
|
|
|
+ components: { cordTop },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visitor: null, //访客
|
|
|
+ visitorTrend: null, //访客趋势
|
|
|
+ visits: null, //访问量
|
|
|
+ pageViewTrend: null, //访问量趋势
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.siteid = JSON.parse(sessionStorage.getItem("active_account")).siteid;
|
|
|
+ this.getCardData("访客");
|
|
|
+ this.getCardData("访问量");
|
|
|
+ this.getVisitorTrend();
|
|
|
+ this.getPageViewTrend();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCardData(type) {
|
|
|
+ this.$api
|
|
|
+ .requested({
|
|
|
+ id: 2025010214243003,
|
|
|
+ content: {
|
|
|
+ siteid: this.siteid,
|
|
|
+ type,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("获取" + type, res);
|
|
|
+ if (res.code != 1) return;
|
|
|
+ if (type == "访客") {
|
|
|
+ this.visitor = res.data;
|
|
|
+ } else {
|
|
|
+ this.visits = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取访客趋势
|
|
|
+ getVisitorTrend(detail) {
|
|
|
+ let content = {
|
|
|
+ siteid: this.siteid,
|
|
|
+ type: "近七日",
|
|
|
+ datatype: "访客",
|
|
|
+ };
|
|
|
+ if (detail) {
|
|
|
+ if (detail.type) {
|
|
|
+ content.type = detail.type;
|
|
|
+ } else {
|
|
|
+ content.type = "";
|
|
|
+ content.where = detail;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$api
|
|
|
+ .requested({
|
|
|
+ id: 2025010214275903,
|
|
|
+ content,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("获取访客趋势", res);
|
|
|
+ if (res.code != 1) return;
|
|
|
+ let list = res.data.map((v) => {
|
|
|
+ v.type = "UV" + this.$t("访客数量");
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ if (detail) {
|
|
|
+ this.visitorTrend.changeData(list);
|
|
|
+ } else {
|
|
|
+ this.visitorTrend = new Line(this.$refs.visitorTrend, {
|
|
|
+ height: 300,
|
|
|
+ data: list,
|
|
|
+ xField: "date",
|
|
|
+ scrollbar: {
|
|
|
+ type: "horizontal",
|
|
|
+ },
|
|
|
+ seriesField: "type",
|
|
|
+ yField: "count",
|
|
|
+ color: "#5588F7",
|
|
|
+ tooltip: {
|
|
|
+ formatter: (datum) => {
|
|
|
+ return {
|
|
|
+ name: "UV" + this.$t("访客数量"),
|
|
|
+ value: datum.count,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ point: {
|
|
|
+ shape: "breath-point",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.visitorTrend.render();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取访问量趋势
|
|
|
+ getPageViewTrend(detail) {
|
|
|
+ let content = {
|
|
|
+ siteid: this.siteid,
|
|
|
+ type: "近七日",
|
|
|
+ datatype: "访问量",
|
|
|
+ };
|
|
|
+ if (detail) {
|
|
|
+ if (detail.type) {
|
|
|
+ content.type = detail.type;
|
|
|
+ } else {
|
|
|
+ content.type = "";
|
|
|
+ content.where = detail;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$api
|
|
|
+ .requested({
|
|
|
+ id: 2025010214275903,
|
|
|
+ content,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log("获取访问量趋势", res);
|
|
|
+ if (res.code != 1) return;
|
|
|
+ let list = res.data.map((v) => {
|
|
|
+ v.type = this.$t("重复访客数量");
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ if (detail) {
|
|
|
+ this.pageViewTrend.changeData(list);
|
|
|
+ } else {
|
|
|
+ this.pageViewTrend = new Line(this.$refs.pageViewTrend, {
|
|
|
+ height: 300,
|
|
|
+ data: list,
|
|
|
+ xField: "date",
|
|
|
+ yField: "count",
|
|
|
+ color: "#F29C37",
|
|
|
+ scrollbar: {
|
|
|
+ type: "horizontal",
|
|
|
+ },
|
|
|
+ seriesField: "type",
|
|
|
+ tooltip: {
|
|
|
+ formatter: (datum) => {
|
|
|
+ return { name: this.$t("重复访客数量"), value: datum.count };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ point: {
|
|
|
+ shape: "breath-point",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.pageViewTrend.render();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.text-ellipsis {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡片 */
|
|
|
+.cards {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ width: 49%;
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.16);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.card .title {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.card .content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.card .content .item {
|
|
|
+ width: 20%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.card .content .item .data {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+.card .content .item .explain {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+}
|
|
|
+</style>
|
