zfire-newmall-admin/src/views/valueAddedService/home/index.vue

<template>
	<div class="dashboard_container">
		<div class="refresh" @click="refreshData">
			<span style="color: #1d82ff;">刷新数据</span>
			<i class="el-icon-refresh-left" style="color: #1d82ff;"></i>
		</div>
		<div class="flex">
			<div class="mode" style="max-width:33%">
				<div class="title">增值服务配置</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherCount}}</div>
							<div class="title">总配置数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">有效配置数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">无效配置数量</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mode" style="max-width:14%">
				<div class="title">理赔工单统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherCount}}</div>
							<div class="title">理赔工单数量</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    <div class="flex">
			<div class="mode" >
				<div class="title">线下订单统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherCount}}</div>
							<div class="title">待审核数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">审核通过数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">审核失败数量</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mode" style="min-width:66.33%">
				<div class="title">线上订单统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherCount}}</div>
							<div class="title">已支付数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">待支付数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">已退款数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">已过期数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitGatherAmount}}</div>
							<div class="title">已取消数量</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    <div class="container_bottom">
			<div class="chart">
				<div ref="chart" style="width: 100%;height: 330px;"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {dataCountIncreCount} from "@/api/dataCount.js"
	export default {
		data() {
			return{
				collectData: {
          waitGatherCount: 0,
          waitGatherAmount: 0
        }
			}
		},
		created() {
      this.refreshData()
		},
		methods: {
      refreshData(){
        dataCountIncreCount().then(res=>{
          console.log(res,"999")
        })
      }
		}
	}
</script>

<style scoped lang="scss">
	.dashboard_container {
		background: #f5f5f5;
		padding: 20px;
		min-height: calc(100vh - 86px);
		box-sizing: border-box;

		.refresh {
			text-align: right;
			margin-bottom: 10px;

			span {
				cursor: pointer;
			}

			i {
				font-weight: bold;
				margin-left: 4px;
				cursor: pointer;
			}
		}

		.flex {
			display: flex;
      margin-bottom: 10px;
		}

		.flex_asb {
			display: flex;
			justify-content: space-between;
		}

		.mode {
			flex: 1;
			padding: 10px;
			margin-right: 10px;
			background-color: #ffffff;
			border-radius: 10px;

			.title {
				font-weight: bold;
			}

			.head {
        padding-top: 12px!important;
        margin: 0 !important;
        margin-bottom: 0 !important;
			}

			.opacity {
				opacity: 0;
			}

			.tab {
				display: flex;
				align-items: center;
				flex: 1;
				cursor: pointer;

				.text {
					margin: 0 10px;

					.title {
						color: #999999;
						font-size: 12px;
						margin-top: 8px;
					}

					.num {
						font-size: 22px;
						font-weight: bold;
					}
				}

				.img {
					width: 46px;
					height: 46px;
					margin-left: 20px;
				}
			}

			.child {
				border-right: 1px solid #dddddd;

				.text {
					.title {
						margin-top: 8px;
						margin-bottom: 0;
					}
				}
			}

			.child:last-child {
				border-right: none;
			}
		}

		.mode:last-child {
			margin-right: 0;
		}

		.container_bottom {
			width: 100%;
			height: 350px;
			padding: 10px;
			background-color: #ffffff;
			margin-top: 10px;
			border-radius: 10px;
		}
	}
</style>