webapp / GreenwayWeb

<template>
	<div style="padding: 10px;">
		<div
			style="font-weight: bold;font-size: 14px;background-color:#fff;padding: 20px;display:flex;justify-content: space-between;align-items: center">
			<div>交易流量监控</div>
			<el-form :inline="true" label-position="left">
				<el-form-item label="选择日期">
					<el-date-picker v-model="Time" type="daterange" value-format="yyyy-MM-dd"
						style="width: 240px;margin-top:5px" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button style="background-color: #3F9B6A;color: #fff;" @click="onSubmit">查询
					</el-button>
					<el-button class="buttonHover"
						style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="resetting">重置
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="zhuti">
			<div class="card_tree">
				<div class="card_title">总销售额(元)</div>
				<div class="card_body">{{rules.totalSales}}</div>

				<!-- <div style="display:flex;justify-content: space-between;" class="card_tu">
          <div style="font-size: 12px;line-height:100px;display:flex;">
            <div style="color:#B0B0B0;">周同比</div>
            <div style="color:#A8D889"><i class="el-icon-caret-top"></i>12%</div>
          </div>
          <div style="font-size: 12px;line-height:100px;display:flex;">
            <div style="color:#B0B0B0;">日环比</div>
            <div style="color:#E35452;"><i class="el-icon-caret-bottom"></i>11%</div>
          </div>
        </div> -->

				<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
				<div class="card_foot">日均销售额 ￥{{rules.averageSalesRevenue}}
				</div>
			</div>
			<div class="card_tree">
				<div class="card_title">交易笔数</div>
				<div class="card_body">{{rules.transactions}}</div>
				<div style="display:flex;justify-content: space-between;" class="card_tu">
					<div ref="jiaonum" style="width:100%;height:400px"></div>
				</div>
				<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
				<div class="card_foot">日交易量 {{rules.tradingDailyVolume}}

				</div>
			</div>
			<div class="card_tree">
				<div class="card_title">交易金额(元)</div>
				<div class="card_body">{{rules.totalSales}}</div>
				<div style="display:flex;justify-content: space-between;" class="card_tu">
					<div ref="jiaomoney" style="width:100%;height:400px"></div>
				</div>
				<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
				<!-- <div class="card_foot">
          大额率 60%
        </div> -->
			</div>
			<div class="card_tree" style="margin-right: 0;">
				<div class="card_title">交易成功率</div>
				<!-- <div class="card_body">{{rules.transactionsNumber}}</div> -->
				<div style="display:flex;justify-content: space-between;" class="card_tu">
					<div ref="jiaolv" style="width:100%;height:400px"></div>
					<!-- <div style="width:100%;height:15px;position: relative;background-color: #F1F2F5;margin-top: 65px;">
               <div style="position: absolute;top: 0;left: 0;background-color: #448EF7;height:15px;" :style="`width:${rules.transactionSuccessRate?rules.transactionSuccessRate:0}%`"></div>
            </div> -->
				</div>
				<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
			</div>




			<div>




			</div>
		</div>

	</div>
</template>

<script>
	import {
		transactionTrafficMonitoring
	} from '../../../api/online.js'
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				rules: {},
				currentPage: 1,
				total: 100,
				flag: false,
				pageSize: 10,
				activeName: 'zfb',
				tabTitle: '',
				jiaosucc: 78,
				tableData: [{
					date: '3',
					name: '345',
					times: '2024.3.15',
					time: '2024.3.18',
					zhuti: '4',
					zt: '未审核',
					address: '789'
				}],
				pageindex: {
					startTime: "2020-01-01",
					endTime: ""
				},
				Time: []
			}
		},
		computed: {},
		created() {

		},
		mounted() {
		this.getDateRange()
			this.getAll()
		},
		methods: {
			getAll() {
				transactionTrafficMonitoring(this.pageindex).then(res => {
					this.rules = res.data
					if (res.data.consumerTrendsRes) {
						this.jiaoNum(res.data.consumerTrendsRes)
						this.jiaoMoney(res.data.consumerTrendsRes)
						this.jiaoyilv(res.data.transactionSuccessRate)
					} else {
						let data = []
						this.jiaoNum(data)
						this.jiaoMoney(data)
						this.jiaoyilv(data)
					}

				})

			},
			handleClick(tab, event) {
				this.tabTitle = tab.name
			},

			jiaoMoney(datas) {
				let Dom = this.$refs.jiaomoney
				let myChart = echarts.init(Dom)

				datas.sort((a, b) => {
					const timeA = new Date(a.time);
					const timeB = new Date(b.time);
					return timeA - timeB;
				})
				const productNames = datas.map(item => item.time)
				const salesData = datas.map(item => item.money)
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						type: 'category',
						data: productNames,
					},
					yAxis: {
						type: 'value',
						name: '销售金额'
					},
					series: [{
						 color: '#3f9b6a',
						name: '销售金额',
						type: 'bar',
						data: salesData,
					}]
				};
				option && myChart.setOption(option)
				window.addEventListener('resize', function() {
					myChart.resize();
				})
			},
			jiaoNum(datas) {

				let Dom = this.$refs.jiaonum
				let myChart = echarts.init(Dom)
				datas.sort((a, b) => {
					const timeA = new Date(a.time);
					const timeB = new Date(b.time);
					return timeA - timeB;
				})
				const productNames = datas.map(item => item.time)
				const salesData = datas.map(item => item.count)
				let option = {
					tooltip: {
						trigger: 'axis',
						position: function(pt) {
							return [pt[0], '10%'];
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: productNames,
						show: true
					},
					yAxis: {
						show: true, // 显示 Y 轴
						name: '交易数', // 添加 Y 轴名称
						axisLine: {
							show: true // 显示 Y 轴轴线
						},
						axisTick: {
							show: true // 显示 Y 轴刻度
						},
						splitLine: {
							show: true // 显示 Y 轴分割线
						},
						axisLabel: {
							formatter: '{value}' // 格式化 Y 轴标签
						}
					},
					series: [{
						name: '交易数',
						type: 'line',
						symbol: 'none',
						sampling: 'lttb',
						itemStyle: {
							color: '#3f9b6a',
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgb(49, 169, 16)'
								},
								{
									offset: 1,
									color: 'rgb(49, 169, 16)'
								}
							])
						},
						data: salesData,
					}]

				}
				option && myChart.setOption(option)
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			},
			jiaoyilv(datas) {
				const chartDom = this.$refs.jiaolv;
				const myChart = echarts.init(chartDom);
				datas.sort((a, b) => {
					const timeA = new Date(a.createDate);
					const timeB = new Date(b.createDate);
					return timeA - timeB;
				})
				const dates = datas.map(item => item.createDate)
				const successRates = datas.map(item => item.successRate)
				// const dates = transactionData.map(item => item.date);
				// const successRates = transactionData.map(item => item.successRate * 100);
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: '{b}<br/>交易成功率: {c}%'
					},
					xAxis: {
						type: 'category',
						data: dates
					},
					yAxis: {
						type: 'value',
						name: '成功率(%)',
						min: 0,
						max: 100,
						axisLabel: {
							formatter: '{value}%'
						}
					},
					series: [{
						name: '成功率',
						type: 'bar',
						data: successRates,
						color: '#3f9b6a',
						
						// label: {
						//   show: true,
						//   position: 'top',
						//   formatter: '{c}%'
						// }
					}]
				};

				myChart.setOption(option);
				window.addEventListener('resize', () => {
					myChart.resize();
				});

			},
			getDateRange() {
				// 获取当前日期
				const currentDate = new Date();
				this.pageindex.endTime = this.formatDate(currentDate);

				// 计算 30 天前的日期
				const thirtyDaysAgo = new Date();
				thirtyDaysAgo.setDate(currentDate.getDate() - 30);
				this.pageindex.startTime = this.formatDate(thirtyDaysAgo);
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			onSubmit() {
				if (this.Time.length != 0) {
					this.pageindex.startTime = this.Time[0]
					this.pageindex.endTime = this.Time[1]
					this.getAll()
				}
			},
			resetting() {
				this.getDateRange()
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0')
				const day = String(now.getDate()).padStart(2, '0')
				this.pageindex.endTime = `${year}-${month}-${day}`
				this.Time = []
				this.getAll()
			},

		}
	}
</script>

<style scoped>
	.zhuti {
		margin-top: 20px;
		/* padding: 10px 20px 20px 20px; */
		/* background-color: #Fff; */
		min-height: calc(100vh - 50px - 20px);
		position: relative;
	}

	/deep/ .el-form-item__content {
		line-height: 0;
	}

	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}

	::v-deep .formSearch {
		position: relative;
		margin: 20px 0;
		display: flex;
		width: 100%;
		height: 30px;
		font-size: 12px;
		justify-content: space-between;

		.el-form-item__label {
			line-height: 28px;
			font-size: 12px;
			color: #000;
			font-weight: 100;
		}
	}

	.greens {
		color: #3F9B6A;
	}

	/deep/ .el-table__row {
		font-size: 12px;
	}

	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: flex-start;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}

	.demo-input-suffix {
		display: flex;
		margin-right: 20px;
	}

	.pagination {
		text-align: right;
		line-height: 20px;
	}

	/deep/ .el-pagination__total {
		margin-top: 4px;
	}

	/deep/ .btn-prev {
		position: absolute;
		top: 4px;
		right: 266px;
	}

	/deep/ .el-pager {
		position: absolute;
		top: 4px;
		right: 40px;
	}

	/deep/ .btn-next {
		position: absolute;
		top: 4px;
		right: 10px;
	}

	::v-deep .btn .el-button:focus,
	.el-button:hover {
		border: 1px solid #3F9B6A;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: #3F9B6A
	}

	::v-deep .dialog_css_Xq {
		.el-dialog__header {
			background-color: #fafafa;

		}

		.el-dialog__title {
			color: #000
		}
	}

	::v-deep .el-tabs__item.is-active {
		color: #3F9B6A;
	}

	::v-deep .el-tabs__active-bar {
		background-color: #3F9B6A;

	}

	.card_tree {
		padding: 20px 20px 10px 20px;
		margin: 0 0 20px 0;
		background-color: #fff;
		width: 100%;

		.card_title {
			/* color: #B0B0B0; */
		}

		.card_body {
			font-size: 24px;
			margin-top: 10px;
			font-weight: 600;
		}

		.card_foot {
			color: #B0B0B0;
		}
	}

	.card_liuliang {
		margin-top: 20px;

		margin-right: 20px;
		display: flex;

		.card_title {
			color: #B0B0B0;
			font-size: 12px;
			padding: 15px 0;
		}

		.card_body {
			font-size: 24px;
			font-weight: 600;
		}
	}
</style>