|
@@ -0,0 +1,220 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-row :gutter="40" class="panel-group">
|
|
|
|
+ <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
|
|
|
+ <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
|
|
|
+ <div class="card-panel-icon-wrapper icon-people">
|
|
|
|
+ <svg-icon icon-class="anquan" class-name="card-panel-icon"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-panel-description">
|
|
|
|
+ <div class="card-panel-text">
|
|
|
|
+ 安全
|
|
|
|
+ <el-badge v-if="safeWarnNum > 0" :value="safeWarnNum" :max="99" class="item" >
|
|
|
|
+ </el-badge>
|
|
|
|
+ </div>
|
|
|
|
+ <count-to :start-val="0" :end-val="safeNum" :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="handleSetLineChartData('messages')">
|
|
|
|
+ <div class="card-panel-icon-wrapper icon-message">
|
|
|
|
+ <svg-icon icon-class="huanbao" class-name="card-panel-icon"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-panel-description">
|
|
|
|
+ <div class="card-panel-text">
|
|
|
|
+ 环保
|
|
|
|
+ <el-badge v-if="envWarnNum > 0" :value="envWarnNum" :max="99" class="item" >
|
|
|
|
+ </el-badge>
|
|
|
|
+ </div>
|
|
|
|
+ <count-to :start-val="0" :end-val="envNum" :duration="3000" 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="handleSetLineChartData('purchases')">
|
|
|
|
+ <div class="card-panel-icon-wrapper icon-money">
|
|
|
|
+ <svg-icon icon-class="xiaofang" class-name="card-panel-icon"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-panel-description">
|
|
|
|
+ <div class="card-panel-text">
|
|
|
|
+ 消防
|
|
|
|
+ <el-badge v-if="fireWarnNum > 0" :value="fireWarnNum" :max="99" class="item" >
|
|
|
|
+ </el-badge>
|
|
|
|
+ </div>
|
|
|
|
+ <count-to :start-val="0" :end-val="fireNum" :duration="3200" 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="handleSetLineChartData('shoppings')">
|
|
|
|
+ <div class="card-panel-icon-wrapper icon-shopping">
|
|
|
|
+ <svg-icon icon-class="weisheng" class-name="card-panel-icon"/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-panel-description">
|
|
|
|
+ <div class="card-panel-text">
|
|
|
|
+ 卫生
|
|
|
|
+ <el-badge v-if="healthWarnNum > 0" :value="healthWarnNum" :max="99" class="item" >
|
|
|
|
+ </el-badge>
|
|
|
|
+ </div>
|
|
|
|
+ <count-to :start-val="0" :end-val="healthNum" :duration="3600" class="card-panel-num"/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import CountTo from 'vue-count-to'
|
|
|
|
+import {countNum} from "@/api/common/homedataCbps";
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ components: {
|
|
|
|
+ CountTo
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ healthNum: 0,
|
|
|
|
+ envNum: 0,
|
|
|
|
+ fireNum: 0,
|
|
|
|
+ safeNum: 0,
|
|
|
|
+ healthWarnNum: 0,
|
|
|
|
+ envWarnNum: 0,
|
|
|
|
+ fireWarnNum: 0,
|
|
|
|
+ safeWarnNum: 0,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ countNum().then(res => {
|
|
|
|
+ this.healthNum = res.data.healthNum;
|
|
|
|
+ this.envNum = res.data.envNum;
|
|
|
|
+ this.fireNum = res.data.fireNum;
|
|
|
|
+ this.safeNum = res.data.safeNum;
|
|
|
|
+
|
|
|
|
+ this.healthWarnNum = res.data.healthWarnNum;
|
|
|
|
+ this.envWarnNum = res.data.envWarnNum;
|
|
|
|
+ this.fireWarnNum = res.data.fireWarnNum;
|
|
|
|
+ this.safeWarnNum = res.data.safeWarnNum;
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handleSetLineChartData(type) {
|
|
|
|
+ this.$emit('handleSetLineChartData', type)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.panel-group {
|
|
|
|
+ margin-top: 18px;
|
|
|
|
+
|
|
|
|
+ .card-panel-col {
|
|
|
|
+ margin-bottom: 32px;
|
|
|
|
+ }
|
|
|
|
+ .item {
|
|
|
|
+ margin-bottom: 0px;
|
|
|
|
+ margin-top: -40px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card-panel {
|
|
|
|
+ height: 108px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ position: relative;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ color: #666;
|
|
|
|
+ background: #fff;
|
|
|
|
+ box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
|
|
|
+ border-color: rgba(0, 0, 0, .05);
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ .card-panel-icon-wrapper {
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-people {
|
|
|
|
+ background: #40c9c6;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-message {
|
|
|
|
+ background: #36a3f7;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-money {
|
|
|
|
+ background: #f4516c;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-shopping {
|
|
|
|
+ background: #34bfa3
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-people {
|
|
|
|
+ color: #40c9c6;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-message {
|
|
|
|
+ color: #36a3f7;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-money {
|
|
|
|
+ color: #f4516c;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon-shopping {
|
|
|
|
+ color: #34bfa3
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card-panel-icon-wrapper {
|
|
|
|
+ float: left;
|
|
|
|
+ margin: 14px 0 0 14px;
|
|
|
|
+ padding: 16px;
|
|
|
|
+ transition: all 0.38s ease-out;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card-panel-icon {
|
|
|
|
+ float: left;
|
|
|
|
+ font-size: 48px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card-panel-description {
|
|
|
|
+ float: right;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ margin: 26px;
|
|
|
|
+ margin-left: 0px;
|
|
|
|
+
|
|
|
|
+ .card-panel-text {
|
|
|
|
+ line-height: 18px;
|
|
|
|
+ color: rgba(0, 0, 0, 0.45);
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
+ width: 90px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card-panel-num {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@media (max-width: 550px) {
|
|
|
|
+ .card-panel-description {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card-panel-icon-wrapper {
|
|
|
|
+ float: none !important;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ margin: 0 !important;
|
|
|
|
+
|
|
|
|
+ .svg-icon {
|
|
|
|
+ display: block;
|
|
|
|
+ margin: 14px auto !important;
|
|
|
|
+ float: none !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|