|
|
@@ -0,0 +1,432 @@
|
|
|
+<template>
|
|
|
+ <div class="performance-detail">
|
|
|
+ <div class="title-box-common title-box">
|
|
|
+ <a-breadcrumb>
|
|
|
+ <a-breadcrumb-item
|
|
|
+ ><a href="javascript:;" @click="$router.go(-1)"
|
|
|
+ >员工绩效</a
|
|
|
+ ></a-breadcrumb-item
|
|
|
+ >
|
|
|
+ <a-breadcrumb-item>查看详情</a-breadcrumb-item>
|
|
|
+ </a-breadcrumb>
|
|
|
+ <h3 style="font-size: 20px">{{ uname }}</h3>
|
|
|
+ </div>
|
|
|
+ <div class="padding-box-common">
|
|
|
+ <div class="search-box data-box">
|
|
|
+ <h3>绩效总览</h3>
|
|
|
+ <div class="detail-data-item">
|
|
|
+ <p>成本合计（元）</p>
|
|
|
+ <p>{{ sum.cost_amount }}</p>
|
|
|
+ </div>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <div class="detail-data-item">
|
|
|
+ <p>提现合计（元）</p>
|
|
|
+ <p>{{ sum.cash_withdrawal_amount }}</p>
|
|
|
+ </div>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <div class="detail-data-item">
|
|
|
+ <p>回本（元）</p>
|
|
|
+ <p>{{ sum.back_amount }}</p>
|
|
|
+ </div>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <div class="detail-data-item">
|
|
|
+ <p>用户充值（元）</p>
|
|
|
+ <p>{{ sum.user_charge_amount_sum }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="search-box" style="border: none">
|
|
|
+ <h3>绩效明细</h3>
|
|
|
+ <div class="right-search">
|
|
|
+ <span v-show="search.type === 'month'">自定义月数：</span>
|
|
|
+ <span v-show="search.type === 'day'">自定义天数：</span>
|
|
|
+ <a-input
|
|
|
+ v-model:value="search.value"
|
|
|
+ placeholder="请输入"
|
|
|
+ style="width: 100px"
|
|
|
+ type="number"
|
|
|
+ :min="0"
|
|
|
+ @keyup.enter="getList"
|
|
|
+ />
|
|
|
+ <a-select
|
|
|
+ style="width: 100px"
|
|
|
+ v-model:value="search.type"
|
|
|
+ @change="onTypeChange"
|
|
|
+ >
|
|
|
+ <a-select-option value="month">按月查询</a-select-option>
|
|
|
+ <a-select-option value="day">按日查询</a-select-option> </a-select
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-if="search.type === 'month'"
|
|
|
+ v-model="search.date_arr"
|
|
|
+ type="monthrange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始月份"
|
|
|
+ end-placeholder="结束月份"
|
|
|
+ @change="getList"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-date-picker
|
|
|
+ v-else
|
|
|
+ v-model="search.date_arr"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="getList"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="chart-container" v-if="!loading"></div>
|
|
|
+ <div class="chart-loading" v-show="loading">加载中......</div>
|
|
|
+ <div class="table-box">
|
|
|
+ <a-radio-group
|
|
|
+ v-model:value="search.model"
|
|
|
+ @change="getList"
|
|
|
+ style="margin: 10px 0"
|
|
|
+ >
|
|
|
+ <a-radio-button value="natural">自然日数据</a-radio-button>
|
|
|
+ <a-radio-button value="precise">顺延24小时数据</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <a-table
|
|
|
+ bordered
|
|
|
+ :scroll="{ x: 1500 }"
|
|
|
+ :data-source="list"
|
|
|
+ :columns="columns"
|
|
|
+ @change="getList"
|
|
|
+ rowKey="uid"
|
|
|
+ :loading="loading"
|
|
|
+ :pagination="tablePageOptions"
|
|
|
+ >
|
|
|
+ <template #wm0="{ record }">
|
|
|
+ <p class="detail-num">{{ record.cash_withdrawal[0].amount }}</p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 累计提现： {{ record.cash_withdrawal[0].accruing_amount }}
|
|
|
+ </p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 回本率： {{ record.cash_withdrawal[0].back_rate }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template #wm1="{ record }">
|
|
|
+ <p class="detail-num">{{ record.cash_withdrawal[1].amount }}</p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 累计提现： {{ record.cash_withdrawal[1].accruing_amount }}
|
|
|
+ </p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 回本率： {{ record.cash_withdrawal[1].back_rate }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template #wm2="{ record }">
|
|
|
+ <p class="detail-num">{{ record.cash_withdrawal[2].amount }}</p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 累计提现： {{ record.cash_withdrawal[2].accruing_amount }}
|
|
|
+ </p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 回本率： {{ record.cash_withdrawal[2].back_rate }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template #cm0="{ record }">
|
|
|
+ <p class="detail-num">{{ record.cash_withdrawal[0].amount }}</p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 累计提现： {{ record.cash_withdrawal[0].accruing_amount }}
|
|
|
+ </p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 回本率： {{ record.cash_withdrawal[0].back_rate }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template #cm1="{ record }">
|
|
|
+ <p class="detail-num">{{ record.cash_withdrawal[1].amount }}</p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 累计提现： {{ record.cash_withdrawal[1].accruing_amount }}
|
|
|
+ </p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 回本率： {{ record.cash_withdrawal[1].back_rate }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template #cm2="{ record }">
|
|
|
+ <p class="detail-num">{{ record.cash_withdrawal[2].amount }}</p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 累计提现： {{ record.cash_withdrawal[2].accruing_amount }}
|
|
|
+ </p>
|
|
|
+ <p class="detail-num small-font">
|
|
|
+ 回本率： {{ record.cash_withdrawal[2].back_rate }}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template #operation="{ record }">
|
|
|
+ <a-button type="link" @click="toDetial(record)">查看详情</a-button>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+import { Line } from "@antv/g2plot";
|
|
|
+import usePagination from "@/hooks/usePagination";
|
|
|
+import { defineComponent, reactive, toRefs, ref } from "vue";
|
|
|
+import { Moment } from "moment";
|
|
|
+import { TableColumnOfStuffDetail } from "../_pageOptions/table_data";
|
|
|
+//getPromotionList
|
|
|
+import {
|
|
|
+ getStuffPerformance,
|
|
|
+ getStuffPerformanceSum,
|
|
|
+ getStuffPerformanceChart,
|
|
|
+} from "@/api";
|
|
|
+import { message } from "ant-design-vue";
|
|
|
+const PerformanceDetial = defineComponent({
|
|
|
+ components: {},
|
|
|
+ setup() {
|
|
|
+ let { tablePageOptions } = usePagination();
|
|
|
+ const state = reactive({
|
|
|
+ search: {
|
|
|
+ uid: 0,
|
|
|
+ uname: "", // 推广员名称
|
|
|
+ type: "month", // 时间类型 day/month
|
|
|
+ model: "natural", // 计算方式 自然日：natural/ 顺延24小时:precise
|
|
|
+ value: ref<any[number | string]>(3), // 自定义月数、天数
|
|
|
+ date_arr: ref<any[]>([]),
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ list: ref<any[]>([]),
|
|
|
+ columns: TableColumnOfStuffDetail,
|
|
|
+ sum: {
|
|
|
+ back_amount: 0, // 回本
|
|
|
+ cash_withdrawal_amount: 0, // 体现合计
|
|
|
+ cost_amount: 0, // 成本合计
|
|
|
+ user_charge_amount_sum: 0, // 用户充值
|
|
|
+ },
|
|
|
+ uname: "",
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ ...toRefs(state),
|
|
|
+ tablePageOptions,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.search.uid = Number(this.$route.query.uid);
|
|
|
+ this.uname = String(this.$route.query.uname);
|
|
|
+ // this.getList({ current: 1 });
|
|
|
+ this.getSum();
|
|
|
+ this.onTypeChange("month");
|
|
|
+
|
|
|
+ console.log("ccc", this.$route.query.uid);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取推广链接数据
|
|
|
+ async getList(page?: any, filter?: any, sorter?: any) {
|
|
|
+ console.log("SORT", sorter);
|
|
|
+ this.loading = true;
|
|
|
+ let param: any = {
|
|
|
+ start_date: this.search.date_arr ? this.search.date_arr[0] : "",
|
|
|
+ end_date: this.search.date_arr ? this.search.date_arr[1] : "",
|
|
|
+ ...this.search,
|
|
|
+ };
|
|
|
+ delete param.date_arr;
|
|
|
+ console.log("请求参数", param);
|
|
|
+ let { data } = await getStuffPerformance({
|
|
|
+ page: page ? page.current : 1,
|
|
|
+ ...param,
|
|
|
+ });
|
|
|
+ let chartData = await getStuffPerformanceChart(param);
|
|
|
+ console.log("请求结果", data);
|
|
|
+ console.log("CHART结果", chartData.data);
|
|
|
+ this.loading = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.renderChart(chartData.data);
|
|
|
+ });
|
|
|
+ this.list = data.list;
|
|
|
+ },
|
|
|
+ // 获取绩总览
|
|
|
+ async getSum() {
|
|
|
+ let { data } = await getStuffPerformanceSum({
|
|
|
+ start_date: this.search.date_arr ? this.search.date_arr[0] : "",
|
|
|
+ end_date: this.search.date_arr ? this.search.date_arr[1] : "",
|
|
|
+ uid: this.$route.query.uid,
|
|
|
+ });
|
|
|
+ console.log("总览", data);
|
|
|
+ this.sum.back_amount = data.back_amount; // 回本
|
|
|
+ this.sum.cash_withdrawal_amount = data.cash_withdrawal_amount; // 体现合计
|
|
|
+ this.sum.cost_amount = data.cost_amount; // 成本合计
|
|
|
+ this.sum.user_charge_amount_sum = data.user_charge_amount_sum; // 用户充值
|
|
|
+ },
|
|
|
+ // 月、日查询类型改变
|
|
|
+ onTypeChange(val: string) {
|
|
|
+ var date = new Date();
|
|
|
+ console.log(val);
|
|
|
+ if (val === "month") {
|
|
|
+ this.search.value = 3;
|
|
|
+ var list = this.getDateRange(date, 30, true);
|
|
|
+ console.log(list[0].substring(0, 7));
|
|
|
+ this.search.date_arr = [
|
|
|
+ list[0].substring(0, 7),
|
|
|
+ list[1].substring(0, 7),
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ this.search.value = "";
|
|
|
+ var list = this.getDateRange(date, 7, true);
|
|
|
+ this.search.date_arr = list;
|
|
|
+ }
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ // 渲染图表
|
|
|
+ renderChart(data: any) {
|
|
|
+ console.log("CHART DATA:", data);
|
|
|
+ const linePlot = new Line("chart-container", {
|
|
|
+ data,
|
|
|
+ xField: "date",
|
|
|
+ yField: "value",
|
|
|
+ seriesField: "name",
|
|
|
+ yAxis: {
|
|
|
+ label: {
|
|
|
+ formatter: (v: any) => v,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ position: "top",
|
|
|
+ },
|
|
|
+ smooth: true,
|
|
|
+ // @TODO 后续会换一种动画方式
|
|
|
+ animation: {
|
|
|
+ appear: {
|
|
|
+ animation: "path-in",
|
|
|
+ duration: 2000,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ console.log("渲染");
|
|
|
+ linePlot.render();
|
|
|
+ // fetch(
|
|
|
+ // "https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json"
|
|
|
+ // )
|
|
|
+ // .then((res: any) => res.json())
|
|
|
+ // .then((data: any) => {
|
|
|
+ // console.log("CHART DATA:", data);
|
|
|
+ // const linePlot = new Line("chart-container", {
|
|
|
+ // data,
|
|
|
+ // xField: "year",
|
|
|
+ // yField: "gdp",
|
|
|
+ // seriesField: "name",
|
|
|
+ // yAxis: {
|
|
|
+ // label: {
|
|
|
+ // formatter: (v: any) => `${(v / 10e8).toFixed(1)} B`,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // legend: {
|
|
|
+ // position: "top",
|
|
|
+ // },
|
|
|
+ // smooth: true,
|
|
|
+ // // @TODO 后续会换一种动画方式
|
|
|
+ // animation: {
|
|
|
+ // appear: {
|
|
|
+ // animation: "path-in",
|
|
|
+ // duration: 3000,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+
|
|
|
+ // linePlot.render();
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ // 工具函数：获取最近日期
|
|
|
+ getDateRange(dateNow: any, intervalDays: any, bolPastTime: any) {
|
|
|
+ let oneDayTime = 24 * 60 * 60 * 1000;
|
|
|
+ let list = [];
|
|
|
+ let lastDay;
|
|
|
+
|
|
|
+ if (bolPastTime == true) {
|
|
|
+ lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
|
|
|
+ list.push(this.formateDate(lastDay));
|
|
|
+ list.push(this.formateDate(dateNow));
|
|
|
+ } else {
|
|
|
+ lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
|
|
|
+ list.push(this.formateDate(dateNow));
|
|
|
+ list.push(this.formateDate(lastDay));
|
|
|
+ }
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ formateDate(time: any) {
|
|
|
+ let year = time.getFullYear();
|
|
|
+ let month = time.getMonth() + 1;
|
|
|
+ let day = time.getDate();
|
|
|
+ if (month < 10) {
|
|
|
+ month = "0" + month;
|
|
|
+ }
|
|
|
+ if (day < 10) {
|
|
|
+ day = "0" + day;
|
|
|
+ }
|
|
|
+ return year + "-" + month + "-" + day + "";
|
|
|
+ },
|
|
|
+ // 查看详情
|
|
|
+ toDetial(item: any) {
|
|
|
+ console.log("查看详情", item);
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+export default PerformanceDetial;
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "@/assets/common-style/frame.scss";
|
|
|
+.performance-detail {
|
|
|
+ .title-box {
|
|
|
+ display: block;
|
|
|
+ padding-top: 4px;
|
|
|
+ h3 {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ .table-box {
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .data-box {
|
|
|
+ display: block;
|
|
|
+ height: auto;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 20px 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .ant-divider,
|
|
|
+ .ant-divider-vertical {
|
|
|
+ float: left;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #cfcfce;
|
|
|
+ margin-right: 30px;
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+ .detail-data-item {
|
|
|
+ width: 110px;
|
|
|
+ float: left;
|
|
|
+ color: gray;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #chart-container {
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 300px;
|
|
|
+ background: white;
|
|
|
+ padding: 10px 20px 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .chart-loading {
|
|
|
+ font-size: 16px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ background: white;
|
|
|
+ color: rgb(185, 184, 184);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
