qimall/addons/Seed/backend/views/pool/index.php

<div id="app" v-cloak>
	<div style="background:#fff">
		<div class="chartheader">
			<div style="width:55%"><div ref="visit_chart" id="visit_chart" class="album_chart padding-top-xs flex-sub radius margin-top" style="width:100%;height:400px"></div></div>
			<div style="width:40%">
				<ul class="poolList">
					<li class="list-item" v-for="(item,index) in poolList">
						<p class="title">{{item.name}}：</p>
						<p class="content">{{item.num ?? 0}}</p>
					</li>
				</ul>
			</div>
		</div>
		
		<div >
			<el-table v-loading="listLoading" v-if="PoolDetail.list && PoolDetail.list.length > 0" :data="PoolDetail.list" fit  stripe style="width: 100%;margin-top:10px;" >
			    <el-table-column prop="release_num" label="释放期数" width="150">
                    <template slot-scope="scope">
                        第{{ scope.row.release_num }}期
                    </template>
                </el-table-column>
				<el-table-column prop="total_seed_num" label="种子金数量" ></el-table-column>
				<el-table-column prop="release_energy_pool" label="能量池能量" ></el-table-column>
				<el-table-column prop="unit_price" label="价值增长额" ></el-table-column>
                <el-table-column label="状态" >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.release_status == 0">释放中</el-tag>
                        <el-tag v-if="scope.row.release_status == 1" type="success">释放成功</el-tag>
                        <el-tooltip v-if="scope.row.release_status == 2" class="item" effect="dark" :content="scope.row.reason" placement="top">
                            <el-tag type="danger">释放失败</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
			    <el-table-column label="释放时间">
			        <template slot-scope="scope">
			            <div flex>
							{{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
			            </div>
			        </template>
			    </el-table-column>
			</el-table>
		</div>
	</div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
			search:{
				user_id:'',
				mobile:'',
			},
			page:1,
			limit:20,
			list:[],
			listLoading: false,
			PoolDetail:{},
			poolList:{
				now_seed_num:{name:'当前种子金数量',num:0},
				total_energy_pool:{name:'当前能量池能量',num:0},
				today_release_num:{name:'今日能量池释放次数',num:0},
				week_release_num:{name:'本周能量池释放次数',num:0},
				release_energy_pool:{name:'能量池累计释放总额',num:0},
				release_num:{name:'能量池总计释放次数',num:0},
				}
			}	
        ,
        mounted() {
           this.getPoolDetail(); 
		  
        },
        methods: {
			initEcharts(){
				let that = this
				var myChart = echarts.init(document.getElementById('visit_chart'));
				myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: '#fff',
                        textStyle: {
                            color: '#303133'
                        },
                        padding: 20,
                        extraCssText: 'box-shadow: 0 0 4px rgba(0, 0, 0.1);'
                    },
                    grid: {
                        // top: '10%',
                        left: '2%',
                        right: '2%',
                        // bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: that.PoolDetail.chart.pool.keys
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        nameLocation: 'end',
                        // name: '=种子金',
                        // nameTextStyle: {
                        //     color: "rgba(0, 0, 0, 1)",
                        //     fontWeight: "bold",
                        //     fontSize: 16,
                        //     align: "right"
                        // }
                    },
                    color: ['#62daab', '#6395f9','#fbd437'],
                    series: [
                        {
                            name: '种子金数量',
                            data: that.PoolDetail.chart.seed_num.values,
                            type: 'bar',
                            barGap: '1%',
                        },
                        {
                            name: '能量',
                            data: that.PoolDetail.chart.pool.values,
                            type: 'bar',
                        },
						{
						    name: '价值增长额',
						    data: that.PoolDetail.chart.price.values,
						    type: 'bar',
						}
                    ],
                    legend: {
                        data: ['种子金数量', '能量', '价值增长额'],
                    },
                })
			},
			getPoolDetail() {  //种子金用户记录
			    let self = this;
			    self.listLoading = true;
			    request({
			        method: 'get',
			        params: {
			            r: '/seed/pool/index',
			        },
			        data: {},
			    }).then(e => {
			        self.listLoading = false;
					self.PoolDetail = e.data.data
					for(k in self.poolList){
						
						self.poolList[k].num = self.PoolDetail[k]
						console.log(k,self.poolList)
					}
					
					 self.initEcharts()
			    }).catch(e => {
			        console.log(e);
			    });
			},
			
			pageChange(currentPage) {
			    let self = this;
			    self.page = currentPage;
			    self.getList();
			},
           searchs(){
			   this.page = 1;
			   this.getList();
		   }
        }
    });
</script>
<style>
 .album_chart {
        height: 340px;
        width: 1230px;
    }
.chartheader{
	display: flex;
	justify-content: space-between;
	padding:20px;
}
.poolList{
	display: flex;
	flex-wrap: wrap;
	border-radius:10px;
	background:#f2f2f2;
}
.poolList li{
		
		width:320px;
		padding:25px 0;
		text-align:center;
	}
	.poolList li .title{
		color: #a59b9b;
		font-size: 15px;
	}
	.poolList li .content{
		//color: #a59b9b;
		font-size: 19px;
		font-weight:700;
		padding:5px 0;
	}
</style>