DadsCandy/snowy-admin-web/src/views/biz/statisty/total.vue

<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '20px' }" class="mb-2">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="门店" name="orgId">
						<a-tree-select
							v-model:value="searchFormState.orgId"
							show-search
							style="width: 100%"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择门店"
							allow-clear
							multiple
							tree-default-expand-all
							:tree-data="treeData"
							:field-names="{
								children: 'children',
								label: 'name',
								value: 'id'
							}"
							selectable="false"

						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="日期段" name="times">
						<a-range-picker
							style="width: 100%;"
							v-model:value="searchFormState.times"

							format="YYYY-MM-DD"
							:placeholder="['开始时间', '结束时间']"
							@change="onRangeChange"
						/>
					</a-form-item>
				</a-col>

				<a-col :span="6">
					<a-button type="primary" html-type="submit" @click="refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					<a-button @click="exportTotal">
						<template #icon>
							<export-outlined/>
						</template>
						导出
					</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-row>
		<a-col :span="8" style="margin-bottom: 10px;">
			<a-card style="height: 180px">
				<a-statistic title="消费金额" :value="consumerCount"/>
				<a-statistic title="订单数" :value="consumerOrderCount"/>
			</a-card>
		</a-col>
		<a-col :span="8" style="margin-bottom: 10px; margin-left: 20px">
			<a-card style="height: 180px">
				<a-statistic title="注册会员数" :value="userCount"/>
<!--				<a-statistic title="订单数" :value="rechargeOrderCount"/>-->
			</a-card>
		</a-col>
		<a-col :span="7" style="margin-bottom: 10px; margin-left: 20px;">
			<a-card style="height: 180px">
				<a-statistic title="账户余额" :value="accountBalance"/>
				<a-statistic title="代金券余额" :value="voucherBalance"/>
			</a-card>
		</a-col>
	</a-row>

	<a-card :bordered="false">

		<div style="display:flex;justify-content:space-between" id="totalDiv">
			<span id="totalSpan">
				<left-outlined :style="{fontSize:'13px',color:'#C9C9C9',cursor:'pointer'}" @click="prePage" v-show="leftFlag"/>
			</span>
			<span>
				<right-outlined style="width:1.5em;height:1.5em;color:#C9C9C9;cursor:pointer" @click="nextPage" v-show="rightFlag"/>
			</span>
		</div>


	</a-card>

<!--	<a-card :bordered="false" :body-style="{ 'padding-bottom': '20px' }" class="mb-2">
		<div id="main" style="height: 340px"></div>
	</a-card>-->

	<a-card :bordered="false" :body-style="{ 'padding-bottom': '20px' }" class="mb-2">
		<div id="main2" style="height: 340px"></div>
	</a-card>

	<a-card :bordered="false" :body-style="{ 'padding-bottom': '20px' }" class="mb-2">

		<a-table
		ref="table"
		:columns="columns4"
		:data-source = "data4"
		bordered
		:row-key="(record) => record.id"

		>
		</a-table>

	</a-card>


	<a-card :bordered="false">

			<a-tabs v-model:activeKey="activeKey" @change="clickTab(value)">
				<a-tab-pane key="1">
					<template #tab>
						<span>
						<red-envelope-outlined />
						消费列表
						</span>
					</template>
					<div id="printForm1">
						<a-table
							ref="table"
							:columns="columns1"
							:data-source = "data1"
							bordered
							:row-key="(record) => record.id"

						>
						<template #bodyCell="{ column, record }">
							<template v-if="column.dataIndex === 'consumptionOperate'">
								<a-tag
									:color="
							record.consumptionOperate === '1'
								? 'orange'
								: record.consumptionOperate === '2'
								  ? 'green'
								  : record.consumptionOperate === '3'
								    ? 'cyan'
								      : 'purple'
						"
								>
									{{ $TOOL.dictTypeData('consumption_operate', record.consumptionOperate) }}
								</a-tag>
							</template>
						</template>
						</a-table>
					</div>
				</a-tab-pane>
				<a-tab-pane key="2">
					<template #tab>
						<span>
						<HddOutlined />
						优惠券列表
						</span>
					</template>
					<div id="printForm2">
						<a-table
							ref="table"
							:columns="columns2"
							:data-source = "data2"
							bordered
							:row-key="(record) => record.id"

						>
							<template #bodyCell="{ column, record }">
								<template v-if="column.dataIndex === 'couponStatus'">
									<a-tag
										:color="
							record.couponStatus === '0'
								? '#87d068'
								: record.couponStatus === '1'
								  ? '#f50'
								      : '#f50'
						"
									>
										{{ $TOOL.dictTypeData('is_destroy', record.couponStatus) }}
									</a-tag>
								</template>
							</template>
						</a-table>
					</div>
				</a-tab-pane>
				<a-tab-pane key="3">
					<template #tab>
						<span>
						<ScheduleOutlined />
						会员列表
						</span>
					</template>
					<div id="printForm3">
						<a-table
							ref="table"
							:columns="columns3"
							:data-source = "data3"
							bordered
							:row-key="(record) => record.id"

						>
						</a-table>
					</div>
				</a-tab-pane>

			</a-tabs>

	</a-card>

</template>

<script setup name="customerinfo">
	import bizOrgApi from '@/api/biz/bizOrgApi'
	import downloadUtil from '@/utils/downloadUtil'
	import consumptionRecordApi from '@/api/biz/consumptionRecordApi'
	import bizCouponRecordApi from '@/api/biz/bizCouponRecordApi'
	import bizUserApi from '@/api/biz/bizUserApi'
	import { onMounted } from 'vue'
	import orgApi from '@/api/biz/bizOrgApi'
	import * as echarts from 'echarts'

	//消费
	const consumerCount = ref(0)
	const consumerOrderCount = ref(0)
	//充值统计数量
	const rechargeCount = ref(0)
	const rechargeOrderCount = ref(0)
	//会员
	const userCount = ref(0)
	//账户余额&代金券余额
	const accountBalance = ref(0)
	const voucherBalance = ref(0)

	const treeData = ref([])
	const activeKey = ref('1');

	const searchFormRef = ref()
	let searchFormState = reactive({})

	const data1 = ref([])
	const data2 = ref([])
	const data3 = ref([])
	const data4 = ref([])
	const data5 = ref([])

	const dayTime = ref()
	const zhibiao = ref()
	const fuhe = ref()
	const typeTitle = ref()

	//三条数据一页
	const echartsPage = ref(7)
	//当前显示页数
	const currentPage = ref(1)
	// 共有多少页
	const totalPage = ref(0)

	const leftFlag = ref(false)
	const rightFlag = ref(false)




	onMounted(() => {
		//金额汇总
		loadData1();
		loadData3();
		clickTab()
		// 获取机构树并加入顶级
		bizOrgApi.orgTreeSelector().then((res) => {
			treeData.value = res
		})
		//折线图
		customer();
		//各个门店消费统计
		loadData4()
	})

	const onRangeChange = (value, dateString) => {
		console.log('Formatted Selected Time: ', dateString);
		searchFormState.startTime = dateString[0]
		searchFormState.endTime = dateString[1]
		delete searchFormState.times
	};

	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns1 = [
		{
			title: '会员姓名',
			dataIndex: 'userName',
			align: 'center',
		},
		{
			title: '会员手机号',
			dataIndex: 'phone',
			align: 'center',
		},
		{
			title: '消费操作',
			dataIndex: 'consumptionOperate',
			align: 'center'
		},
		{
			title: '消费金额',
			dataIndex: 'consumptionMoney',
			align: 'center'
		},
		{
			title: '账户余额',
			dataIndex: 'newAccountBalance',
			align: 'center'
		},
		{
			title: '代金券余额',
			dataIndex: 'newVoucherBalance',
			align: 'center'
		},
		{
			title: '消费时间',
			dataIndex: 'consumptionTime',
			align: 'center'
		},
		{
			title: '会员编码',
			dataIndex: 'userCode',
			align: 'center'
		},
		{
			title: '消费门店',
			dataIndex: 'orgName',
			align: 'center'
		},
	]

	const columns2 = [
		{
			title: '优惠券编码',
			dataIndex: 'couponNo',
			align: 'center',
		},
		{
			title: '优惠券生成时间',
			dataIndex: 'time',
			align: 'center',
		},
		{
			title: '是否核销',
			dataIndex: 'couponStatus',
			align: 'center'
		},
		{
			title: '有效期开始时间',
			dataIndex: 'startTime',
			align: 'center'
		},
		{
			title: '有效期截止时间',
			dataIndex: 'endTime',
			align: 'center'
		},
		{
			title: '核销人',
			dataIndex: 'destroyUserName',
			align: 'center'
		},
		{
			title: '核销时间',
			dataIndex: 'destroyTime',
			align: 'center'
		},
		{
			title: '核销门店',
			dataIndex: 'destroyOrgName',
			align: 'center'
		},
	]


	const columns3 = [
		{
			title: '会员编码',
			dataIndex: 'userReferralCode',
			align: 'center',
		},
		{
			title: '手机号',
			dataIndex: 'phone',
			align: 'center',
		},
		{
			title: '姓名',
			dataIndex: 'name',
			align: 'center',
		},
		{
			title: '账户余额',
			dataIndex: 'accountBalance',
			align: 'center',
		},
		{
			title: '代金券余额',
			dataIndex: 'voucherBalance',
			align: 'center',
		},
		{
			title: '注册时间',
			dataIndex: 'createTime',
			align: 'center',
		},
		/*{
			title: '门店',
			dataIndex: 'orgName',
			align: 'center',
		},*/
	]


	const columns4 = [
		{
			title: '门店名称',
			dataIndex: 'name',
			align: 'center'
		},
		{
			title: '门店编码',
			dataIndex: 'code',
			align: 'center'
		},
		{
			title: '消费',
			children: [
				{
					title: '订单数',
					dataIndex: 'orderCount',
					align: 'center',
				},
				{
					title: '账户消费金额',
					dataIndex: 'accountMoney',
					align: 'center',
				},
				{
					title: '代金券消费金额',
					dataIndex: 'voucherMoney',
					align: 'center',
				},
			]
		},
		/*{
			title: '注册会员数',
			dataIndex: 'userCount',
			align: 'center'
		},*/

	]


	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}

	const totalMoney = ref(0)

	//各个门店消费记录
	const loadData4 = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime
		}
		consumptionRecordApi.queryEachStore(param).then((data)=>{
			data4.value = data.dataList
		})
	}


	//导出
	const exportTotal = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime
		}
		consumptionRecordApi.exportRecord(param).then((res)=>{
			downloadUtil.resultDownload(res)
		})
	}

	//会员折线图
	const customer = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"customerName":searchFormState.customerName,
			"startTime":searchFormState.startTime,
			"endTime":searchFormState.endTime
		}
		consumptionRecordApi.queryConsumptionChart(param).then((res)=>{
			const xAxis = res.dateTime

			let series = [
				{
					name: '消费金额',
					type: 'line',
					//stack: '总量',
					showSymbol: false,
					itemStyle: {
					normal: {
						color: '#00FF00', //折线点自定义
						lineStyle: {
						color: '#00FF00'
						}
					}
					},
					data: res.consumptionMoney
				},
				{
					name: '订单数',
					type: 'line',
					//stack: '总量',
					showSymbol: false,
					data: res.consumptionCount
				},
				{
					name: '会员',
					type: 'line',
					//stack: '总量',
					showSymbol: false,
					itemStyle: {
						normal: {
							color: '#FAD337', //折线点自定义
							lineStyle: {
							color: '#FAD337'
							}
						}
					},
					data: res.userCount
				},

			]
			drow("main2",xAxis, series)
		})
	}

	const drow = (id, xAxis, series) => {
	let myChart = echarts.init(document.getElementById(id))

	let option = {
		color: ['#1890FF', '#52C41A'],
		title: {
		//text: '会话量',
		},
		tooltip: {
		trigger: 'axis',
		},
		grid: {
		left: '40px',
		right: '40px',
		top: '50px',
		bottom: '30px'
		},
		legend: {
		itemWidth: 20, // 图例图形宽度
		itemHeight: 4,
		icon: 'roundRect',
		},
		xAxis: {
		type: 'category',
		boundaryGap: false, //x轴两边不留空白
		axisLabel: {
			color: 'rgba(0, 0, 0, 0.65)',
		},
		axisLine: {
			lineStyle: {
			color: '#D9D9D9',
			},
		},
		axisTick: {
			lineStyle: {
			color: '#D9D9D9',
			},
		},
		data: xAxis,
		},
		yAxis: {
		axisLine: {
			show: false,
			lineStyle: {
			color: 'rgba(0, 0, 0, 0.65)',
			},
		},
		splitLine: {
			lineStyle: {
			color: ['#E8E8E8'],
			type: 'dashed',
			},
		},
		axisLabel: {
			color: 'rgba(0, 0, 0, 0.65)',
		},
		axisTick: {
			show: false,
			lineStyle: { color: 'rgb(150,150,150)' }, //y轴坐标刻度颜色（与axisLabel.textStyle是相同的效果）
		},
		type: 'value',
		},
		series: series
	}
	myChart.setOption(option)
	}

	//消费金额值统计
	const loadData1 = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime
		}
		consumptionRecordApi.queryRecordTotal(param).then((data) => {
			consumerCount.value = '￥ ' + data.orderMoney
			consumerOrderCount.value = data.orderCount
		})
	}

	//账户余额值统计
	const loadData3 = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime
		}
		consumptionRecordApi.queryBalanceTotal(param).then((data)=>{
			userCount.value = data.userCount
			accountBalance.value = data.accountBalance
			voucherBalance.value = data.voucherBalance
		})
	}


	//切换
	const clickTab = () => {
		consumptionPage()
		userPage()
		couponPage()
	}

	const consumptionPage = () =>{
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"consumptionTimeBegin":searchFormState.startTime,
			"consumptionTimeEnd":searchFormState.endTime,
			"consumptionOperate":'3,4'
		}
		consumptionRecordApi.consumptionRecordPage(param).then((data) => {
			data1.value = data.records
		})
	}

	//会员列表
	const userPage = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"beginTime":searchFormState.startTime,
			"endTime":searchFormState.endTime
		}
		bizUserApi.memberPage(param).then((res) => {
			data3.value = res.records
		})
	}


	//优惠券列表
	const couponPage = () => {
		const orgId = ref('')
		if(searchFormState.orgId == null || searchFormState.orgId== '' || searchFormState.orgId== 'undefined' ){

		}else{
			for(let i = 0;i<searchFormState.orgId.length;i++){
				orgId.value = orgId.value + searchFormState.orgId[i]+","
			}
			orgId.value = orgId.value.slice(0,orgId.value.length-1)
		}
		const param = {
			"orgId":orgId.value,
			"beginTime":searchFormState.startTime,
			"endTime":searchFormState.endTime
		}
		bizCouponRecordApi.bizCouponRecordPage(param).then((data) => {
			data2.value = data.records
		})
	}


	//查询
	const refresh = () => {
		loadData1();
		loadData3();
		clickTab()
		loadData4()
	}

	//导出
	const exportReport = () => {
		if(activeKey.value == '1'){
			searchFormState.queryFlag = '1'
			console.log("searchFormState.queryFlag:"+searchFormState.queryFlag)
			reportApi.exportReport(searchFormState).then((res) => {
				downloadUtil.resultDownload(res)
			})

		}
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		searchFormState.times = []
		searchFormState.startTime = null
		searchFormState.endTime = null
		searchFormState.orgId = []
	}

</script>

<style lang="less" scoped>
.ant-table-thead > tr > th {
    text-align: center;
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: color .32s;
    color: black;
	height: 20px;
  }
}

#totalDiv #totalSpan{
	svg{
		width: 1.5em;
		height: 1.5em;
	}
}
</style>