更新直播监控
parent
36ac429e01
commit
2072e6d0d2
@ -1,115 +1,117 @@
|
||||
{
|
||||
"name": "eladmin-web",
|
||||
"version": "2.6.0",
|
||||
"description": "拓众后台文件管理",
|
||||
"author": "Zheng Jie",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
"build:prod": "vue-cli-service build",
|
||||
"build:stage": "vue-cli-service build --mode staging",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml",
|
||||
"new": "plop"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{js,vue}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/elunez/eladmin-web.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/elunez/eladmin/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"clipboard": "2.0.4",
|
||||
"codemirror": "^5.49.2",
|
||||
"connect": "3.6.6",
|
||||
"echarts": "^4.2.1",
|
||||
"echarts-gl": "^1.1.1",
|
||||
"echarts-wordcloud": "^1.1.3",
|
||||
"element-ui": "^2.13.2",
|
||||
"file-saver": "1.3.8",
|
||||
"fuse.js": "3.4.4",
|
||||
"js-beautify": "^1.10.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "^3.0.0-rc.1",
|
||||
"jszip": "3.1.5",
|
||||
"mavon-editor": "^2.9.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"qs": "^6.9.1",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"vue": "2.6.10",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-echarts": "^5.0.0-beta.0",
|
||||
"vue-highlightjs": "^1.3.3",
|
||||
"vue-image-crop-upload": "^2.5.0",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0",
|
||||
"wangeditor": "^3.1.1",
|
||||
"xlsx": "^0.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/parser": "^7.7.4",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.5.3",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
"@vue/cli-plugin-unit-jest": "3.5.3",
|
||||
"@vue/cli-service": "3.5.3",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "23.6.0",
|
||||
"babel-plugin-dynamic-import-node": "2.3.0",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"chalk": "2.4.2",
|
||||
"chokidar": "2.1.5",
|
||||
"connect": "3.6.6",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"http-proxy-middleware": "^0.19.1",
|
||||
"husky": "1.3.1",
|
||||
"lint-staged": "8.1.5",
|
||||
"plop": "2.3.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "0.7.2",
|
||||
"serve-static": "^1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.0",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
{
|
||||
"name": "eladmin-web",
|
||||
"version": "2.6.0",
|
||||
"description": "拓众后台文件管理",
|
||||
"author": "Zheng Jie",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
"build:prod": "vue-cli-service build",
|
||||
"build:stage": "vue-cli-service build --mode staging",
|
||||
"preview": "node build/index.js --preview",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml",
|
||||
"new": "plop"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{js,vue}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/elunez/eladmin-web.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/elunez/eladmin/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"clipboard": "2.0.4",
|
||||
"codemirror": "^5.49.2",
|
||||
"connect": "3.6.6",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^4.2.1",
|
||||
"echarts-gl": "^1.1.1",
|
||||
"echarts-wordcloud": "^1.1.3",
|
||||
"element-ui": "^2.13.2",
|
||||
"file-saver": "1.3.8",
|
||||
"fuse.js": "3.4.4",
|
||||
"js-beautify": "^1.10.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "^3.0.0-rc.1",
|
||||
"jszip": "3.1.5",
|
||||
"mavon-editor": "^2.9.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"qs": "^6.9.1",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"vue": "2.6.10",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-echarts": "^5.0.0-beta.0",
|
||||
"vue-highlightjs": "^1.3.3",
|
||||
"vue-image-crop-upload": "^2.5.0",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "2.20.0",
|
||||
"vuex": "3.1.0",
|
||||
"wangeditor": "^3.1.1",
|
||||
"xlsx": "^0.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/parser": "^7.7.4",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.5.3",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
"@vue/cli-plugin-unit-jest": "3.5.3",
|
||||
"@vue/cli-service": "3.5.3",
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"autoprefixer": "^9.5.1",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"babel-eslint": "10.0.1",
|
||||
"babel-jest": "23.6.0",
|
||||
"babel-plugin-dynamic-import-node": "2.3.0",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"chalk": "2.4.2",
|
||||
"chokidar": "2.1.5",
|
||||
"connect": "3.6.6",
|
||||
"core-js": "^3.34.0",
|
||||
"eslint": "5.15.3",
|
||||
"eslint-plugin-vue": "5.2.2",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"http-proxy-middleware": "^0.19.1",
|
||||
"husky": "1.3.1",
|
||||
"lint-staged": "8.1.5",
|
||||
"plop": "2.3.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass": "^1.26.10",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
"script-loader": "0.7.2",
|
||||
"serve-static": "^1.13.2",
|
||||
"svg-sprite-loader": "4.1.3",
|
||||
"svgo": "1.2.0",
|
||||
"vue-template-compiler": "2.6.10"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
|
||||
@ -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