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

<template>
  <div>
    <div>
      <el-select
        style="margin-right: 20px"
        v-model="value1"
        placeholder="请选择统计类型"
      >
        <el-option
          v-for="item in [
            { value: '1', label: '1' },
            { value: '2', label: '2' },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        style="margin-right: 20px"
        v-model="value"
        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-button @click="getList" type="primary">查询</el-button>
      <el-button type="success">导出</el-button>
    </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">{{
              absoluteValue(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">62</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">{{
              absoluteValue(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"
              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">{{
              absoluteValue(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 { mapState } from "vuex";
import * as echarts from "echarts";
export default {
  data() {
    return {
      value1: "",
      value: "",
      formInline: {
        marketId: "",
        shopId: "",
        brandId: "",
        countType: "",
        dataType: "",
        provinceCode: "",
        cityCode: "",
      },
      analysis: {},
      trend: [],
    };
  },
  mounted() {
    this.formInline = {
      marketId: this.marketId,
      shopId: this.shopId,
      brandId: JSON.parse(sessionStorage.getItem("userInfo")).brandId,
    };
    this.getList();
  },
  methods: {
    getList() {
      console.log("1213");
      this.$api.dataCenter.customerAnalysis(this.formInline).then((res) => {
        this.analysis = res.data.data;
      });
      this.$api.dataCenter.customerTrend(this.formInline).then((res) => {
        console.log(res);
      });
      this.init();
    },
    init() {
      this.$nextTick(() => {
        // 折线图
        const myChat = echarts.init(
          document.getElementById("echarts-LineChart")
        );
        myChat.setOption(this.LineChart());
        window.addEventListener("resize", () => {
          myChat.resize();
        });
      });
    },
    LineChart() {
      return {
        title: {
          text: "交易趋势分析",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单金额", "订单数", "订单商品数"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单金额",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "订单数",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "订单商品数",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      };
    },
    absoluteValue(row) {
      if (row === 0) {
        return 0;
      }
      return Math.abs(row);
    },
  },
  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>