gaochun_museum/src/components/collectionList/index.vue

<template>
  <div class="hot-layout">
    <div class="h-txt theme-color1">文物数据总览
      <el-button @click="exportXls" style="float:right" type="primary" size="mini">导出文物</el-button>
    </div>
    <div class="hot-table">
      <ul class="hot-header">
          <li><span>文物名称</span></li>
          <li><span>文物类别</span></li>
          <li><span>展示类别</span></li>
          <li><span>点赞数</span></li>
          <li><span>下载数</span></li>
          <li><span>搜索数</span></li>
      </ul>
      <div class="list-con" v-if="dataTable.length>0">
        <ul class="content" v-for="(item,i) in dataTable" :key="i">
          <li><span>{{item['name']}}</span></li>
          <li><span>{{item['typeName']}}</span></li>
          <li><span>{{item['typeName']}}</span></li>
          <li><span>{{item['likeNum']}}</span></li>
          <li><span>{{item['downloadNum']}}</span></li>
          <li><span>{{item['searchNum']}}</span></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataTable: []
    }
  },
  methods: {
    async getDate () {
      let result = await this.$http.post('/statistics/collectionTotal')
      this.dataTable = result.data
    },
    async exportXls () {
      let result = await this.$http({
        method: 'post',
        url: '/statistics/exportCollectionTotal',
        responseType: 'arraybuffer'
      })
      const url = window.URL.createObjectURL(new Blob([result], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', '文物数据总览.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  },
  mounted () {
    this.getDate()
  }
}
</script>

<style scoped>
.hot-layout{
  position: relative;
  height: 100%;
}
.h-txt{
  width: 100%;
  position: absolute;
  padding: 1.5rem;
  font-weight: bold;
}
.hot-table{
  padding: 60px 1.5rem 0;
}
.hot-table .hot-header{
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.hot-table .hot-header li{
  flex: 1;
  font-size: 14px;
  color: rgba(0, 0, 0, .38);
  text-align: center;
  font-weight: bold;
}

.hot-table .hot-header li span{
  display: inline-block;
  margin: 0 auto;
}

.list-con{
  width: 100%;
  height: 290px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 0;
}
.content{
  width: 100%;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f5f5f5;
  line-height: 2;
}

.content li{
  flex: 1;
  font-size: 14px;
  color: rgba(0, 0, 0, .38);
  text-align: center;
  font-weight: bold;
}

.content li:first-of-type{
  color: #000;
}

.content li span{
  display: inline-block;
  margin: 0 auto;
}

</style>