2023-01-29 10:26:52 +08:00

171 lines
5.0 KiB
HTML

{extend name="public/base" /} {block name="body"}
<style>
.body-content{
width: 96%;
height:100%;
display: flex;
justify-content: center;
display:block;
margin: 0 auto;
padding-bottom: 50px;
}
.saixuan{
width:140px;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.cen{
text-align: center;
}
.block{
margin-top:-25px;
}
.grouplist{
margin-bottom: 20px;
justify-content: space-between;
}
</style>
<div class="main-box clearfix" id="app">
<div class="body-content">
<div class="body-content-zhon demo-form-inline">
<div class="saixuan">
<div style="width:60px;">
<el-input v-model="inputrate" placeholder="回收率"></el-input>
</div>
<el-button type="primary" @click="searchs">搜索</el-button>
</div>
<el-table :data="tableData" border v-loading="loading" style="width: 100%;margin-top:25px;" header-cell-style="color:#484848;">
<el-table-column prop="adName" label="计划名称">
</el-table-column>
<el-table-column prop="adId" label="计划ID" width="155">
</el-table-column>
<el-table-column prop="regNum" sortable label="注册">
</el-table-column>
<el-table-column prop="pay" sortable label="充值">
</el-table-column>
<el-table-column prop="statCost" sortable label="消耗">
</el-table-column>
<el-table-column prop="rates" sortable label="回收率%">
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button @click="getinfo(scope.row.adId)" type="text" size="small">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="详情" :visible.sync="dialogTableVisible">
<div class="block">
<div class="grouplist">
<el-radio-group v-model="tim" size="mini" @change="gettim">
<el-radio-button label="今日"></el-radio-button>
<el-radio-button label="昨日"></el-radio-button>
</el-radio-group>
&nbsp;&nbsp;&nbsp;
排序:
<el-radio-group v-model="reverse">
<el-radio :label="true">倒序</el-radio>
<el-radio :label="false">正序</el-radio>
</el-radio-group>
</div>
<el-timeline :reverse="reverse" v-loading="loading2" style="overflow:auto;height:358px;width:100%">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.createdAt"
style="width:100%">
消耗:<span>{{activity.todayCost}}</span>&nbsp;&nbsp;注册人数:{{activity.regNum}}&nbsp;&nbsp;充值:<span>{{activity.pay}}</span>
</el-timeline-item>
</el-timeline>
</div>
</el-dialog>
</div>
</div>
{/block} {block name="script"}
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
tableData: [],
loading:false,
loading2:false,
inputrate:50,
dialogTableVisible:false,
reverse:true,
activities:[],
tim:'今日',
adid:'',
},
methods: {
refreshs() {
this.loading = true
var that = this
$.ajax({
type: "POST",
url: "{:url('Admonitor/refreshs')}",
data: {rate:that.inputrate},
dataType: "json",
success: function(data) {
that.loading = false
if (data.status == 1) {
that.tableData = data.list
}
}
});
},
searchs(){
this.refreshs()
},
getinfo(adid){
this.dialogTableVisible = true
this.loading2 = true
var that = this
$.ajax({
type: "POST",
url: "{:url('Admonitor/getinfo')}",
data: {adid:adid,tim:that.tim},
dataType: "json",
success: function(data) {
that.loading = false
if (data.status == 1) {
that.activities = data.activities
that.loading2 = false
that.adid = adid
}
}
});
},
gettim(){
this.getinfo(this.adid)
}
},
created: function() {
var that = this
timer = setTimeout(function(){
that.refreshs()
},1);
}
})
</script>
{/block}