peko-admin-web/src/views/data/overviewActiveStatistics.vue

<template>
  <!-- 表格 -->
  <el-table v-loading="loading"
            :data="tableData"
            border
            style="width: 100%; margin-top: 25px">
    <el-table-column prop="date"
                     align="center"
                     label="日期" />
    <el-table-column prop="totalCount"
                     align="center"
                     label="当天总活跃度">
      <template v-slot="scope">
        <el-button @click="
            detailsTitle = '当天总活跃度' + scope.row.date;
            edi(scope.row.totalCountDetail, 2);
          "
                   type="text"
                   size="small">
          {{ scope.row.totalCount }}
        </el-button>
      </template>
    </el-table-column>

    <el-table-column align="center"
                     label="阿拉伯区总活跃度"
                     width="">
      <template v-slot="scope">
        <el-button @click="
            detailsTitle = '阿拉伯区总活跃度' + scope.row.date;
            edi(scope.row.arCountDetail, 2);
          "
                   type="text"
                   size="small">
          {{ scope.row.arCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center"
                     label="英语区总活跃度"
                     width="">
      <template v-slot="scope">
        <el-button @click="
            detailsTitle = '英语区总活跃度' + scope.row.date;
            edi(scope.row.enCountDetail, 1);
          "
                   type="text"
                   size="small">
          {{ scope.row.enCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center"
                     label="华语区总活跃度"
                     width="">
      <template v-slot="scope">
        <el-button @click="
            detailsTitle = '华语区总活跃度' + scope.row.date;
            edi(scope.row.zhCountDetail, 4);
          "
                   type="text"
                   size="small">
          {{ scope.row.zhCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center"
                     label="土耳其区总活跃度"
                     width="">
      <template v-slot="scope">
        <el-button @click="
            detailsTitle = '土耳其区总活跃度' + scope.row.date;
            edi(scope.row.trCountDetail, 8);
          "
                   type="text"
                   size="small">
          {{ scope.row.trCount }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column align="center"
                     label="英语2区总活跃度"
                     width="">
      <template v-slot="scope">
        <el-button @click="
            detailsTitle = '英语2区总活跃度' + scope.row.date;
            edi(scope.row.en2CountDetail, 16);
          "
                   type="text"
                   size="small">
          {{ scope.row.en2Count }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination style="margin-top: 10px"
                 class="paginationClass"
                 v-model:current-page="currentPage"
                 v-model:page-size="pageSize"
                 :page-sizes="[20, 50, 100, 200, 500]"
                 layout="sizes, prev, pager, next"
                 :total="total"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange" />

  <!-- 详情 -->
  <el-dialog v-model="detailsDialog"
             :title="detailsTitle"
             width="30%"
             center>
    <!-- 内表格 -->
    <el-table v-loading="loading"
              :data="tableDataIn"
              border
              style="width: 100%; margin-top: 25px">
      <el-table-column prop="regionDesc"
                       align="center"
                       label="国家" />
      <el-table-column prop="count"
                       align="center"
                       label="活跃度" />
      <el-table-column prop="ratio"
                       align="center"
                       label="占比">
        <template v-slot="scope">
          {{ formatPercentage(scope.row.ratio) }}%
        </template>
      </el-table-column>
    </el-table>
    <!-- 操作 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"
                   class="primary"
                   @click="detailsDialog = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { dauPage } from "@/api/statistics/statistics";
import { dateFormat } from "@/utils/system-helper";
import { ElMessage } from "element-plus";
export default {
  name: "overviewActiveStatistics",
  data () {
    return {
      loading: false,
      // 查询条件
      inquire: {
        time: [],
      },
      // 表格
      tableData: [],
      // 分页
      total: 0, //总页数
      currentPage: 1, //页码
      pageSize: 20, //条数
      //   内表格
      detailsDialog: false,
      detailsTitle: "金币明细",
      tableDataIn: [],
    };
  },
  created () {
    this.getData();
  },
  methods: {
    // 查询
    getData () {
      this.loading = true;
      dauPage({
        page: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.tableData = res.data.rows;
          this.loading = false;
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 详情
    edi (res, type) {
      var jsonArr =
        // type == 0
        //   ? res.totalDiamondDetail
        //   : type == 1
        //   ? res.enDomainDetail
        //   : type == 2
        //   ? res.arDomainDetail
        //   : type == 4
        //   ? res.zhDomainDetail
        //   : type == 8
        //   ? res.trDomainDetail
        //   : `"[""]"`;
        (this.tableDataIn = JSON.parse(res));
      this.detailsDialog = true;
    },
    formatPercentage (value) {
      return parseFloat((value * 100).toFixed(2));
    },
    // 分页导航
    handleSizeChange () {
      this.getData();
    },
    handleCurrentChange () {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.outer {
  padding-top: 20px;
  background: #ecf0f5;
  border-top: 3px solid #d2d6de;
  .demonstration {
    margin-right: 20px;
  }
  .inquire {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    float: left;
    margin-right: 20px;
  }
  .search {
    width: 100%;
    height: 41px;
    .searchLeft,
    .searchRight {
      width: 20%;
      float: left;
      span {
        margin-right: 10px;
      }
      .input {
        width: 75%;
      }
    }
  }
  .buttonBox {
    margin-top: 10px;
  }
  .authorityBox {
    .authoritySpan {
      margin-right: 20px;
    }
    .authorityInpput {
      width: 50%;
    }
  }
  .dialogTableVisibleBut {
    margin: -25px 0 20px 0px;
  }
}
</style>