Skip to content

I
intel_promotion_manage
Commit a85fb3c4 authored by 杨硕's avatar 杨硕
Browse files
Options

对接首页统计图接口

parent 8ca45b9a
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 40 deletions
src/views/contentManagement/newsInformation/index.vue
View file @ a85fb3c4
......@@ -463,7 +463,7 @@ export default {
this.intervalId = setInterval(() => {
queryCrawlerStatus({ id: this.checkId }).then(res => {
if (res.data.status === '1') {
this.$message.success('抓取成功')
this.$message.success('成功添加' + res.data.num + '条数据')
this.webLoading = false
this.imgLoading = false
this.loadData()
......
src/views/dashboard/index/index.vue
View file @ a85fb3c4
......@@ -86,9 +86,12 @@
<div slot="header" class="clearfix">
<span>代言人推广次数展示:</span>
</div>
<div id="echarts-peoplePromotionFrequency" class="span_1">
<div v-show="barShow" id="echarts-peoplePromotionFrequency" class="span_1">
<div id="dataCharts_peoplePromotionFrequency" style="height: 16vh" />
</div>
<div v-show="!barShow" class="nodata" style="height: 16vh">
暂无数据
</div>
</el-card>
</el-col>
<el-col :span="8" style="height: 100%">
......@@ -103,11 +106,11 @@
style="width: 100%"
class="top"
>
<el-table-column type="index" label="序号" align="center" />
<el-table-column prop="name" label="姓名" align="center" />
<el-table-column prop="phone" label="手机号" align="center" />
<el-table-column prop="clickThroughRate" label="推广次数" align="center" />
<el-table-column prop="price" label="金额" align="center" />
<el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"/>
<el-table-column prop="name" label="姓名" width="80" :show-overflow-tooltip="true"/>
<el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"/>
<el-table-column prop="clickThroughRate" label="推广次数" width="80" :show-overflow-tooltip="true"/>
<el-table-column prop="price" label="金额" width="50" :show-overflow-tooltip="true"/>
</el-table>
<vue-seamless-scroll
:data="list"
......@@ -120,11 +123,11 @@
style="width: 100%"
class="bottom"
>
<el-table-column type="index" label="序号" align="center" />
<el-table-column prop="name" label="姓名" align="center" />
<el-table-column prop="phone" label="手机号" align="center" />
<el-table-column prop="clickThroughRate" label="推广次数" align="center" />
<el-table-column prop="price" label="金额" align="center" />
<el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"/>
<el-table-column prop="name" label="姓名" width="80" :show-overflow-tooltip="true"/>
<el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true" />
<el-table-column prop="clickThroughRate" label="推广次数" width="80" :show-overflow-tooltip="true"/>
<el-table-column prop="price" label="金额" width="50" :show-overflow-tooltip="true"/>
</el-table>
</vue-seamless-scroll>
......@@ -143,9 +146,12 @@
<div class="videNum">视频总推广次数:</div>
</div>
</div>
<div id="echarts-textPieChart" class="span_1">
<div v-show="pieShow" id="echarts-textPieChart" class="span_1" v-loading="loading">
<div id="dataCharts_textPieChart" style="height: 16vh" />
</div>
<div v-show="!pieShow" class="nodata" style="height: 16vh">
暂无数据
</div>
</el-card>
</el-col>
......@@ -168,9 +174,12 @@
</el-button>
</div>
</el-row>
<div id="echarts-leaveMessage" class="span_1">
<div v-show="promotionShow" id="echarts-leaveMessage" class="span_1" v-loading="loading">
<div id="dataCharts_leaveMessage" style="height: 10vh" />
</div>
<div v-show="!promotionShow" class="nodata" style="height: 10vh">
暂无数据
</div>
</el-card>
</el-col>
</el-row>
......@@ -193,6 +202,7 @@ export default {
}
return {
list: [],
loading: true,
allowScroll: true,
isActive: '1',
activeName: 'first',
......@@ -222,7 +232,10 @@ export default {
promotionArticle: [], // 柱状图文章
promotionArticleNum: [], // 柱状图文章推广次数
promotionVideo: [], // 柱状图视频
promotionVideoNum: [] // 柱状图视频推广次数
promotionVideoNum: [], // 柱状图视频推广次数
barShow: true,
pieShow: true,
promotionShow: true
}
},
computed: {
......@@ -294,15 +307,16 @@ export default {
methods: {
/** 切换所属商家*/
changeCompany() {
this.getTableData() // 代言人，文章，视频数据
this.handleGetPeoplePromotionFrequency()
this.handleGetPeopleTextPie()
this.getPromotionArticle()
this.deptList.forEach(item => {
if (item.businessId === this.company) {
this.companyName = item.unitName
}
})
this.getTableData() // 代言人，文章，视频数据
this.handleGetPeoplePromotionFrequency()
this.handlePieData()
// this.handleGetPeopleTextPie()
this.getPromotionArticle()
},
/** 商家下拉*/
getDeptList() {
......@@ -315,7 +329,8 @@ export default {
this.getTableData() // 代言人，文章，视频数据
this.handleGetTextVideoEcharts() // 文章视频echarts更新
this.handleGetPeoplePromotionFrequency() // 代言人文章视频推广次数统计
this.handleGetPeopleTextPie() // 代言人文章视频饼图
this.handlePieData()
// this.handleGetPeopleTextPie() // 代言人文章视频饼图
this.getPromotionArticle() // 滚动表格数据
}
})
......@@ -354,6 +369,11 @@ export default {
// 文章视频推广次数柱状图
handleGetTextVideoEcharts() {
if (this.isActive === '1') {
if (this.promotionArticle.length <= 0) {
this.promotionShow = false
} else {
this.promotionShow = true
}
const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
const optionAverage = {
tooltip: {
......@@ -371,7 +391,18 @@ export default {
},
xAxis: {
type: 'category',
data: ['文章1', '文章2', '文章3', '文章4', '文章5']
// data: ['文章1', '文章2', '文章3', '文章4', '文章5']
data: this.promotionArticle,
axisLabel: {
formatter: function(value) {
// 使用 15 个字符作为换行的阈值
if (value.length > 10) {
return value.substring(0, 10) + '\n' + value.substring(10)
} else {
return value
}
}
}
},
yAxis: {
type: 'value'
......@@ -383,12 +414,18 @@ export default {
// 设置柱状图的颜色
color: '#91CC75'
},
data: [19, 11, 23, 9, 18]
// data: [19, 11, 23, 9, 18]
data: this.promotionArticleNum
}]
}
myChartAverage.setOption(optionAverage)
}
if (this.isActive === '2') {
if (this.promotionVideo.length <= 0) {
this.promotionShow = false
} else {
this.promotionShow = true
}
const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
const optionAverage = {
tooltip: {
......@@ -406,7 +443,8 @@ export default {
},
xAxis: {
type: 'category',
data: ['视频1', '视频2', '视频3', '视频4', '视频5']
// data: ['视频1', '视频2', '视频3', '视频4', '视频5']
data: this.promotionVideo
},
yAxis: {
type: 'value'
......@@ -418,7 +456,8 @@ export default {
// 设置柱状图的颜色
color: '#91CC75'
},
data: [1, 2, 3, 4, 5]
// data: [1, 2, 3, 4, 5]
data: this.promotionVideoNum
}]
}
myChartAverage.setOption(optionAverage)
......@@ -430,6 +469,11 @@ export default {
console.log('res', res)
if (res.code === 200) {
const barChar = res.data
if (res.data == null || res.data.length <= 0) {
this.barShow = false
} else {
this.barShow = true
}
this.barNameList = barChar.map(item => item.name)
this.barArticle = barChar.map(item => item.newsRate)
this.barVideo = barChar.map(item => item.videoRate)
......@@ -482,18 +526,54 @@ export default {
}
})
},
/** 代言人文章饼图*/
handleGetPeopleTextPie() {
handlePieData() {
this.pieShow = true
this.loading = true
pieChart({ businessId: this.company, type: 0 }).then(res => {
if (res.code === 200) {
if (res.data === null || res.data.length <= 0) {
this.pieShow = false
this.loading = false
}
console.log('饼状图', res.data)
this.pieArticle = []
res.data.forEach(item => {
const article = {
value: item.rate,
name: item.title
// itemStyle: { color: '#54C0D8' }
}
this.pieArticle.push(article)
})
console.log('this.pieArticle', this.pieArticle)
this.promotionArticle = res.data.map(item => item.title)
this.promotionArticleNum = res.data.map(item => item.rate)
}
})
pieChart({ businessId: this.company, type: 1 }).then(res => {
if (res.code === 200) {
console.log('饼状图', res.data)
this.pieVideo = []
res.data.forEach(item => {
const article = {
value: item.rate,
name: item.title
// itemStyle: { color: '#54C0D8' }
}
this.pieVideo.push(article)
})
this.promotionVideo = res.data.map(item => item.title)
this.promotionVideoNum = res.data.map(item => item.rate)
}
})
setTimeout(() => {
this.loading = false
this.handleGetPeopleTextPie()
this.handleGetTextVideoEcharts()
}, 2000)
},
/** 代言人文章饼图*/
handleGetPeopleTextPie() {
const myChartPeopleTextPie = echarts.init(document.getElementById('dataCharts_textPieChart'))
const optionAverage = {
tooltip: {
......@@ -509,26 +589,28 @@ export default {
type: 'pie',
radius: '85%',
center: ['25%', '50%'], // 设置饼图的中心位置
data: [
{ value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
{ value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
{ value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
{ value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
{ value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
]
// data: [
// { value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
// { value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
// { value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
// { value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
// { value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
// ]
data: this.pieArticle
},
{
name: '视频',
type: 'pie',
radius: '85%',
center: ['75%', '50%'], // 设置饼图的中心位置
data: [
{ value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
{ value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
{ value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
{ value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
{ value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
]
// data: [
// { value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
// { value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
// { value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
// { value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
// { value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
// ]
data: this.pieVideo
}
]
}
......@@ -653,6 +735,11 @@ export default {
display: flex;
width: 100%;
}
.nodata {
display: flex;
align-items: center;
justify-content: center;
}
>>> .top .el-table__body-wrapper {
display: none !important;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment