<template>
<div>
<el-card>
<el-card>
<time-selects @GetTime="GetTime"></time-selects>
<!--第一步 页面-->
<div id="main" :style="{ width: '1000px', height: '300px' }"></div>
<div id="main1" :style="{ width: '1000px', height: '300px' }"></div>
</el-card>
</el-card>
<!-- <el-card>
<div slot="header" class="clearfix">
<span>订单信息</span>
</div>
<el-form ref="form" :model="form" size="medium">
<el-form-item label="任务名称" :label-width="formLabelWidth">
<el-input v-model="form.order.name" autocomplete="off"/>
</el-form-item>
</el-form>
<el-form ref="form" :model="form" size="medium">
<el-form-item label="客户名称" :label-width="formLabelWidth">
<el-input v-model="form.order.client" autocomplete="off"/>
</el-form-item>
</el-form>
<el-form ref="form" :model="form" size="medium">
<el-form-item label="订单编号" :label-width="formLabelWidth">
<el-input v-model="form.order.order_number" autocomplete="off"/>
</el-form-item>
</el-form>
<el-form ref="form" :model="form" size="medium">
<el-form-item label="业务单元" :label-width="formLabelWidth">
<el-input v-model="form.order.business_module" autocomplete="off"/>
</el-form-item>
</el-form>
<el-form ref="form" :model="form" size="medium">
<el-form-item label="订单金额" :label-width="formLabelWidth">
<el-input v-model="form.order.money" autocomplete="off"/>
</el-form-item>
</el-form>
</el-card>-->
<!-- <el-card>
<div id="main" :style="{ width: '1000px', height: '300px' }"></div>
<div id="main1" :style="{ width: '1000px', height: '300px' }"></div>
</el-card>
<el-card>
<div v-for="item in form.departmentList" :key="item.department.id">
<span>{{item.department.name}}</span>
<div v-for="row in item.accounts">
<el-form ref="form" :model="row" size="medium">
<span><img :src="row.account.pavg" alt="">{{row.account.name}}</span>
<el-form-item label="任务名称" label-width="140px">
<el-input v-model="row.name" autocomplete="off" disabled/>
</el-form-item>
<div class="block">
<el-form-item label="发布日期" :label-width="formLabelWidth">
<el-date-picker
v-model="row.start_time"
type="date"
disabled
>
</el-date-picker>
</el-form-item>
</div>
<el-form-item label="传播量" :label-width="formLabelWidth">
<el-input v-model="form.order.name" autocomplete="off" disabled/>
</el-form-item>
</el-form>
</div>
</div>
</el-card>-->
</div>
</template>
<script>
/*第二步引入eachart 引入时间组件*/
import TimeSelects from "@/views/Detaildata/DetailApp/components/TimeSelects";
import echarts from "echarts";
import {getAction} from "@/api";
export default {
components: {
TimeSelects
},
props: {
id: {
type: String,
}
},
data() {
return {
value1: '',
form: {},
formLabelWidth: "140px",
url: {
view: "/home/detail"
},
StartTime:'',
EndTime:'',
ArrUsername:[1,2,3],
DepartMents:[],
option:[],
}
},
created() {
this.detail(this.id);
/* this.detail(this.id);*/
},
mounted() {
this.GetEchart();
},
methods:{
detail(id) {
getAction(this.url.view + '/' + id).then(res => {
this.form = res.data;
})
},
GetEchart(){
console.log(1)
let myChart = echarts.init(document.getElementById("main"));
let option = {
xAxis: {
type: 'category',
data: this.DepartMents
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
myChart.setOption(option);
console.log(option)
},
GetTime(val){
/*数据转换为时间戳*/
console.log(2)
this.StartTime=val[0].getTime()
this.EndTime=val[1].getTime()
getAction("/home/detail/"+this.id,{start:this.StartTime,stop:this.EndTime})
.then(res=>{
console.log(res)
let ArrUsername=[]
let DepartMent=[]
res.data.account_amount.map((value,index)=>{
ArrUsername.push(value.name)
/* console.log(ArrUsername)*/
})
res.data.detpartment_amount.map((value,index)=>{
DepartMent.push(value.name)
/*console.log(DepartMent)*/
this.DepartMents=DepartMent
/* this.DepartMents=["2","2"]*/
/* console.log(this.DepartMents)*/
})
/* console.log(this.DepartMents)*/
this.GetEchart()
})
}
},
}
</script>
<style lang="scss"></style>
