open-platform-admin-ui/src/views/bz/resourceAnalysis/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/api/docs`)">
          <div class="card-panel-icon-wrapper icon-people">
            <el-image src="/images/16505@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              景点数量
            </div>
            <count-to :start-val="0" :end-val="60" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/appKey/index`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/16506@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              文旅线路
            </div>
            <count-to :start-val="0" :end-val="185" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/16507@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              酒店
            </div>
            <count-to :start-val="0" :end-val="326" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/statistics/file`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/16508@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              停车位
            </div>
            <count-to :start-val="0" :end-val="4416" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/api/docs`)">
          <div class="card-panel-icon-wrapper icon-people">
            <el-image src="/images/16510@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              体育馆
            </div>
            <count-to :start-val="0" :end-val="5" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/appKey/index`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/16509@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              餐馆
            </div>
            <count-to :start-val="0" :end-val="1586" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/16511@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              娱乐场所
            </div>
            <count-to :start-val="0" :end-val="18" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="gotoPage(`/statistics/file`)">
          <div class="card-panel-icon-wrapper icon-message">
            <el-image src="/images/16529@2x.png" class="card-panel-icon" style="height: 60px" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              非物质文化遗产
            </div>
            <count-to :start-val="0" :end-val="4" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="bz-card">
      <el-card shadow="never">
        <el-tabs v-model="activeName">
          <el-tab-pane label="景点访客量" name="first" />
          <el-tab-pane label="客流趋势" name="second" />
        </el-tabs>
      </el-card>
    </div>
    <div style="height: 32px" />
    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="bz-card">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>酒店访客量统计</span>
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">
        <div class="bz-card">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>餐馆访客量统计</span>
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :lg="8">

        <div class="bz-card">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>各景点访客量排行</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: { CountTo },
  data() {
    return {
      activeName: 'first'
    }
  },
  computed: {},
  created() {
  },
  mounted() {
  },
  methods: {}
}
</script>