feats

package.json

@@ -19,6 +19,7 @@
     "codemirror": "^5.56.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.8.33",
+    "echarts": "^4.8.0",
     "element-ui": "2.13.2",
     "md5": "^2.3.0",
     "normalize.css": "7.0.0",

src/api/activity.js

@@ -54,3 +54,10 @@ export function saveVoteItems(activityId, data) {
     data
   }))
 }
+
+export function getVoteRank(activityId) {
+  return pureResponseData(request({
+    url: `/api/admin/activity/${activityId}/voteitem/rank`,
+    method: 'get'
+  }))
+}

src/components/ECharts/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div ref="echarts"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: () => {}
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      myChart: null
+    }
+  },
+
+  computed: {
+    config() {
+      return {
+        ...this.options,
+        dataset: {
+          ...(this.options.dataset || {}),
+          source: this.dataSource
+        }
+      }
+    }
+  },
+
+  watch: {
+    options(val) {
+      this.$nextTick(() => {
+        this.renderChart()
+      })
+    },
+    dataSource(val) {
+      this.$nextTick(() => {
+        this.renderChart()
+      })
+    },
+    loading(val) {
+      if (this.myChart) {
+        if (val) {
+          this.myChart.showLoading()
+        } else {
+          this.myChart.hideLoading()
+        }
+      }
+    },
+    show: {
+      handler(nw, od) {
+        if (this.myChart && !nw) {
+          this.destroyCharts()
+        } else if (nw && !od) {
+          this.renderChart()
+        }
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.renderChart()
+  },
+
+  beforeDestroy() {
+    this.destroyCharts()
+  },
+
+  methods: {
+    renderChart() {
+      const el = this.$refs.echarts
+      if (el && this.show) {
+        if (!this.myChart) {
+          this.myChart = echarts.init(el)
+        }
+        this.myChart.setOption(this.config)
+      }
+    },
+
+    destroyCharts() {
+      if (this.myChart) {
+        this.myChart.dispose()
+        this.myChart = null
+      }
+    }
+  }
+}
+</script>

src/components/Pagination/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="pagination">
+    <el-pagination
+      :current-page="config.current"
+      :page-size="config.size"
+      :total="total"
+      :page-sizes="sizeList"
+      :layout="layStr"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: Number,
+      default: 10
+    },
+    current: {
+      type: Number,
+      default: 1
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    layout: {
+      type: Array,
+      default: () => ['total', 'sizes', 'prev', 'pager', 'next']
+    },
+    sizeList: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    }
+  },
+
+  data() {
+    return {
+      config: {
+        current: this.current,
+        size: this.size
+      }
+    }
+  },
+
+  computed: {
+    layStr() {
+      return this.layout.join(',')
+    }
+  },
+
+  methods: {
+    handleSizeChange(v) {
+      this.config.size = v
+      this.$emit('update:size', v)
+      this.$emit('change', { current: this.config.current, size: v })
+    },
+    handleCurrentChange(v) {
+      this.config.current = v
+      this.$emit('update:current', v)
+      this.$emit('change', { current: v, size: this.config.size })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination {
+  padding: 16px;
+  & > div {
+    float: right;
+  }
+
+  &::after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+</style>

src/main.js

@@ -17,6 +17,9 @@ import '@/permission' // permission control
 
 import '@/utils/filters' // 注册全局过滤器
 
+// 全局组件
+Vue.component('pagination', () => import('@/components/Pagination'))
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/activity/Detail.vue

@@ -12,6 +12,9 @@
       <el-tab-pane label="投票设置" name="vote">
         <voteedit :activity-id="detail.activityId" />
       </el-tab-pane>
+      <el-tab-pane label="投票排行" name="rank">
+        <voterank :show="showRank" :activity-id="detail.activityId" style="width: 60vw; min-height: 400px" />
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -23,7 +26,8 @@ export default {
   components: {
     activity: () => import('./components/Detail'),
     enrollList: () => import('./components/EnrollList'),
-    voteedit: () => import('./components/VoteEdit')
+    voteedit: () => import('./components/VoteEdit'),
+    voterank: () => import('./components/VoteRank')
   },
 
   props: {
@@ -36,11 +40,17 @@ export default {
   data() {
     return {
       id: null,
-      detail: null,
+      detail: {},
       currentTab: 'detail'
     }
   },
 
+  computed: {
+    showRank() {
+      return this.currentTab === 'rank'
+    }
+  },
+
   created() {
     const { id } = this.$route.query
     if (id) {

src/views/activity/List.vue

@@ -36,17 +36,12 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="pagination">
-      <el-pagination
-        :current-page="pagination.current"
-        :page-size="pagination.size"
-        :total="pagination.total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
+    <pagination
+      :total="page.total"
+      :size.sync="page.size"
+      :current.sync="page.current"
+      @change="handlePageChange"
+    ></pagination>
   </div>
 </template>
 
@@ -55,6 +50,7 @@ import { getActivityList } from '@/api/activity'
 
 export default {
   components: {
+    // pagination: () => import('@/components/Pagination'),
     FilterForm: () => import('./components/FilterForm')
   },
 
@@ -98,7 +94,7 @@ export default {
       list: null,
       listLoading: true,
       detailRouter: null,
-      pagination: {
+      page: {
         total: 0,
         size: 10,
         current: 1
@@ -119,15 +115,11 @@ export default {
       getActivityList({
         ...this.filters,
         typeId: this.typeId,
-        pageNum: this.pagination.current,
-        pageSize: this.pagination.size
+        pageNum: this.page.current,
+        pageSize: this.page.size
       }).then(res => {
         this.list = res.records
-        this.pagination = {
-          total: res.total,
-          size: res.size,
-          current: res.current
-        }
+        this.page.total = res.total
         this.listLoading = false
       })
     },
@@ -147,12 +139,9 @@ export default {
       })
     },
 
-    handleSizeChange(size) {
-      this.pagination.size = size
-    },
-
-    handleCurrentChange(current) {
-      this.pagination.current = current
+    handlePageChange({ current, size }) {
+      this.page.current = current
+      this.page.size = size
       this.fetchData()
     },
 
@@ -175,11 +164,4 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-
-.pagination {
-  padding: 16px;
-  & > div {
-    float: right;
-  }
-}
 </style>

src/views/activity/components/EnrollList.vue

@@ -27,17 +27,12 @@
       <el-table-column label="昵称" prop="personNickname" />
       <el-table-column label="电话" prop="phone" />
     </el-table>
-    <div class="pagination">
-      <el-pagination
-        :current-page="pagination.current"
-        :page-size="pagination.size"
-        :total="pagination.total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
+    <pagination
+      :total="page.total"
+      :size.sync="page.size"
+      :current.sync="page.current"
+      @change="handlePageChange"
+    ></pagination>
   </div>
 </template>
 
@@ -52,7 +47,7 @@ export default {
     return {
       list: null,
       listLoading: true,
-      pagination: {
+      page: {
         total: 0,
         size: 10,
         current: 1
@@ -71,36 +66,20 @@ export default {
       this.listLoading = true
       getEnrollList({
         activityId: this.activityId,
-        pageNum: this.pagination.current,
-        pageSize: this.pagination.size
+        pageNum: this.page.current,
+        pageSize: this.page.size
       }).then(res => {
         this.list = res.records
-        this.pagination = {
-          total: res.total,
-          size: res.size,
-          current: res.current
-        }
+        this.page.total = res.total
         this.listLoading = false
       })
     },
 
-    handleSizeChange(size) {
-      this.pagination.size = size
-    },
-
-    handleCurrentChange(current) {
-      this.pagination.current = current
+    handlePageChange({ current, size }) {
+      this.page.current = current
+      this.page.size = size
       this.fetchData()
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.pagination {
-  padding: 16px;
-  & > div {
-    float: right;
-  }
-}
-</style>

src/views/activity/components/VoteRank.vue

@@ -0,0 +1,116 @@
+<template>
+  <echarts
+    :show="show"
+    :options="options"
+    :data-source="source"
+    :loading="loading"></echarts>
+</template>
+
+<script>
+import { getVoteRank } from '@/api/activity'
+
+export default {
+  components: {
+    echarts: () => import('@/components/ECharts')
+  },
+
+  props: {
+    activityId: {
+      type: Number,
+      default: 0
+    },
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      defaultOpt: {
+        title: {
+          text: '投票结果排行'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        dataset: {},
+        xAxis: { name: '票数' },
+        yAxis: {
+          type: 'category',
+          inverse: true
+        },
+        visualMap: {
+          orient: 'horizontal',
+          left: 'center',
+          min: 0,
+          max: 100,
+          text: ['高', '低'],
+          // 映射 score
+          dimension: 1,
+          splitNumber: 5,
+          color: ['#d94e5d', '#eac736', '#50a3ba']
+        },
+        series: [
+          {
+            type: 'bar',
+            encode: {
+              x: 'score',
+              y: 'item'
+            }
+          }
+        ]
+      },
+      // source 按照从大到小排序
+      source: ['item', 'score'],
+      loading: false
+    }
+  },
+
+  computed: {
+    options() {
+      const min = this.source.length ? this.source[this.source.length - 1][1] : 0
+      const max = this.source.length ? this.source[1][1] : 0
+
+      return {
+        ...this.defaultOpt,
+        visualMap: {
+          ...this.defaultOpt.visualMap,
+          min,
+          max
+        }
+      }
+    }
+  },
+
+  watch: {
+    activityId(val) {
+      if (val) {
+        this.getVoteResult()
+      }
+    }
+  },
+
+  created() {
+    this.getVoteResult()
+  },
+
+  methods: {
+    getVoteResult() {
+      if (this.activityId) {
+        this.loading = true
+        getVoteRank(this.activityId).then(res => {
+          this.loading = false
+
+          if (res && res.length) {
+            // 因为使用了 visualMap
+            // source 子元素必须是数组
+            this.source = [['item', 'score']].concat(res.map(x => [x.item, x.score]))
+          }
+        })
+      }
+    }
+  }
+
+}
+</script>