stats.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="活动标题" prop="name">
  5. <el-input
  6. v-model="queryParams.name"
  7. placeholder="请输入活动标题"
  8. clearable
  9. size="small"
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="日期" prop="date">
  14. <el-date-picker
  15. v-model="queryParams.date"
  16. type="datetimerange"s
  17. range-separator="至"
  18. start-placeholder="开始日期"
  19. end-placeholder="结束日期"
  20. value-format="yyyy-MM-dd"
  21. clearable
  22. size="small"
  23. />
  24. </el-form-item>
  25. <el-form-item>
  26. <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  27. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  28. </el-form-item>
  29. </el-form>
  30. <el-table v-loading="loading" :data="list" border>
  31. <el-table-column label="活动标题" align="center" prop="title" />
  32. <el-table-column label="首页浏览量" align="center" prop="homeViews" />
  33. <el-table-column label="视频区点击量" align="center" prop="videoClick" />
  34. <el-table-column label="问诊区点击量" align="center" prop="doctorClick"/>
  35. <el-table-column label="产品区点击量" align="center" prop="goodsClick" />
  36. </el-table>
  37. <pagination
  38. v-show="total>0"
  39. :total="total"
  40. :page.sync="queryParams.pageNum"
  41. :limit.sync="queryParams.pageSize"
  42. @pagination="getList"
  43. />
  44. </div>
  45. </template>
  46. <script>
  47. import { list } from '@/api/his/promotionalActiveLog'
  48. export default {
  49. name: 'promotionalActiveStats',
  50. data() {
  51. return {
  52. showSearch: true,
  53. loading: false,
  54. queryParams: {
  55. pageNum: 1,
  56. pageSize: 10,
  57. name: null,
  58. date: null,
  59. },
  60. total: 0,
  61. list: null,
  62. }
  63. },
  64. created() {
  65. this.handleQuery()
  66. },
  67. methods: {
  68. handleQuery() {
  69. this.queryParams.pageNum = 1;
  70. this.getList();
  71. },
  72. resetQuery() {
  73. this.queryParams = {
  74. pageNum: 1,
  75. pageSize: 10,
  76. name: null,
  77. }
  78. this.handleQuery()
  79. },
  80. getList() {
  81. this.loading = true
  82. const params = {
  83. ...this.queryParams,
  84. startTime: this.queryParams.date && this.queryParams.date[0],
  85. endTime: this.queryParams.date && this.queryParams.date[1],
  86. }
  87. list(params).then(response => {
  88. this.list = response.rows
  89. this.total = response.total
  90. this.loading = false
  91. })
  92. },
  93. }
  94. }
  95. </script>
  96. <style scoped>
  97. </style>