|
@@ -0,0 +1,296 @@
|
|
|
+<template>
|
|
|
+ <div class="yrows">
|
|
|
+ <!--结算单-->
|
|
|
+ <div v-if="row == '结算单'">
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout" style="padding-left: 0px">
|
|
|
+ <div class="rint" style="background-color: #faf7fe">
|
|
|
+ <div class="icon" style="color: #8642df"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt omit" title="结算人数(人)">结算人数(人)</div>
|
|
|
+ <div class="rdesc">{{ cdata.peoples || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="background-color: #fffcf7">
|
|
|
+ <div class="icon" style="color: #fab22e"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt omit" title="结算金额(元)">结算金额(元)</div>
|
|
|
+ <div class="rdesc">{{ cdata.money || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="background-color: #f7fbff">
|
|
|
+ <div class="icon" style="color: #489afd"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt omit" title="发放业务费(元)">发放业务费(元)</div>
|
|
|
+ <div class="rdesc">{{ cdata.realMoney || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr">
|
|
|
+ <div class="rout" style="padding-right: 0px">
|
|
|
+ <div class="rint" style="background-color: #fff7f9">
|
|
|
+ <div class="icon" style="color: #fa5376"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt omit" title="总服务费(元)">总服务费(元)</div>
|
|
|
+ <div class="rdesc">{{ cdata.serviceMoney || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--待办事项-->
|
|
|
+ <div v-if="row == '待办事项'">
|
|
|
+ <div class="yr" style="width: 33.333%">
|
|
|
+ <router-link to="/square/recharge?state=0">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="text-align: center; cursor: pointer">
|
|
|
+ <span class="icon" style="float: none; color: #2196f3"></span>
|
|
|
+ <span class="bages">{{cdata.recharge>100?'99+':cdata.recharge||0}}</span>
|
|
|
+ <div class="ctt">充值审核</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 33.333%">
|
|
|
+ <router-link to="/square/out?state=0">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="text-align: center; cursor: pointer">
|
|
|
+ <span class="icon" style="float: none; color: #2196f3"></span>
|
|
|
+ <span class="bages">{{cdata.moneyOut>100?'99+':cdata.moneyOut||0}}</span>
|
|
|
+ <div class="ctt">提现审核</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 33.333%">
|
|
|
+ <router-link to="/square/pay?give=1">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="text-align: center; cursor: pointer">
|
|
|
+ <span class="icon" style="float: none; color: #2196f3"></span>
|
|
|
+ <span class="bages">{{cdata.gives>100?'99+':cdata.gives||0}}</span>
|
|
|
+ <div class="ctt">发放审核</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="row == '统计概览'">
|
|
|
+ <div class="yr" style="width: 50%">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="background-color: #f7fbff">
|
|
|
+ <div class="icon" style="color: #489afd"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">企业总数</div>
|
|
|
+ <div class="rdesc">{{ cdata.companys || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 50%">
|
|
|
+ <div class="rout" style="padding-right: 0px">
|
|
|
+ <div class="rint" style="background-color: #fffcf7">
|
|
|
+ <div class="icon" style="color: #fab22e"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">使用人数</div>
|
|
|
+ <div class="rdesc">{{ cdata.users || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 50%">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="background-color: #faf7fe">
|
|
|
+ <div class="icon" style="color: #8642df"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">签约总数</div>
|
|
|
+ <div class="rdesc">{{ cdata.contracts || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 50%">
|
|
|
+ <div class="rout" style="padding-right: 0px">
|
|
|
+ <div class="rint" style="background-color: #fff7f9">
|
|
|
+ <div class="icon" style="color: #fa5376"></div>
|
|
|
+ <div class="rcon">
|
|
|
+ <div class="rtt">接包总数</div>
|
|
|
+ <div class="rdesc">{{ cdata.packages || 0 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="row == '快捷菜单'">
|
|
|
+ <div class="yr" style="width: 20%" v-for="(item, index) in menu" :key="item.id" v-hasPermi="[item.hasPermi]">
|
|
|
+ <router-link :to="item.url">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="text-align: center; cursor: pointer">
|
|
|
+ <span class="icon" :style="{ float: 'none', color: item.color }" v-html="item.icon"></span>
|
|
|
+ <div class="ctt">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 20%">
|
|
|
+ <router-link to="/notice">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="text-align: center; cursor: pointer">
|
|
|
+ <span class="icon" style="float: none; color: #2196f3"></span>
|
|
|
+ <div class="ctt">通知公告</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ <div class="yr" style="width: 20%">
|
|
|
+ <router-link to="/feedback">
|
|
|
+ <div class="rout">
|
|
|
+ <div class="rint" style="text-align: center; cursor: pointer">
|
|
|
+ <span class="icon" style="float: none; color: #ff5722"></span>
|
|
|
+ <div class="ctt">问题反馈</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ row: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ cdata: {
|
|
|
+ type: Object
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menu: [{
|
|
|
+ icon: '',
|
|
|
+ color: '#fab22e',
|
|
|
+ name: 'APP用户',
|
|
|
+ url: '/users',
|
|
|
+ hasPermi: 'work:user:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#1890ff',
|
|
|
+ name: '企业管理',
|
|
|
+ url: '/square/company',
|
|
|
+ hasPermi: 'work:company:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#9C27B0',
|
|
|
+ name: '充值管理',
|
|
|
+ url: '/square/recharge',
|
|
|
+ hasPermi: 'work:recharge:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#3F51B5',
|
|
|
+ name: '提现管理',
|
|
|
+ url: '/square/out',
|
|
|
+ hasPermi: 'work:out:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#FF9800',
|
|
|
+ name: '发放业务',
|
|
|
+ url: '/square/pay',
|
|
|
+ hasPermi: 'work:statement:pay'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#1890ff',
|
|
|
+ name: '用户管理',
|
|
|
+ url: '/system/user',
|
|
|
+ hasPermi: 'system:user:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#FFC107',
|
|
|
+ name: '角色管理',
|
|
|
+ url: '/system/role',
|
|
|
+ hasPermi: 'system:role:list'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: '',
|
|
|
+ color: '#9E9E9E',
|
|
|
+ name: '操作日志',
|
|
|
+ url: '/system/operlog',
|
|
|
+ hasPermi: 'monitor:operlog:list'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {}
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .yrows {
|
|
|
+ margin-top: 10px;
|
|
|
+ .yr {
|
|
|
+ float: left;
|
|
|
+ width: 25%;
|
|
|
+ .rout {
|
|
|
+ padding: 6px;
|
|
|
+ .rint {
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .icon {
|
|
|
+ float: left;
|
|
|
+ font-size: 30px;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ padding: 10px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ .bages {
|
|
|
+ position: absolute;
|
|
|
+ background-color: red;
|
|
|
+ color: white;
|
|
|
+ padding: 0px 5px 0px 5px;
|
|
|
+ border-radius: 40px;
|
|
|
+ text-align: center;
|
|
|
+ top: 2px
|
|
|
+ }
|
|
|
+ .rcon {
|
|
|
+ float: left;
|
|
|
+ padding-left: 12px;
|
|
|
+ width: calc(100% - 55px);
|
|
|
+ .rtt {
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .rdesc {
|
|
|
+ font-weight: bold;
|
|
|
+ padding-top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ctt {
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-top: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|