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%" @click="gotopage('valueAddedConfig','','')">
				<div class="title">增值服务配置</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.allIncreNum}}</div>
							<div class="title">总配置数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.onIncreNum}}</div>
							<div class="title">有效配置数量</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.offIncreNum}}</div>
							<div class="title">无效配置数量</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mode" style="max-width:14%" @click="gotopage('extendedWarrantyWork','','')">
				<div class="title">理赔工单统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.lpOrderNumber}}</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"  @click="gotopage('orderSettleManag','待审核数量','WAIT','SELF')">
						<div class="text">
							<div class="num">{{collectData.waitLineNum}}</div>
							<div class="title">待审核数量</div>
						</div>
					</div>
					<div class="tab"  @click="gotopage('orderSettleManag','审核通过数量','OK','SELF')">
						<div class="text">
							<div class="num">{{collectData.okLineOrderNum}}</div>
							<div class="title">审核通过数量</div>
						</div>
					</div>
					<div class="tab"  @click="gotopage('orderSettleManag','审核失败数量','FAIL','SELF')">
						<div class="text">
							<div class="num">{{collectData.failLineOrderNum}}</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" @click="gotopage('orderSettleManag','已支付数量','PAID','ONLINE')">
						<div class="text">
							<div class="num">{{collectData.paidOnLineOrderNum}}</div>
							<div class="title">已支付数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('orderSettleManag','待支付数量','WAIT','ONLINE')">
						<div class="text">
							<div class="num">{{collectData.waitOnLineOrderNum}}</div>
							<div class="title">待支付数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('orderSettleManag','已退款数量','REFUND','ONLINE')">
						<div class="text">
							<div class="num">{{collectData.refundOnLineOrderNum}}</div>
							<div class="title">已退款数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('orderSettleManag','已过期数量','EXPIRE','ONLINE')">
						<div class="text">
							<div class="num">{{collectData.endOnLineOrderNum}}</div>
							<div class="title">已过期数量</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('orderSettleManag','已取消数量','CANCEL','ONLINE')">
						<div class="text">
							<div class="num">{{collectData.cancelOnLineOrderNum}}</div>
							<div class="title">已取消数量</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    <div class="container_bottom">
			<div class="chart">
				<div class="flex_asb">
					<div class="title">增值服务数据看板</div>
          <el-date-picker
            v-model="times"
            @change="refreshData" 
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
				</div>
				<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: {},
        times: []
			}
		},
		created() {
      this.refreshData()
		},
		methods: {
      refreshData(){
        dataCountIncreCount({
          startTime: this.times?.[0],
          endTime: this.times?.[1]
        }).then(res=>{
          this.collectData = res.data
          this.drawChat(res.data.lineList, res.data.onLineList, this.times)
        })
      },
      gotopage(name,pageName,pageCode,type){
        if(pageCode){
          this.$router.push({
            name: name,
            params: {
              pageName: pageName,
              pageType: type || '-',
              pageCode: pageCode,
            },
          })
        }else{
          this.$router.push({
            name: name
          })
        }
      },
      drawChat(data1, data2, times = []) {
				this.$echarts.init(this.$refs.chart).setOption({
          grid: {
            left: 30,   
            right: 10,  
            top: 40,    
            bottom: 50, 
          },
          tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['新增线下订单','新增线上订单']
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.getDaysBetweenDates(times?.[0],times?.[1])
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '新增线下订单',
							data: data1,
							type: 'line',
							smooth: true,
						},
						{
							name: '新增线上订单',
							data: data2,
							type: 'line',
							smooth: true,
						}
					]
				})
			},
      getDaysBetweenDates(startDate, endDate) {
        if(!startDate || !endDate){
          // 获取今天的日期
          var today = new Date();
          // 创建一个数组来存储日期
          var dateList = [];
          // 循环获取十五天内的日期
          for (var i = 0; i < 15; i++) {
              // 将日期添加到数组中
              dateList.push(new Date(today.getFullYear(), today.getMonth(), today.getDate() + i).toLocaleDateString());
          }
          return dateList
        }
        var dateArray = [];
        var currentDate = new Date(startDate);
        var jieshu = new Date(endDate);
        // 循环获取开始时间和结束时间之间的日期
        while (currentDate <= jieshu) {
            // 将日期添加到数组中
            dateArray.push(new Date(currentDate).toLocaleDateString());
            // 将当前日期增加一天
            currentDate.setDate(currentDate.getDate() + 1);
        }
        return dateArray;
      }
		}
	}
</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>