更新直播监控
parent
36ac429e01
commit
2072e6d0d2
@ -0,0 +1,104 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="className" :style="{height:height,width:width}" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import { debounce } from '@/utils'
|
||||||
|
|
||||||
|
// const animationDuration = 6000
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '300px'
|
||||||
|
},
|
||||||
|
chartData: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartData: {
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setOptions(val)
|
||||||
|
}, 300)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(async() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
this.__resizeHandler = debounce(() => {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize()
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
|
window.addEventListener('resize', this.__resizeHandler)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
window.removeEventListener('resize', this.__resizeHandler)
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
if (this.chartData.length > 0) {
|
||||||
|
this.setOptions(this.chartData)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setOptions({ xAxis, seriesArr } = {}) {
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '2%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
data: xAxis,
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: seriesArr
|
||||||
|
}, true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
@ -1,3 +0,0 @@
|
|||||||
<template>
|
|
||||||
<router-view />
|
|
||||||
</template>
|
|
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="三级菜单1" type="success" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="三级菜单2" type="success" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div style="padding:30px;">
|
|
||||||
<el-alert :closable="false" title="二级菜单" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
@ -0,0 +1,215 @@
|
|||||||
|
<!-- 效果统计 -->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>效果统计</span>
|
||||||
|
<el-button style="float: right" type="primary" @click="downloadLine">下载</el-button>
|
||||||
|
</div>
|
||||||
|
<div v-loading="tagLineLoading">
|
||||||
|
<div class="mt-5">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="chartData.selectTime"
|
||||||
|
type="datetimerange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
:picker-options="pickerOptions"
|
||||||
|
style="width: 230px;"
|
||||||
|
class="date-item mb-5"
|
||||||
|
/>
|
||||||
|
<el-select
|
||||||
|
v-model="chartData.tags"
|
||||||
|
multiple
|
||||||
|
filterable
|
||||||
|
allow-create
|
||||||
|
clearable
|
||||||
|
default-first-option
|
||||||
|
:multiple-limit="5"
|
||||||
|
placeholder="请输入tag"
|
||||||
|
style="min-width: 350px;"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in tagOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
@click="searchData"
|
||||||
|
>搜索
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div v-if="isLinechart">
|
||||||
|
<Line-chart :chart-data="lineChartData" />
|
||||||
|
</div>
|
||||||
|
<div v-else style="height: 300px;">
|
||||||
|
<el-empty description="暂无数据" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LineChart from '@/components/Echarts/LineChart'
|
||||||
|
// import DateRangePicker from '@/components/DateRangePicker'
|
||||||
|
// import dayjs from 'dayjs'
|
||||||
|
import { queryActivityLine, uploadCallFileDownload } from '@/api/index'
|
||||||
|
import { downloadFile } from '@/utils/index'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'EffectStatistics',
|
||||||
|
components: {
|
||||||
|
LineChart
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lineChartData: null,
|
||||||
|
tagLineLoading: false,
|
||||||
|
pickerMinDate: null,
|
||||||
|
pickerMaxDate: null,
|
||||||
|
isLinechart: false,
|
||||||
|
chartData: {
|
||||||
|
selectTime: [],
|
||||||
|
tags: []
|
||||||
|
},
|
||||||
|
tagOptions: [],
|
||||||
|
pickerOptions: {
|
||||||
|
// onPick: ({ maxDate, minDate }) => {
|
||||||
|
// this.pickerMinDate = minDate.getTime()
|
||||||
|
// if (maxDate) {
|
||||||
|
// this.pickerMaxDate = maxDate.getTime()
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// disabledDate(time) {
|
||||||
|
// // const curDate = new Date().getTime()
|
||||||
|
// const three = (30 - 1) * 24 * 3600 * 1000
|
||||||
|
// if (this.pickerMinDate !== '' && this.pickerMaxDate !== '') {
|
||||||
|
// let maxTime = this.pickerMinDate + three
|
||||||
|
// if (maxTime > new Date()) {
|
||||||
|
// maxTime = new Date()
|
||||||
|
// }
|
||||||
|
// return time.getTime() > maxTime || time.getTime() > Date.now()
|
||||||
|
// }
|
||||||
|
// if (this.pickerMaxDate !== '' && this.pickerMinDate !== '') {
|
||||||
|
// const minTime = this.pickerMaxDate - three
|
||||||
|
// let maxTime = this.pickerMinDate + three
|
||||||
|
// if (maxTime > new Date()) {
|
||||||
|
// maxTime = new Date()
|
||||||
|
// }
|
||||||
|
// return time.getTime() < minTime || time.getTime() > maxTime
|
||||||
|
// }
|
||||||
|
// return time.getTime() > Date.now()
|
||||||
|
// },
|
||||||
|
shortcuts: [{
|
||||||
|
text: '最近一周',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||||
|
picker.$emit('pick', [start, end])
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近一个月',
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date()
|
||||||
|
const start = new Date()
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||||
|
picker.$emit('pick', [start, end])
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
searchData() {
|
||||||
|
if (!this.chartData.selectTime || this.chartData.selectTime.length !== 2) {
|
||||||
|
this.$message({
|
||||||
|
message: '请选择筛选日期',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (this.chartData.tags.length === 0) {
|
||||||
|
this.$message({
|
||||||
|
message: '请输入Tag',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const data = Object.assign({}, this.chartData)
|
||||||
|
if (this.chartData.selectTime && this.chartData.selectTime.length === 2) {
|
||||||
|
data.startTime = this.chartData.selectTime[0]
|
||||||
|
data.endTime = this.chartData.selectTime[1]
|
||||||
|
}
|
||||||
|
delete data.selectTime
|
||||||
|
queryActivityLine(data).then(res => {
|
||||||
|
if (res.data) {
|
||||||
|
const seriesArr = []
|
||||||
|
const xData = Object.keys(res.data[Object.keys(res.data)[0]])
|
||||||
|
this.isLinechart = false
|
||||||
|
for (const i in res.data) {
|
||||||
|
const data = Object.values(res.data[i])
|
||||||
|
if (this.isLinechart === false) {
|
||||||
|
this.isLinechart = !data.every(item => item === 0)
|
||||||
|
}
|
||||||
|
const obj = {}
|
||||||
|
obj.data = data
|
||||||
|
obj.type = 'line'
|
||||||
|
obj.stack = 'Total'
|
||||||
|
obj.name = i
|
||||||
|
seriesArr.push(obj)
|
||||||
|
}
|
||||||
|
const chartDatas = {
|
||||||
|
xAxis: xData,
|
||||||
|
seriesArr
|
||||||
|
}
|
||||||
|
this.lineChartData = chartDatas
|
||||||
|
!this.isLinechart && this.$message('未查询到相关数据')
|
||||||
|
}
|
||||||
|
this.tagLineLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
downloadLine() {
|
||||||
|
if (!this.chartData.selectTime || this.chartData.selectTime.length !== 2) {
|
||||||
|
this.$message({
|
||||||
|
message: '请选择筛选日期',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (this.chartData.tags.length === 0) {
|
||||||
|
this.$message({
|
||||||
|
message: '请输入Tag',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const data = Object.assign({}, this.chartData)
|
||||||
|
if (this.chartData.selectTime && this.chartData.selectTime.length === 2) {
|
||||||
|
data.startTime = this.chartData.selectTime[0]
|
||||||
|
data.endTime = this.chartData.selectTime[1]
|
||||||
|
}
|
||||||
|
delete data.selectTime
|
||||||
|
uploadCallFileDownload(data).then(res => {
|
||||||
|
downloadFile(res, '活动导出', 'xlsx')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
padding: 18px 22px 33px 22px;
|
||||||
|
min-height: calc(100vh - 84px);
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue