log-server-web/src/view/oldDataShow/oldDataShow.vue

<template>
  <div>
    <div class="gva-search-box">
      <div class="gva-btn-list">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="任务Id">
            <el-input v-model="searchInfo.task_id" placeholder="任务ID" />
          </el-form-item>
          <el-form-item label="任务名称">
            <el-input v-model="searchInfo.task_name" placeholder="任务名称" />
          </el-form-item>
          <el-form-item label="日期" prop="date">
            <el-date-picker
              v-model="searchInfo.new_date"
              size="default"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :disabled-date="disabledDate"
              :shortcuts="shortcuts"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="search"
              @click="onSubmit"
              >查询</el-button
            >
            <el-button size="small" icon="refresh" @click="onReset"
              >重置</el-button
            >
            <el-button
              class="excel-btn"
              size="small"
              type="primary"
              icon="download"
              @click="exportExcel"
              >导出表格</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <p style="color: brown">
      旧平台历史数据仅供查询参考，详情请移步<a
        style="color: blue"
        href="http://sjyh.kfzs.com"
        target="_blank"
        >http://sjyh.kfzs.com</a
      >
    </p>
    <div class="gva-table-box" style="padding: 0">
      <el-table
        :data="tableData"
        border
        stripe
        align="center"
        header-align="center"
        height="550"
        size="small"
        :default-sort="{ prop: 'task_id', order: 'ascending' }"
        v-loading="loading"
      >
        <el-table-column type="index" label="#" min-width="10" fixed="left" />
        <el-table-column
          fixed="left"
          prop="new_date"
          label="日期"
          min-width="90"
        />
        <el-table-column
          fixed="left"
          prop="task_id"
          label="任务ID"
          min-width="80"
        />
        <el-table-column
          fixed="left"
          prop="task_name"
          label="任务名称"
          min-width="100"
        />
        <el-table-column prop="" label="目标" min-width="60" align="center">
          <el-table-column
            prop="target_new"
            label="新增"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="target_lc"
            label="留存"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="target_pay"
            label="付费"
            min-width="60"
            align="center"
          />
        </el-table-column>
        <el-table-column prop="" label="完成" min-width="60" align="center">
          <el-table-column
            prop="complete_new"
            label="新增"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="complete_lc"
            label="留存"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="complete_pay"
            label="付费"
            min-width="60"
            align="center"
          />
        </el-table-column>
        <el-table-column prop="" label="未完" min-width="60" align="center">
          <el-table-column
            prop="incomplete_new"
            label="新增"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="incomplete_lc"
            label="留存"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="incomplete_pay"
            label="付费"
            min-width="60"
            align="center"
          />
        </el-table-column>
        <el-table-column prop="" label="手动" min-width="100" align="center">
          <el-table-column
            prop="complete_pay_hand"
            label="手动付费数量"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="amount_hand"
            label="手动付费金额"
            min-width="60"
            align="center"
          />
          <el-table-column
            prop="remark"
            label="异常记录"
            min-width="60"
            align="center"
          />
        </el-table-column>
        <el-table-column
          prop="amount"
          label="总付费金额"
          min-width="60"
          align="center"
        />
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "data_abnormal_rate",
};
</script>

<script setup>
import { getOldDataList,exportSyDataListExcel } from "@/api/data_abnormal_rate";
import { ref } from "vue";
import dayjs from "dayjs";
// import { ElMessage } from "element-plus";

const page = ref(1);
const total = ref(0);
const pageSize = ref(20);
const tableData = ref([]);
const searchInfo = ref({});
const loading = ref(false);

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

const shortcuts = [
  {
    text: "今日",
    value: () => {
      const end = new Date();
      const start = new Date();
      return [start, end];
    },
  },
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
];

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  getTableData();
};
const onReset = () => {
  searchInfo.value = {};
};
const handleCurrentChange = (val) => {
  page.value = val;
  getTableData();
};

// 搜索
const onSubmit = () => {
  if (typeof searchInfo.value.task_id != "undefined") {
    searchInfo.value.task_id = Number(searchInfo.value.task_id);
  }
  if (typeof searchInfo.value.new_date != "undefined") {
    searchInfo.value.new_date[0] = dayjs(searchInfo.value.new_date[0]).format(
      "YYYY-MM-DD"
    );
    searchInfo.value.new_date[1] = dayjs(searchInfo.value.new_date[1]).format(
      "YYYY-MM-DD"
    );
  }

  // console.log(searchInfo.value);

  getTableData();
};

// 查询
const getTableData = async () => {
  loading.value = true;
  // ElMessage({
  //   message: "查询中,请稍等",
  //   type: "success",
  //   offset: 50,
  // });
  const table = await getOldDataList({
    page: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value,
  });
  if (table.code === 0) {
    tableData.value = [];
    const data = table.data.list;
    if (data) {
      data.forEach((e) => {
        let obj1 = {
          task_id: e.task_id,
          task_name: e.task_name,
          new_date: dayjs(e.new_date).format("YYYY-MM-DD"),
          target_new: e.target_new,
          target_pay: e.target_pay,
          target_lc:
            e.target_active - e.target_new < 0
              ? 0
              : e.target_active - e.target_new,
          complete_new: e.complete_new,
          complete_lc: e.complete_active - e.complete_new,
          complete_pay: e.complete_pay,
          incomplete_new:
            e.target_new - e.complete_new < 0
              ? 0
              : e.target_new - e.complete_new,
          incomplete_pay:
            e.target_pay - e.complete_pay < 0
              ? 0
              : e.target_pay - e.complete_pay,
          incomplete_lc:
            e.target_active -
              e.target_new -
              (e.complete_active - e.complete_new) <
            0
              ? 0
              : e.target_active -
                e.target_new -
                (e.complete_active - e.complete_new),
          complete_pay_hand: e.complete_pay_hand,
          amount_hand: e.amount_hand,
          remark: e.remark,
          amount: e.amount,
        };
        tableData.value.push(obj1);
      });
    }
    // console.log(tableData);
    total.value = table.data.total;
    page.value = table.data.page;
    pageSize.value = table.data.pageSize;
  }
  loading.value = false;
};

const exportExcel = async () => {
  var fileName = "";
  if (searchInfo.value.new_date == null) {
    let dt = new Date(Date.parse(new Date()) - 1 * 24 * 60 * 60 * 1000);
    var y = dt.getFullYear();
    var mt = (dt.getMonth() + 1).toString().padStart(2, "0");
    var day = dt.getDate().toString().padStart(2, "0");
    var timeStr = y + "-" + mt + "-" + day;
    fileName = timeStr + "-数优数据.xlsx";
  } else {
    fileName = searchInfo.value.new_date + "-数优数据.xlsx";
  }
  exportSyDataListExcel(
    { page: page.value, pageSize: pageSize.value, ...searchInfo.value },
    fileName
  );
};

getTableData();
</script>

<style scoped lang="scss">
.button-box {
  padding: 10px 20px;
  .el-button {
    float: right;
  }
}
.warning {
  color: #dc143c;
}
</style>