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