<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(1)">查询
					</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 style="margin-bottom: 10px;background-color:#fff;padding:  0 0 10px 10px;">
			<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaoSet(1)">监控运行状态管理
			</el-button>
			<el-button style="background-color: #3F9B6A;color: #fff;" @click="shuaxin">监控状态刷新
			</el-button>
			<el-button style="background-color: #3F9B6A;color: #fff;" @click="biaoSet">系统流量监控情况查看
			</el-button>
			<el-button style="background-color: #3F9B6A;color: #fff;" @click="zhifuSet(1)">支付渠道交易流量监控
			</el-button>
			<el-button style="background-color: #3F9B6A;color: #fff;" @click="zhifuSet(2)">商户流量监控
			</el-button>
			<el-button style="background-color: #3F9B6A;color: #fff;" @click="yichang">风险交易监控
			</el-button>
		</div>
		<div class="zhuti" v-if="ontype==1">
			<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>
			<el-form :inline="true" label-position="left">
				<el-form-item label="支付笔数时间段查询">
					<el-date-picker v-model="bsTime" 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(2)">查询
					</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 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>
			<el-form :inline="true" label-position="left">
				<el-form-item label="支付金额时间段查询">
					<el-date-picker v-model="zfTime" 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(3)">查询
					</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 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 class="card_tree" style="margin-right: 0;">
				<div class="card_title">系统流量监控图表化展示</div>
				<div style="display:flex;justify-content: space-between;" class="">
					<div ref="xitong" style="width:100%;height:400px"></div>
				</div>
				<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
			</div>
			<div class="card_tree" style="margin-right: 0;">
				<div class="card_title">支付渠道流量监控图表化展示</div>
				<div style="display:flex;justify-content: space-between;" class="zhifuqudao">
					<div ref="zhifuqudao" style="width:100%;height:400px"></div>
				</div>
				<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
			</div>
			<div class="card_tree" style="margin-right: 0;">
				<div class="card_title">商户流量监控图表化展示</div>
				<div style="display:flex;justify-content: space-between;" class="shopqudao">
					<div ref="shopqudao" style="width:100%;height:400px"></div>
				</div>
				<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
			</div>
			<div class="card_tree" style="margin-right: 0;">
				<div class="card_title" style="margin-bottom: 15px;">总交易笔数统计</div>
				<div style="display: flex;margin-bottom: 15px;">
					<div style="margin-right: 20px;padding:20px 50px;font-size: 24px;text-align: center;background-color: #606266;color: #fff;border-radius: 10px;" v-for="(item,index) in qudaoList">
						<div>{{item.num}}</div>
						<div>微信</div>
					</div>
				</div>
				<div class="card_title" style="margin-bottom: 15px;">总交易笔数图表化展示</div>
				<div style="display:flex;justify-content: space-between;" class="shopqudao">
					<div ref="allshopNum" style="width:100%;height:400px"></div>
				</div>
			</div>
			<div class="card_tree" style="margin-right: 0;">
				<div class="card_title" style="margin-bottom: 15px;">总交易金额统计</div>
				<div style="display: flex;margin-bottom: 15px;">
					<div style="margin-right: 20px;padding:20px 50px;font-size: 24px;text-align: center;background-color: #606266;color: #fff;border-radius: 10px;" v-for="(item,index) in qudaoList">
						<div>{{item.price}}</div>
						<div>微信</div>
					</div>
				</div>
				<div class="card_title" style="margin-bottom: 15px;">总交易金额图表化展示</div>
				<div style="display:flex;justify-content: space-between;" class="shopqudao">
					<div ref="allshopMoney" style="width:100%;height:400px"></div>
				</div>
			</div>
		</div>
		<div class="zhuti" v-if="ontype== '3'" style="background-color: #fff;padding: 10px;">
			<div v-if="index==1" style="padding: 10px;"><el-button style="background-color: #3F9B6A;color: #fff;"
					@click="tiaoSet(2)">支付渠道交易状态管理
				</el-button></div>
			<div style="padding: 10px;" v-if="index==2">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaoSet(3)">商户交易状态管理
				</el-button>
			</div>
			<el-table :data="qudaoList"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column v-if="index==1" label="渠道名称" min-width="4%" prop="orderFormId">
				微信
				</el-table-column>
				<el-table-column label="商户名称" min-width="4%" v-if="index==2">
		
				 <div >娃娃店铺</div>
				</el-table-column>
				<el-table-column prop="price" label="交易总金额" width="auto" min-width="10%">

				</el-table-column>

				<el-table-column prop="orderFormId" label="状态" width="auto" min-width="10%">
					正常
				</el-table-column>

			</el-table>
			<div style="display: flex;margin-top: 20px;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<div class="zhuti" v-if="ontype== '4'" style="background-color: #fff;padding: 10px;">
			<el-table :data="orderList"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column label="订单号" min-width="4%" prop="orderFormid">

				</el-table-column>
				<el-table-column prop="price" label="支付金额" width="auto" min-width="10%">

				</el-table-column>
				<el-table-column prop="createTime" label="支付完成时间" width="auto" min-width="10%">

				</el-table-column>
				<el-table-column prop="" label="状态" width="auto" min-width="10%">
					正常
				</el-table-column>

			</el-table>
			<div style="display: flex;margin-top: 20px;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<div class="zhuti" style="background-color: #fff;padding: 10px;" v-if="ontype == '5'">
			<div style="margin-bottom: 20px;">
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="add(1)">新增
				</el-button>

			</div>
			<el-table :data="tiaotable"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column :label="msg" min-width="4%" prop="labelName">

				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="auto" min-width="10%">

				</el-table-column>
				<el-table-column label="操作" width="auto" min-width="10%">
					<template slot-scope="scope">
						<div @click="deltab(scope.row.id)" class="tableBtn greens">删除</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex;margin-top: 20px;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="tiaoAdd" title="状态新增" style="padding: 0;" width="45%" center
			:close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
				{{msg}}：
				<el-input v-model="tiaoObj.labelName"></el-input>

			</div>
			<div style="display: flex;">
				<el-button @click="close" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
				<el-button style="background-color: #3F9B6A;color: #fff;" @click="tiaoChek">确定
				</el-button>
			</div>

		</el-dialog>
		<div class="zhuti" style="background-color: #fff;padding: 10px;" v-if="ontype == '6'">
			<el-table :data="orderData"
				:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
				style="width: 100%">
				<el-table-column label="订单id" width="150">
					<template slot-scope="scope">{{ scope.row.orderId }}</template>
				</el-table-column>
				<el-table-column prop="number" label="商品数量" width="100" />
				<el-table-column prop="shopName" label="商户名称" width="220" show-overflow-tooltip />
				<el-table-column prop="customerName" label="下单账户" show-overflow-tooltip />
				<el-table-column prop="receiveName" label="收件人" show-overflow-tooltip />
				<el-table-column prop="receivePhone" label="手机号" show-overflow-tooltip />
				<el-table-column prop="price" label="支付金额（元）" width="120" />
				<el-table-column prop="createTime" label="下单时间" show-overflow-tooltip />
			</el-table>
			<div style="display: flex;margin-top: 20px;">
				<el-button @click="closeFn" class="buttonHover"
					style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		transactionTrafficMonitoring,
		trafficLabelByPage,
		trafficLabelInsert,
		trafficLabelEdit,
		orderGetAll,
		getRisk,
		transactionStatistics,
		trafficMonitoring
	} 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: [],
				ontype: '1',
				tiaotable: [],
				biaoTable: [],
				tiaoAdd: false,
				msg: '运行状态',
				tiaoObj: {
					labelName: '',
					createTime: '',
					type: 1
				},
				formInline: {
					searchType: '1',
					search: '', // 搜索字段
					state: [2, 3, 4],
					// afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
					dates: [], // 下单时间数组
					page: 1,
					shopName: '',
					pageSize: 100

				},
				orderList: [],
				index: 1,
				orderData: [],
				qudaoList:[],
				bsTime:[],
				zfTime:[]
			}
		},
		computed: {},
		created() {

		},
		mounted() {
			this.getDateRange()
			this.getAll()

		},
		methods: {
			yichang() {
				getRisk().then(res => {
					console.log(res.data.num)
					if (res.data.num > 0) {
						this.$message({
							message: `共有${res.data.num}条异常订单`,
							type: 'warning'
						});
					}
					this.orderData = res.data.orders

					this.ontype = '6'
				})

			},
			async orderGet() {
				const res = await orderGetAll(this.formInline)
				this.orderList = res.data.list
			},
			add() {
				this.tiaoAdd = true
				this.tiaoObj.labelName = ''
				this.tiaoObj.createTime = ''
			},
			close() {
				this.tiaoAdd = false
			},
			async tiaoChek() {
				this.tiaoObj.createTime = this.currentTime()
				await trafficLabelInsert(this.tiaoObj)
				this.tiaoAdd = false
				this.setTable(this.tiaoObj.type)
			},
			biaoSet() {
				this.ontype = '4'
				this.orderGet()
			},
			zhifuSet(val) {
				this.index = val
				this.ontype = '3'
			},
			async deltab(row) {
				await trafficLabelEdit(row)
				this.setTable(this.tiaoObj.type)
			},
			closeFn(val) {
				this.ontype = '1'
				this.getAll()
			},
			async tiaoSet(val) {
				if (val == 1) {
					this.msg = '运行状态'
				} else if (val == 2) {
					this.msg = '交易状态'
				} else if (val == 3) {
					this.msg = '商户交易状态'
				}
				this.tiaoObj.type = val
				this.ontype = '5'
				this.setTable(val)

			},
			async setTable(val) {
				let obj = {
					pageNumber: 0,
					pageSize: 100,
					type: val
				}
				let res = await trafficLabelByPage(obj)
				this.tiaotable = res.data
			},
			shuaxin() {
				this.getAll()
				this.$message({
					message: '刷新成功',
					type: 'success'
				})
			},
			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)
					}

				})
				trafficMonitoring().then(res=>{
					this.xitong(res.data.trafficMonitoring)
					this.initChartone(res.data.merchantTrafficChartDisplays)
				})
				transactionStatistics().then(res=>{
					this.initChartTwo(res.data.statistics)
					this.qudaoList  = res.data.transactions
					this.allshopNum(res.data.statistics)
					this.allshopMoney(res.data.statistics)
		
				})

			},
			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(val) {
				if(val==1){
					if (this.Time.length != 0) {
						this.pageindex.startTime = this.Time[0]
						this.pageindex.endTime = this.Time[1]
					}
				}else if(val == 2){
					if (this.bsTime.length != 0) {
						this.pageindex.startTime = this.bsTime[0]
						this.pageindex.endTime = this.bsTime[1]
					}
				}else{
					if (this.zfTime.length != 0) {
						this.pageindex.startTime = this.zfTime[0]
						this.pageindex.endTime = this.zfTime[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.bsTime=[]
			this.zfTime=[]
				this.getAll()
			},

			initChartone(datas) {
				const chartDom = this.$refs.shopqudao;
			const myChart = echarts.init(chartDom);
	const xData = datas.map(item => item.time)
	const trafficData = datas.map(item => item.num)
	const paymentChannels =datas.map(item => item.shopName)
	const series = paymentChannels.map((channel, index) => ({
		name: channel,
		type: 'line',
		data: trafficData
	}));
			const option = {
				tooltip: {
					trigger: 'axis',
					formatter: function(params) {
						let str = '';
						params.forEach((param) => {
							str += `<div>${param.seriesName}: ${param.value}</div>`;
							str += '<div>监控情况：正常</div>';
						});
						return str;
					}
				},
				legend: {
					data: paymentChannels
				},
				xAxis: {
					type: 'category',
					data: xData
				},
				yAxis: {
					type: 'value'
				},
				series
			};
			
			myChart.setOption(option);

			},
			initChartTwo(datas) {
				const chartDom = this.$refs.zhifuqudao;
				const myChart = echarts.init(chartDom);
				const xData = datas.map(item => item.time)
				const trafficData = datas.map(item => item.price)
				const paymentChannels = ['微信支付']
				const series = paymentChannels.map((channel, index) => ({
					name: channel,
					type: 'line',
					data: trafficData
				}));
				
				const option = {
					tooltip: {
						trigger: 'axis',
						formatter: function(params) {
							let str = '';
							params.forEach((param) => {
								str += `<div>${param.seriesName}: ${param.value}</div>`;
								str += '<div>监控情况：正常</div>';
							});
							return str;
						}
					},
					legend: {
						data: paymentChannels
					},
					xAxis: {
						type: 'category',
						data: xData
					},
					yAxis: {
						type: 'value'
					},
					series
				};
				
				myChart.setOption(option);
			
			},
			// 获取时间
			currentTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1; // 月份从0~11，所以加一
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();

				// 为月、日、小时、分钟和秒添加前导零（如果需要）
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;

				// 返回格式化的日期和时间字符串
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 总交易笔数图表化展示
			xitong(datas) {
			
				let Dom = this.$refs.xitong
				let myChart = echarts.init(Dom)
				const productNames = datas.map(item => item.time)
				const salesData = datas.map(item => item.num)
				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();
				});
			},
			// 总交易笔数图表化展示
			allshopNum(datas) {
			
				let Dom = this.$refs.allshopNum
				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.num)
				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();
				});
			},
			//总交易金额图表化展示
			allshopMoney(datas) {
			
				let Dom = this.$refs.allshopMoney
				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.price)
				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();
				});
			},
			daochu(){
				
			},
		}
	}
</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>