<template>
|
<div class="data_box">
|
<span class="chart_title">
|
{{chartData.name}}
|
</span>
|
<div class="popoverStyle" >
|
<el-popover placement="bottom" :title="chartData.name" width="200"
|
trigger="click">
|
<span v-html="chartData.tip"></span>
|
<i class="chartTip el-icon-question" slot="reference"></i>
|
</el-popover>
|
</div>
|
<div class="chart_content">
|
<div class="chart_query">
|
<el-select v-model="chartData.timeType" v-show="chartData.timeType" class="query_type"
|
size="mini">
|
<el-option v-for="item in dataArray" :key="item.id" :value="item.id" :label="item.name">
|
</el-option>
|
</el-select>
|
<span class="chart_data">
|
<el-date-picker v-model="chartData.time" type="daterange" align="right" unlink-panels
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
size="mini" value-format="yyyy-MM-dd" @change="changeTime"
|
:picker-options="pickerOptions">
|
</el-date-picker>
|
</span>
|
</div>
|
<div class="chart_box">
|
<slot name="content" :data="chartData"></slot>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
chartData: {
|
type: Object,
|
default: function () {
|
return {}
|
}
|
}
|
},
|
data () {
|
return {
|
dataArray: [
|
{
|
id: '1',
|
name: '日'
|
},
|
{
|
id: '2',
|
name: '月'
|
},
|
{
|
id: '3',
|
name: '年'
|
}
|
],
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
end.setTime(end.getTime() - 86400000)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
end.setTime(end.getTime() - 86400000)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
end.setTime(end.getTime() - 86400000)
|
picker.$emit('pick', [start, end])
|
}
|
}],
|
disabledDate (time) {
|
const end = new Date()
|
return time.getTime() > end.getTime() - 86400000
|
}
|
}
|
}
|
},
|
methods: {
|
changeTime () {
|
this.$emit('hand-date-time', this.chartData)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.data_box {
|
// border: 1px solid #cccccc;
|
height: 100%;
|
margin-right: 10px;
|
.chart_title {
|
font-size: 20px;
|
font-weight: 400;
|
// border-bottom: 1px solid #cccccc;
|
padding: 10px;
|
margin-bottom: 10px;
|
display: inline-block;
|
.chartTip {
|
cursor: pointer;
|
float: right;
|
}
|
}
|
.chart_content {
|
padding: 20px;
|
border: 1px solid #bfbfbf;
|
border-radius: 4px;
|
.chart_query {
|
height: 28px;
|
}
|
.query_type {
|
.el-input {
|
width: 100px;
|
}
|
}
|
.chart_data {
|
float: right;
|
}
|
.chart_box {
|
width: 100%;
|
height: 330px;
|
}
|
.chart_box > div {
|
width: 100%;
|
height: 100%;
|
margin: 0 auto;
|
}
|
}
|
}
|
.popoverStyle{
|
display: inline-block;
|
.el-popper{
|
overflow-y: hidden;
|
}
|
}
|
</style>
|
