<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>订单信息</span>
</div>
<!--样式控制全部 已经退回 待审核-->
<el-row>
<el-radio-group v-model="query.status" size="small">
<el-radio-button label="全部" />
<el-radio-button label="已退回" />
<el-radio-button label="待审核" />
<el-radio-button label="待接收" />
<el-radio-button label="进行中" />
<el-radio-button label="待结算" />
<el-radio-button label="已完成" />
</el-radio-group>
<!--样式控制全部 全部 昨日-->
<el-radio-group
v-model="query.timeSpan"
size="small"
style="float: right"
>
<el-radio-button label="全部" />
<el-radio-button label="昨日" />
<el-radio-button label="近七日" />
<el-radio-button label="近三十日" />
</el-radio-group>
</el-row>
<!--引入custom组件-->
<custom-table
@size-changes="list"
@pagination-change="list"
:data="tableData"
:columns="columns"
:pagination="pagination"
>
<template v-slot:action>
<el-table-column
fixed="right"
header-align="center"
label="操作"
width="100"
>
<template slot-scope="scope">
<!--调用查看的函数-->
<!-- <router-link :to="{}">-->
<!-- </router-link>-->
<el-button type="text" @click="handleView(scope.row)">
查看详情
</el-button>
</template>
</el-table-column>
</template>
</custom-table>
</el-card>
<el-card>
<div id="main" :style="{ width: '300px', height: '300px' }"></div>
<div id="main1" :style="{ width: '300px', height: '300px' }"></div>
</el-card>
</div>
</template>
<script>
/*引入eachart*/
import echarts from "echarts";
import CustomTable from "@/component/table/CustomTable";
import { TableListMixin } from "@/component/table/TableMixin";
export default {
name: "Infomation",
mixins: [TableListMixin],
components: {
CustomTable
},
mounted() {
let myChart = echarts.init(document.getElementById("main"));
let myChart1 = echarts.init(document.getElementById("main1"));
let option = {
title: {
text: "柱状图"
},
tooltip: {},
legend: {
data: ["销量"]
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
let option1 = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
axisTick: {
show: false
},
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisTick: {
show: false
},
name: '（人）'
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
myChart1.setOption(option1);
},
data() {
return {
/*表头*/
columns: [
/*任务名称id*/
{ prop: "id", label: "ID", width: "100", sortable: true },
/*订单名称 name*/
{ prop: "name", label: "订单名称", sortable: true },
/*创建人*/
{ prop: "client", label: "客户名称", sortable: true },
/*创建时间*/
{ prop: "username", label: "创建人", sortable: true },
/*业务单元*/
{ prop: "created_at", label: "创建时间", sortable: true },
/*投放账号*/
{ prop: "business_module", label: "业务单元", sortable: true },
/*发布时间*/
{ prop: "put_department", label: "投放部门", sortable: true },
/*任务状态*/
{ prop: "status_name", label: "订单状态", sortable: true },
/*任务状态*/
{ prop: "spread_data", label: "传播数据(万)", sortable: true }
],
/*绑定的taskTableData里面的数据*/
TableData: [],
url: {
list: "/home/information"
}
};
},
methods: {
handleView(scope) {
this.$router.push({ path: "/list/analysis/" + scope.id });
}
}
};
</script>
