open-platform-admin-ui/src/views/bz/monitor/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/16527@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="100" :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/16528@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="100" :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/16530@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="100" :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="100" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :xs="24" :sm="24" :lg="18">
        <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-tab-pane label="车流趋势" name="third" />
            </el-tabs>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="bz-card">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>交通监测</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <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-row>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16531@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>￥25863.50</p>
                    <p>景区消费</p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16536@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>￥25863.50</p>
                    <p>文化场馆</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16537@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>￥25863.50</p>
                    <p>餐馆消费</p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16538@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>￥25863.50</p>
                    <p>体育场馆消费</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </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-row>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16541@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>24685</p>
                    <p>好评</p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16542@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>23</p>
                    <p>差评</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16540@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>12</p>
                    <p>五星餐厅</p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16539@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>256</p>
                    <p>四星餐厅</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </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-row>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16546@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>24685</p>
                    <p>应急事件</p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16547@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>23</p>
                    <p>应急预案</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-row>
                  <el-col span="10">
                    <el-image src="/images/16545@2x.png" class="image" />
                  </el-col>
                  <el-col span="14">
                    <p>12</p>
                    <p>已处理应急事件</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </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>