merchant-web/src/views/modules/datacenter/customer-analysis/index.vue

<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="日期类型">
          <el-select
            style="margin-right: 20px"
            v-model="formInline.dateType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in [
                { value: '1', label: '日' },
                { value: '2', label: '周' },
                { value: '3', label: '月' },
                { value: '4', label: '年' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统计类型">
          <el-select
            style="margin-right: 20px"
            v-model="formInline.elementType"
            placeholder="请选择统计类型"
          >
            <el-option
              v-for="item in [
                { value: '1', label: '浏览数量' },
                { value: '2', label: '浏览人数' },
                { value: '3', label: '新客数量' },
                { value: '4', label: '支付订单人数' },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList" type="primary">查询</el-button>
          <el-button @click="batchExport" type="success">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="stat-list">
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-camera-solid"></i>
        <div class="stat-right">
          <div class="stat-title">展现量 （次）</div>
          <div class="stat-value">
            <span style="font-size: 20px">{{
              analysis.viewCount ? analysis.viewCount : "0"
            }}</span>
            <span
              v-if="analysis.viewCountRatio < '0%'"
              style="font-size: 16px; margin: 0 5px; color: green"
              >↓</span
            >
            <span style="font-size: 16px; margin: 0 5px; color: red" v-else
              >↑</span
            >
            <span style="font-size: 16px">{{ analysis.viewCountRatio }}</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-user-solid"></i>
        <div class="stat-right">
          <div class="stat-title">浏览人数 （人）</div>
          <div class="stat-value">
            <span style="font-size: 20px">{{ analysis.peopleCount }}</span>
            <span
              v-if="analysis.peopleCountRatio < '0%'"
              style="font-size: 16px; margin: 0 5px; color: green"
              >↓</span
            >
            <span style="font-size: 16px; margin: 0 5px; color: red" v-else
              >↑</span
            >
            <span style="font-size: 16px">{{ analysis.peopleCountRatio }}</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-user-solid"></i>
        <div class="stat-right">
          <div class="stat-title">新客数量 （人）</div>
          <div class="stat-value">
            <span style="font-size: 20px">{{
              analysis.newPeopleCount ? analysis.newPeopleCount : "0"
            }}</span>
            <span
              v-if="analysis.newPeopleCountRatio < '0%'"
              style="font-size: 16px; margin: 0 5px; color: green"
              >↓</span
            >
            <span style="font-size: 16px; margin: 0 5px; color: red" v-else
              >↑</span
            >
            <span style="font-size: 16px">{{
              analysis.newPeopleCountRatio
            }}</span>
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-user-solid"></i>
        <div class="stat-right">
          <div class="stat-title">支付订单人数 （人）</div>
          <div style="font-size: 20px" class="stat-value">
            {{ analysis.payCount ? analysis.payCount : "0" }}
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-s-order"></i>
        <div class="stat-right">
          <div class="stat-title">支付订单转化率 （%）</div>
          <div style="font-size: 20px" class="stat-value">
            {{ analysis.payConversion ? analysis.payConversion : "0" }}
          </div>
        </div>
      </div>
      <div class="stat-item">
        <i style="font-size: 22px" class="el-icon-s-order"></i>
        <div class="stat-right">
          <div class="stat-title">客户复购率 （%）</div>
          <div style="font-size: 20px" class="stat-value">
            {{ analysis.repurchaseRate ? analysis.repurchaseRate : "0" }}
          </div>
        </div>
      </div>
    </div>
    <el-row class="echarts-line">
      <div
        id="echarts-LineChart"
        style="
          width: 100%;
          height: calc(100vh - 500px);
          margin-top: 20px;
          border: 1px solid #ccc;
        "
      />
    </el-row>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import { mapState } from "vuex";
import * as echarts from "echarts";
export default {
  data() {
    return {
      value1: "",
      value: "",
      formInline: {
        dateType: "1",
        elementType: "1",
      },
      analysis: {},
      trend: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      console.log("1213");
      this.$api.dataCenter
        .customerAnalysis({ dateType: this.formInline.dateType })
        .then((res) => {
          this.analysis = res.data.data;
        });
      this.$api.dataCenter.customerTrend(this.formInline).then((res) => {
        this.trend = res.data.data;
        this.init(res.data.data);
      });
    },
    init(data) {
      this.$nextTick(() => {
        // 折线图
        const myChat = echarts.init(
          document.getElementById("echarts-LineChart")
        );
        myChat.setOption(this.LineChart(data));
        window.addEventListener("resize", () => {
          myChat.resize();
        });
      });
    },
    LineChart(data) {
      return {
        title: {
          text: "数据趋势分析",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [this.elementTypeName(this.formInline.elementType)],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data.map((item) => {
            return item.countDate;
          }),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: this.elementTypeName(this.formInline.elementType),
            type: "line",
            stack: "Total",
            data: data.map((item) => {
              return item.value;
            }),
          },
        ],
      };
    },
    elementTypeName(row) {
      if (row == "1") {
        return "浏览数量";
      } else if (row == "2") {
        return "浏览人数";
      } else if (row == "3") {
        return "新客数量";
      } else if (row == "4") {
        return "支付订单人数";
      }
    },
    async batchExport() {
      let trendData = this.trend.map((item) => {
        return {
          日期: item.countDate,
          数量: item.value,
        };
      });
      let row = this.analysis;
      const analysisData = [
        {
          展现量: row.viewCount,
          浏览人数: row.peopleCount,
          新客数量: row.newPeopleCount,
          支付订单人数: row.payCount,
          支付订单转化率: row.payConversion,
        },
      ];
      const workbook = XLSX.utils.book_new();
      const worksheet = XLSX.utils.json_to_sheet(analysisData);
      const worksheetOne = XLSX.utils.json_to_sheet(trendData);

      XLSX.utils.book_append_sheet(workbook, worksheet, "总数据");
      XLSX.utils.book_append_sheet(workbook, worksheetOne, "数据趋势");
      const excelData = XLSX.write(workbook, {
        type: "array",
        bookType: "xlsx",
      });
      const blob = new Blob([excelData], { type: "application/octet-stream" });
      saveAs(blob, "客户分析.xlsx");
    },
  },
  computed: {
    ...mapState("userData", [
      "isMerchant",
      "marketList",
      "storeList",
      "marketId",
      "shopId",
    ]),
  },
};
</script>

<style lang="scss" scoped>
.stat-list {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
.stat-item {
  width: 25%;
  margin: 30px 30px;
  display: flex;
  align-items: center;
}
.stat-icon {
  background: rgb(99 152 252);
  width: 60px;
  height: 60px;
  border-radius: 3px;
}
.stat-right {
  margin-left: 12px;
  font-size: 18px;
}
.stat-title {
  color: #969696;
  margin-bottom: 10px;
}
</style>