Skip to content

C
common-templete
Commit 652d58c0 by 高淑倩
Options

add:apidata

parent ef9e5a84
Showing with 637 additions and 397 deletions
.eslintrc.js
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
module.exports = { module.exports = {
root: true, root: true,
parserOptions: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint',
}, },
env: { env: {
browser: true, browser: true,
...@@ -11,19 +11,21 @@ module.exports = { ...@@ -11,19 +11,21 @@ module.exports = {
extends: [ extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential', 'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md // https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard' 'standard',
], ],
// required to lint *.vue files // required to lint *.vue files
plugins: [ plugins: ['vue'],
'vue'
],
// add your custom rules here // add your custom rules here
rules: { rules: {
// allow async-await // allow async-await
'generator-star-spacing': 'off', 'generator-star-spacing': 'off',
// allow debugger during development // allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
} 'no-useless-escape': 'off',
'no-tabs': 'off',
'comma-dangle': 0,
'space-before-function-paren': [0, 'always'],
},
} }
src/components/Pagination/index.vue
<template> <template>
<div class="block"> <div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="dataList.totalCount"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="pushlist.totalCount">
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
currentPage: 1 currentPage: 1
} }
}, },
props: ['dataList'], props: ['pushlist'],
methods: { methods: {
handleSizeChange (val) { handleSizeChange (val) {
console.log(`每页 ${val} 条`) console.log(`每页 ${val} 条`)
......
src/main.js
...@@ -9,30 +9,27 @@ import './assets/styles/reset.css' ...@@ -9,30 +9,27 @@ import './assets/styles/reset.css'
import './assets/styles/common.css' import './assets/styles/common.css'
import 'animate.css' import 'animate.css'
// import 'element-ui/lib/theme-chalk/index.css' // import 'element-ui/lib/theme-chalk/index.css'
import qs from 'qs' // import qs from 'qs'
import store from './store' import store from './store'
import Axios from 'axios' import Axios from 'axios'
import * as filters from './filters' import * as filters from './filters'
// 引入echarts // 引入echarts
import echarts from 'echarts' // import echarts from 'echarts'
import VCharts from 'v-charts' import VCharts from 'v-charts'
import plugins from './plugin' import plugins from './plugin'
Vue.use(ElementUI)
Vue.use(VCharts) Vue.use(VCharts)
Axios.defaults.withCredentials = true // 让ajax携带cookie
// const AUTH_TOKEN = Axios.defaults.withCredentials = true // 让ajax携带cookie
// 'normal-template-group-id=; cur_menu_index=2,0,0; JSESSIONID=B2F75494E6A8EE17E02290C6BB416CD5; UM_distinctid=166ccdf0e5f70d-05e2e61a01177d-b79193d-1fa400-166ccdf0e6036f; CNZZDATA1259419277=1964719690-1541039590-http%253A%252F%252Ftestcenter.bigaka.net%252F%7C1541039590; Hm_lvt_e2d87cf3717dbcd37c38af18128178c1=1541035458,1541125643,1541400895; CNZZDATA1263189240=393444180-1541032734-http%253A%252F%252Ftestcenter.bigaka.net%252F%7C1541399561; Hm_lpvt_e2d87cf3717dbcd37c38af18128178c1=1541404581; token=QuY4MdyNXUjnOSmTTn17apD9vxc' const AUTH_TOKEN = 'doX8dJusNpe3Tb77mzRhz2JgdCU'
// const AUTH_TOKEN = 'QuY4MdyNXUjnOSmTTn17apD9vxc' Axios.defaults.headers.common['token'] = AUTH_TOKEN
// Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
// Axios.defaults.headers.common['Cookie'] = AUTH_TOKEN
Axios.interceptors.request.use( Axios.interceptors.request.use(
config => { config => {
if (config.method === 'post') { if (config.method === 'post') {
config.data = qs.stringify(config.data) // config.data = qs.stringify(config.data)
config.headers['Content-Type'] = 'application/x-www-form-urlencoded' config.headers['Content-Type'] = 'application/json'
} }
return config return config
}, },
...@@ -41,8 +38,6 @@ Axios.interceptors.request.use( ...@@ -41,8 +38,6 @@ Axios.interceptors.request.use(
} }
) )
Vue.use(ElementUI)
Object.keys(plugins).forEach(key => { Object.keys(plugins).forEach(key => {
const plugin = plugins[key] const plugin = plugins[key]
Vue.use(plugin) Vue.use(plugin)
...@@ -54,7 +49,7 @@ Object.keys(filters).forEach(key => { ...@@ -54,7 +49,7 @@ Object.keys(filters).forEach(key => {
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.axios = Axios Vue.prototype.axios = Axios
Vue.prototype.$echarts = echarts // Vue.prototype.$echarts = echarts
Object.keys(filters).forEach(key => { Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]) Vue.filter(key, filters[key])
......
src/pages/marketing-center/components/AddMessage.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="left-title button-left" style="flex:2"> <div class="left-title button-left" style="flex:2">
<div class="left-title-name fl"> <div class="left-title-name fl">
<span> <span>
<img src="./../../../assets/images/wechat.png"> <img src="@/assets/images/wechat.png">
</span> </span>
<span class="title">微信触达域-公众号</span> <span class="title">微信触达域-公众号</span>
<span class="star-red">*</span> <span class="star-red">*</span>
...@@ -13,20 +13,20 @@ ...@@ -13,20 +13,20 @@
</div> </div>
<div class="left-title-message fr"> <div class="left-title-message fr">
<span> <span>
<img src="./../../../assets/images/auth.png"> <img src="@/assets/images/auth.png">
</span> </span>
</div> </div>
</div> </div>
<div class="left-icon"> <div class="left-icon">
<div class="icon-left fl"> <div class="icon-left fl">
<span class="icon-wechat" @click="handleAddMaterial"> <span class="icon-wechat" @click="handleAddMaterial">
<img src="./../../../assets/images/picture.png"> <img src="@/assets/images/picture.png">
</span> </span>
<p class="title-center icon-wechat-msg">图文素材消息</p> <p class="title-center icon-wechat-msg">图文素材消息</p>
</div> </div>
<div class="icon-right"> <div class="icon-right">
<span class="icon-wechat"> <span class="icon-wechat">
<img src="./../../../assets/images/temp.png" @click="handleAddTemp"> <img src="@/assets/images/temp.png" @click="handleAddTemp">
</span> </span>
<p class="icon-wechat-msg title-center">营销模板消息</p> <p class="icon-wechat-msg title-center">营销模板消息</p>
</div> </div>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="left-title button-right" style="flex:1"> <div class="left-title button-right" style="flex:1">
<div class="left-title-name fl"> <div class="left-title-name fl">
<span> <span>
<img src="./../../../assets/images/message.png"> <img src="@/assets/images/message.png">
</span> </span>
<span class="title">移动触达域-短信</span> <span class="title">移动触达域-短信</span>
<span class="star-red">*</span> <span class="star-red">*</span>
...@@ -44,14 +44,14 @@ ...@@ -44,14 +44,14 @@
</div> </div>
<div class="left-title-message fr"> <div class="left-title-message fr">
<span> <span>
<img src="./../../../assets/images/unauth.png"> <img src="@/assets/images/unauth.png">
</span> </span>
</div> </div>
</div> </div>
<div class="right-marketing"> <div class="right-marketing">
<div> <div>
<span class="icon-wechat"> <span class="icon-wechat">
<img src="./../../../assets/images/message.png" @click="handleAddMessage"> <img src="@/assets/images/message.png" @click="handleAddMessage">
</span> </span>
<p class="icon-wechat-msg title-center">短信营销消息</p> <p class="icon-wechat-msg title-center">短信营销消息</p>
</div> </div>
...@@ -67,23 +67,19 @@ ...@@ -67,23 +67,19 @@
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return {} return {}
}, },
components: {}, components: {},
computed: {}, computed: {},
mounted () {}, mounted() {},
methods: { methods: {
handleAddMaterial () { handleAddMaterial() {
this.$router.push('addmarketing') this.$router.push('addmarketing')
}, },
handleAddTemp () { handleAddTemp() {},
console.log('handleAddTemp') handleAddMessage() {},
}, },
handleAddMessage () {
console.log('handleAddMessage')
}
}
} }
</script> </script>
<style lang='stylus' scoped> <style lang='stylus' scoped>
......
src/pages/marketing-center/components/ArticleChart.vue deleted 100644 → 0
<template>
<div>
<el-col :span="6">
<div id="artChart" :style="{width: '200px', height: '100px'}"></div>
</el-col>
</div>
</template>
<script>
export default {
props: ['item'],
mounted () {
this.drawLine()
// console.log('acount', this.item.oriPageReadUser)
// console.log('auser', this.item.oriPageReadCount)
},
methods: {
drawLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('artChart'))
// 绘制图表
myChart.setOption({
xAxis: {
type: 'category',
show: false
},
yAxis: {
type: 'value',
show: false
},
series: [
{
data: [28, 85, 9, 41, 17, 99, 7],
type: 'line'
}
]
})
}
}
}
</script>
src/pages/marketing-center/components/ArticleDetails.vue
<template> <template>
<div class="article-details"> <div class="article-details">
<div class="title">• 文章详情</div> <div class="title">• 文章详情</div>
<el-row :gutter="20" v-for="(item,index) in datalist" :key="index"> <el-row :gutter="20" v-for="(item,index) in GetarticleListTmp" :key="index">
<el-col :span="4" :offset="1"> <el-col :span="4" :offset="1">
<div class="article-img"> <div class="article-img">
<img :src="item.thumb_url" class="img-size"> <img :src="item.thumb_url" class="img-size">
...@@ -31,66 +31,64 @@ ...@@ -31,66 +31,64 @@
</div> </div>
</el-col> </el-col>
<el-col :span="10" class="articleChart"> <el-col :span="10" class="articleChart">
<!-- <ve-line :data="item.tempList" :extend="extend" :tooltip-visible="false" :legend-visible="false"></ve-line> --> <ve-line :data="item.chartData" height="110px" :grid="grid" :extend="extend" :tooltip-visible="false" :legend-visible="false"></ve-line>
<ve-line :data="item.chartData" height="180px" :grid="grid" :extend="extend" :tooltip-visible="false"></ve-line>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import ArticleChart from './ArticleChart'
export default { export default {
data () { data() {
this.extend = { this.extend = {
series: { series: {
smooth: 0 smooth: 0,
}, },
yAxis: { yAxis: {
splitLine: { show: false } splitLine: { show: false },
}, },
'xAxis.0.axisLabel.show': false, // x轴标签不显示 'xAxis.0.axisLabel.show': false, // x轴标签不显示
'yAxis.0.axisLabel.show': false, // y轴标签不显示 'yAxis.0.axisLabel.show': false, // y轴标签不显示
'xAxis.0.splitLine.show': false // x轴表格线不显示 'xAxis.0.splitLine.show': false, // x轴表格线不显示
} }
this.grid = { this.grid = {
left: 40, left: 40,
eight: 40, eight: 40,
show: true, show: true,
backgroundColor: '#fff', backgroundColor: '#fff',
borderColor: '#FFF' borderColor: '#FFF',
} }
return { return {
chartData: { chartData: {
columns: ['日期', '图文总阅读人数', '图文总阅读次数'], columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
rows: [] rows: [],
}, },
articleList: [] articleList: [],
} }
}, },
created () { computed: {
this.datalist.forEach((item, index) => { GetarticleListTmp() {
const tempList = [] this.GetarticleList.forEach((item, index) => {
// 拼接 rows const tempList = []
item.mediaGetarticles.forEach(article => { // 拼接 rows
const { refDate, oriPageReadCount, oriPageReadUser } = article item.mediaGetarticles.forEach(article => {
tempList.push({ const { refDate, oriPageReadCount, oriPageReadUser } = article
'日期': refDate, tempList.push({
'图文总阅读人数': oriPageReadUser, 日期: refDate,
'图文总阅读次数': oriPageReadCount 图文总阅读人数: oriPageReadUser,
图文总阅读次数: oriPageReadCount,
})
}) })
item.tempList = tempList
// 拼接图标所需数据
item.chartData = {
columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
rows: item.tempList,
}
}) })
item.tempList = tempList return this.GetarticleList
item.chartData = { },
columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
rows: item.tempList
}
})
}, },
props: ['datalist'], props: ['GetarticleList'],
components: {
ArticleChart
}
} }
</script> </script>
...@@ -102,6 +100,7 @@ export default { ...@@ -102,6 +100,7 @@ export default {
.title .title
height 30px height 30px
line-height 30px line-height 30px
margin-bottom 10px
.article-img .article-img
height 90px height 90px
.img-size .img-size
...@@ -117,8 +116,4 @@ export default { ...@@ -117,8 +116,4 @@ export default {
line-height 50px line-height 50px
padding-right 30px padding-right 30px
font-size 16px font-size 16px
.el-row
margin-bottom 10px
&:last-child
margin-bottom 0
</style> </style>
src/pages/marketing-center/components/MarketingPush.vue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<el-row class="marketing-subtitle"> <el-row class="marketing-subtitle">
<el-col :span="6" class="subtitle-img"> <el-col :span="6" class="subtitle-img">
<span> <span>
<img src="./../../../assets/images/avatar.png"> <img src="@/assets/images/avatar.png">
</span> </span>
</el-col> </el-col>
<el-col :span="18" class="subtitle-tips"> <el-col :span="18" class="subtitle-tips">
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<el-row> <el-row>
<el-col :span="12" class="wechat-icon"> <el-col :span="12" class="wechat-icon">
<span> <span>
<img src="./../../../assets/images/wechat.png"> <img src="@/assets/images/wechat.png">
</span> </span>
<span>微信触达域-公众号</span> <span>微信触达域-公众号</span>
<span> <span>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
</el-col> </el-col>
<el-col :span="12" class="wechat-icon"> <el-col :span="12" class="wechat-icon">
<span> <span>
<img src="./../../../assets/images/message.png"> <img src="@/assets/images/message.png">
</span> </span>
<span>移动触达域-短信</span> <span>移动触达域-短信</span>
<span> <span>
...@@ -55,13 +55,13 @@ ...@@ -55,13 +55,13 @@
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return {} return {}
}, },
components: {}, components: {},
computed: {}, computed: {},
mounted () {}, mounted() {},
methods: {} methods: {},
} }
</script> </script>
<style lang='stylus' scoped> <style lang='stylus' scoped>
......
src/pages/marketing-center/components/MarketingTab.vue
<template> <template>
<el-tabs v-model="tabActive" type="card" class="market-tabs"> <el-tabs v-model="tabActive" type="card" class="market-tabs" @tab-click="handleClick">
<el-tab-pane label="图文素材消息" name="first"> <el-tab-pane label="图文素材消息" name="first">
<materia-list :imgList="imgList" @sendid="handleId"></materia-list> <materia-list :imgList="imgList" @sendid="handleId"></materia-list>
<push-detail></push-detail> <push-detail v-loading="loading" v-if="pushlist" :mediaId="mediaId" :pushlist="pushlist"></push-detail>
<material-details v-if="materialChartList&&materialChartList.length" :datalist="datalist" :MediaSummary="MediaSummary" :materialChartList="materialChartList"></material-details> <material-details v-if="materialChartList&&materialChartList.length" :MediaList="MediaList" :materialChartList="materialChartList"></material-details>
<article-details v-if="articleChartList&&articleChartList.length" :datalist="datalist"></article-details> <article-details v-if="GetarticleList&&GetarticleList.length" :GetarticleList="GetarticleList"></article-details>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="营销模版消息" name="second"> <el-tab-pane label="营销模版消息" name="second">
<temp-list></temp-list> <temp-list :templist="templist" @search="handleSearch" @reset="handleReset" @pageChange="pageChange"></temp-list>
</el-tab-pane>
<el-tab-pane label="短信营销消息" name="third">
<message-list :msgList="msgList" @search="handleMsgSearch" @reset="handleMsgReset" @pageChange="msgPageChange"></message-list>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="短信营销消息" name="third">表格</el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
<script> <script>
import http from '@/tool/http'
import api from '@/tool/api'
import MateriaList from './MateriaList' import MateriaList from './MateriaList'
import PushDetail from './PushList' import PushDetail from './PushList'
import MaterialDetails from './MaterialDetails' import MaterialDetails from './MaterialDetails'
import ArticleDetails from './ArticleDetails' import ArticleDetails from './ArticleDetails'
import TempList from './TempList' import TempList from './TempList'
import MessageList from './MessageList'
export default { export default {
data () { data() {
return { return {
tabActive: 'first', tabActive: 'first',
imgList: [], imgList: [],
mediaId: '', mediaId: '',
datalist: [], datalist: [],
pushlist: [],
MediaSummary: {}, MediaSummary: {},
articleChartList: [], materialChartList: [],
materialChartList: [] loading: true,
GetarticleList: [],
MediaList: [],
templist: [],
msgList: [],
} }
}, },
components: { components: {
...@@ -36,53 +47,188 @@ export default { ...@@ -36,53 +47,188 @@ export default {
MateriaList, MateriaList,
MaterialDetails, MaterialDetails,
ArticleDetails, ArticleDetails,
TempList TempList,
MessageList,
}, },
created () { created() {
this.getDataList() // 初始化
this.getData()
// 点击
// this.getDataList()
}, },
methods: { methods: {
// 图文素材 handleMsgSearch(e) {
getDataList () { this.handleGetSearchData(e)
},
handleMsgReset(e) {
this.handleGetSearchData(e)
},
msgPageChange(pageNo) {
this.getMessageList((this.pageNo = pageNo))
},
pageChange(pageNo) {
this.getTempList((this.pageNo = pageNo))
},
handleSearch(e) {
this.handleGetSearchData(e)
},
handleReset(e) {
this.handleGetSearchData(e)
},
handleGetSearchData(params) {
this.axios.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/list-data', params).then(res => {
this.templist = res.data.result
this.msgList = res.data.result
})
},
handleClick(tab, event) {
if (this.tabActive === 'second') {
this.getTempList((this.pageNo = 1))
}
if (this.tabActive === 'third') {
this.getMessageList((this.pageNo = 1))
}
},
async getData(type = 1) {
let params = {
pageNo: 1,
pageSize: 10,
}
this.loading = true
let getMaterialsRes = await http.post(params, api.getMaterialsList)
if (getMaterialsRes.data.code === 0) {
this.imgList = getMaterialsRes.data.result.result
localStorage.materList = JSON.stringify(this.imgList)
let imgId = this.imgList[0].media_id
let params = {
pageNo: 1,
pageSize: 10,
type,
mediaId: imgId,
}
let getPushRes = await http.post(params, api.getPushList)
if (getPushRes.data.code === 0) {
this.loading = false
this.pushlist = getPushRes.data.result
let params = {
mediaId: imgId,
}
let getArticleRes = await http.post(params, api.getarticlesummary)
if (getArticleRes.data.code === 0) {
// 素材总流量分析
this.MediaList = getArticleRes.data.result.wechatMediaSummary
// 素材单日流量分析
this.materialChartList = getArticleRes.data.result.wechatMediaSummary.mediaGetarticles.reverse()
// 文章流量分析
this.GetarticleList = getArticleRes.data.result.mediaGetarticle
}
}
}
},
handleId(params) {
this.mediaId = params
this.getPushDetail(this.mediaId)
this.getMaterianDatail(this.mediaId)
},
// 获取图文素材列表
getDataList() {
this.axios this.axios
// .post('/materials-list', { .post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list', {
.post('http://rap2api.taobao.org/app/mock/115626/materials-list', {
pageNo: 1, pageNo: 1,
pageSize: 10 pageSize: 10,
}) })
.then(res => { .then(res => {
if (res && res.data && res.data.code === 0) { if (res && res.data && res.data.code === 0) {
res.data.result.result.forEach(item => { this.imgList = res.data.result.result
this.imgList = item.content.news_item
})
localStorage.materList = JSON.stringify(this.imgList) localStorage.materList = JSON.stringify(this.imgList)
} }
}) })
}, },
// 推送列表
getPushDetail(id = this.mediaId) {
this.axios
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', {
pageNo: 1,
pageSize: 10,
type: 1,
mediaId: id,
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.loading = false
this.pushlist = res.data.result
}
})
},
// 模板列表
async getTempList(pageNo = this.pageNo) {
let params = {
pageNo: 1,
pageSize: 10,
}
let getMaterialsRes = await http.post(params, api.getMaterialsList)
if (getMaterialsRes.data.code === 0) {
this.imgList = getMaterialsRes.data.result.result
localStorage.materList = JSON.stringify(this.imgList)
let imgId = this.imgList[0].media_id
this.axios
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', {
pageNo: this.pageNo,
pageSize: 10,
type: 2,
mediaId: imgId,
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.templist = res.data.result
}
})
}
},
// 消息列表
async getMessageList(pageNo = this.pageNo) {
let params = {
pageNo: 1,
pageSize: 10,
}
let getMaterialsRes = await http.post(params, api.getMaterialsList)
if (getMaterialsRes.data.code === 0) {
this.imgList = getMaterialsRes.data.result.result
localStorage.materList = JSON.stringify(this.imgList)
let imgId = this.imgList[0].media_id
this.axios
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', {
pageNo: pageNo,
pageSize: 10,
type: 3,
mediaId: imgId,
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.msgList = res.data.result
}
})
}
},
// 素材详情 // 素材详情
GetMaterianDatail (id = this.mediaId) { getMaterianDatail(id = this.mediaId) {
this.axios this.axios
.get('/static/getarticlesummary.json', { .post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary', {
mediaId: id mediaId: id,
}) })
.then(res => { .then(res => {
// 文章流量分析 // 文章流量分析
this.datalist = res.data.result.mediaGetarticle this.GetarticleList = res.data.result.mediaGetarticle
// 文章单日流量分析
this.datalist.forEach(item => {
this.articleChartList = item.mediaGetarticles.reverse()
})
// 素材总流量分析 // 素材总流量分析
this.MediaSummary = res.data.result.wechatMediaSummary this.MediaList = res.data.result.wechatMediaSummary
// 素材单日流量分析 // 素材单日流量分析
this.materialChartList = res.data.result.wechatMediaSummary.mediaGetarticles.reverse() this.materialChartList = res.data.result.wechatMediaSummary.mediaGetarticles.reverse()
}) })
}, },
handleId (params) { },
this.mediaId = params
this.GetMaterianDatail()
}
}
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
......
src/pages/marketing-center/components/MateriaList.vue
<template> <template>
<div class="materialist clear"> <div class="materialist clear">
<ul> <ul :style="{width: ulWidth}">
<li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)"> <li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)" class="fl">
<img :src="item.thumb_url"> <img v-for="(mater,index) in item.content.news_item" :key="index" :src="mater.thumb_url">
</li> </li>
</ul> </ul>
</div> </div>
...@@ -10,21 +10,33 @@ ...@@ -10,21 +10,33 @@
<script> <script>
export default { export default {
data () {
return {
materialList: []
}
},
computed: {
ulWidth () {
return this.imgList.length * 240 + 80 + 'px'
}
},
props: ['imgList'], props: ['imgList'],
methods: { methods: {
handleClick (item) { handleClick (item) {
this.$emit('sendid', item.thumb_media_id) this.$emit('sendid', item.media_id)
} }
} }
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.materialist .materialist
width 1000px
overflow-x scroll
ul ul
width 100% width 3000px
height 217px height 217px
white-space nowrap white-space nowrap
overflow-x auto overflow-x scroll
margin-bottom 5px margin-bottom 5px
li li
display inline-block display inline-block
...@@ -33,10 +45,11 @@ export default { ...@@ -33,10 +45,11 @@ export default {
width 240px width 240px
height 200px height 200px
li img:hover li img:hover
border 1px solid skyblue border 2px solid skyblue
box-shadow 2px 2px 2px skyblue box-shadow 2px 2px 2px skyblue
/* 定义滚动条高宽及背景 */ /* 定义滚动条高宽及背景 */
::-webkit-scrollbar ::-webkit-scrollbar
width 16px
height 6px height 6px
/* 滑块 */ /* 滑块 */
::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb
......
src/pages/marketing-center/components/MaterialChart.vue deleted 100644 → 0
<template>
<div>
<el-row>
<el-col :span="24">
<div id="myChart" :style="{width: '100%', height: '300px'}"></div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
userTotal: 0
}
},
props: ['materialChartList'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['图文总阅读人数', '图文总阅读次数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'2016-1',
'2016-2',
'2016-3',
'2016-4',
'2016-5',
'2016-6',
'2016-7',
'2016-8',
'2016-9',
'2016-10',
'2016-11',
'2016-12'
]
},
yAxis: {
type: 'value'
},
series: [
{
name: '图文总阅读人数',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '图文总阅读次数',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
})
}
}
}
</script>
src/pages/marketing-center/components/MaterialDetails.vue
...@@ -16,86 +16,58 @@ ...@@ -16,86 +16,58 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<material-info :datalist="datalist" :MediaSummary="MediaSummary"></material-info> <material-info :MediaList="MediaList" class="datailChart"></material-info>
<ve-line :data="chartData" :judge-width="true" :extend="extend" height="230px" :mark-line="markLine"></ve-line> <ve-line :data="chartData" :judge-width="true" :extend="extend" height="230px" :mark-line="markLine"></ve-line>
</div> </div>
</template> </template>
<script> <script>
import MaterialInfo from './MaterialInfo' import MaterialInfo from './MaterialInfo'
import MaterialChart from './MaterialChart'
export default { export default {
data () { data() {
this.markLine = { this.markLine = {
symbol: 'none', symbol: 'none',
data: [ data: [
{ {
// name: '标准1',
// yAxis: 1
name: 'Y 轴值为 100 的水平线', name: 'Y 轴值为 100 的水平线',
yAxis: 100 yAxis: 100,
},
// type: 'max', ],
// lineStyle: {
// normal: {
// color: 'green',
// width: 2,
// type: 'solid'
// }
// }
}
]
// itemStyle: {
// normal: {
// lineStyle: {
// type: 'solid',
// color: '#e2d73c ',
// width: 2
// },
// label: {
// formatter: '',
// textStyle: {
// fontSize: 16,
// fontWeight: 'bolder'
// }
// }
// }
// }
} }
this.extend = { this.extend = {
series: { series: {
smooth: 0 smooth: 0,
} },
} }
return { return {
chartData: { chartData: {
columns: ['日期', '图文总阅读人数', '图文总阅读次数'], columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
rows: [] rows: [],
} },
} }
}, },
mounted () { mounted() {
this.materialChartList.forEach(item => { this.materialChartList.forEach(item => {
const { refDate, intPageReadCount, intPageReadUser } = item const { refDate, intPageReadCount, intPageReadUser } = item
this.chartData.rows.push({ this.chartData.rows.push({
日期: refDate, 日期: refDate,
图文总阅读人数: intPageReadUser, 图文总阅读人数: intPageReadUser,
图文总阅读次数: intPageReadCount 图文总阅读次数: intPageReadCount,
}) })
}) })
}, },
props: ['datalist', 'MediaSummary', 'materialChartList'], props: ['MediaList', 'materialChartList'],
components: { components: {
MaterialInfo, MaterialInfo,
MaterialChart },
}
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.materian-details .materian-details
background-color #fff background-color #fff
.datailChart
margin-bottom 20px
.detail-top .detail-top
height 60px height 60px
line-height 60px line-height 60px
......
src/pages/marketing-center/components/MaterialInfo.vue
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<div class="detail-left"> <div class="detail-left">
<img :src="materianImg" class="info-img"> <!-- <img :src="materianImg" class="info-img"> -->
</div> </div>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<material-text :MediaSummary="MediaSummary"></material-text> <material-text :MediaList="MediaList"></material-text>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -20,12 +20,7 @@ export default { ...@@ -20,12 +20,7 @@ export default {
materianImg: '' materianImg: ''
} }
}, },
props: ['datalist', 'MediaSummary'], props: ['MediaList'],
mounted () {
this.datalist.forEach(item => {
this.materianImg = item.thumb_url
})
},
components: { components: {
MaterialText MaterialText
} }
......
src/pages/marketing-center/components/MaterialText.vue
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<div>累积送达人数： <div>累积送达人数：
<span>{{MediaSummary.sendCountTotal}}</span> <span>{{MediaList.sendCountTotal}}</span>
</div> </div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div>平台推送次数： <div>平台推送次数：
<span>{{MediaSummary.pushCountTotal}}</span> <span>{{MediaList.pushCountTotal}}</span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="data-detail"> <div class="data-detail">
<p>图文阅读人数：{{MediaSummary.intPageReadUserTotal}}</p> <p>图文阅读人数：{{MediaList.intPageReadUserTotal}}</p>
<p>图文阅读次数: {{MediaSummary.intPageReadCountTotal}}</p> <p>图文阅读次数: {{MediaList.intPageReadCountTotal}}</p>
<p>原文链接阅读人数：{{MediaSummary.oriPageReadUserTotal}}</p> <p>原文链接阅读人数：{{MediaList.oriPageReadUserTotal}}</p>
<p>原文链接阅读次数：{{MediaSummary.oriPageReadCountTotal}}</p> <p>原文链接阅读次数：{{MediaList.oriPageReadCountTotal}}</p>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
...@@ -33,10 +33,10 @@ ...@@ -33,10 +33,10 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="data-detail"> <div class="data-detail">
<p>分享人数:{{MediaSummary.shareUserTotal}}</p> <p>分享人数:{{MediaList.shareUserTotal}}</p>
<p>分享次数:{{MediaSummary.shareCountTotal}}</p> <p>分享次数:{{MediaList.shareCountTotal}}</p>
<p>加入收藏人数:{{MediaSummary.addToFavUserTotal}}</p> <p>加入收藏人数:{{MediaList.addToFavUserTotal}}</p>
<p>加入收藏次数：{{MediaSummary.addToFavCountTotal}}</p> <p>加入收藏次数：{{MediaList.addToFavCountTotal}}</p>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
</template> </template>
<script> <script>
export default { export default {
props: ['MediaSummary'] props: ['MediaList']
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
......
src/pages/marketing-center/components/MessageList.vue 0 → 100644
<template>
<div class="temp-list clear">
<el-row>
<div class="temp-button fr">
<el-button type="text" @click="reset">重置</el-button>
<el-button type="primary" @click="search">查询</el-button>
</div>
</el-row>
<el-form :inline="true" :model="form" class="demo-form-inline" style="min-width:980px;">
<el-row class="temp-input">
<el-col :span="10">
<el-form-item label="推送名称:">
<el-input v-model="title" placeholder="请输入推送名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="活动时间">
<el-date-picker type="date" placeholder="推送时间" v-model="queryDateStart" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
<span class="line time-line" :span="2">-</span>
<el-date-picker type="date" placeholder="推送时间" v-model="queryDateEnd" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row class="temp-input">
<el-col :span="14">
<el-form-item label="推送人数">
<el-input v-model.number="pushCountStart" placeholder="最小推送人数" style="width:210px"></el-input>
<span class="line time-line" :span="2">-</span>
<el-input v-model.number="pushCountEnd" placeholder="最大推送人数" style="width:200px"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="创建推送节点:">
<el-select v-model="clerkId" placeholder="--全部--">
<el-option v-for="(item,index) in dataList" :key="index" :label="item.clerkName" :value="item.clerkId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table :data="dataList" style="width: 100%">
<el-table-column prop="title" label="推送名称" min-width="100" align="center">
</el-table-column>
<el-table-column prop="type" label="推送类型" min-width="76" align="center">
<template slot-scope="scope">
<span v-if="scope.row.type === 1">微信素材</span>
<span v-if="scope.row.type === 2">短信</span>
<span v-if="scope.row.type === 3">微信营销</span>
</template>
</el-table-column>
<el-table-column label="推送时间" min-width="150" align="center">
<template slot-scope="scope">
{{scope.row.pushTime | fomatDate}}
</template>
</el-table-column>
<el-table-column prop="scope" label="推送范围" min-width="260" align="center">
<template slot-scope="scope">
<span v-if="scope.row.scope === 0">全体推送</span>
<template v-if="scope.row.scope === 1 && scope.row.tagList ">
<span class="temp-tablespan">
{{scope.row.tagList && scope.row.tagList[0]}}
</span>
<span class="temp-tablespan">
{{scope.row.tagList && scope.row.tagList[1]}}
</span>
<el-popover v-if="scope.row.tagList" placement="bottom" title="标签" width="200" trigger="click">
<div>
<span v-for="(item,index) in scope.row.tagList" :key="index" class="table-tag" style="
display: inline-block;
width: 90px;
border: 1px solid transparent;
border-radius: 12px;
background: #0096ff;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
vertical-align: top;
margin: 0 5px 5px 0;
font-size: 13px;
line-height: 28px;">
{{item}}
</span>
</div>
<el-button class="fr temp-tablesmore" slot="reference">更多</el-button>
</el-popover>
</template>
</template>
</el-table-column>
<el-table-column prop="pushCount" label="推送人数" align="center">
</el-table-column>
<el-table-column prop="sentCount" label="推送成功人数" align="center">
</el-table-column>
<el-table-column prop="clerkName" label="创建消息节点" align="center">
</el-table-column>
<el-table-column prop="statusMsg" label="推送进度" align="center">
<template slot-scope="scope">
<span v-if="scope.row.statusMsg === '推送失败'" style="color:red">推送失败</span>
<span v-else-if="scope.row.statusMsg === '推送成功'" style="color:green">推送成功</span>
<span v-else>推送中</span>
</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="10" :total="total" layout="total, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
input: '',
form: {},
options: [],
value: '',
pageNo: 1,
pageSize: 10,
title: '',
type: '',
queryDateStart: '',
queryDateEnd: '',
pushCountStart: '',
pushCountEnd: '',
clerkId: '',
}
},
props: ['msgList'],
computed: {
dataList() {
const { result } = this.msgList
return result
},
total() {
const { totalCount } = this.msgList
return totalCount
},
},
methods: {
handleCurrentChange(val) {
this.pageNo = val
this.$emit('pageChange', this.pageNo)
},
reset() {
const paramsSearch = {
pageNo: 1,
pageSize: 10,
title: '',
queryDateStart: '',
queryDateEnd: '',
pushCountStart: '',
pushCountEnd: '',
clerkId: '',
}
this.$emit('reset', paramsSearch)
this.title = ''
this.queryDateStart = ''
this.queryDateEnd = ''
this.pushCountStart = ''
this.pushCountEnd = ''
this.clerkId = ''
},
search() {
const paramsSearch = {
pageNo: this.pageNo,
pageSize: this.pageSize,
title: this.title,
queryDateStart: this.queryDateStart,
queryDateEnd: this.queryDateEnd,
pushCountStart: this.pushCountStart,
pushCountEnd: this.pushCountEnd,
clerkId: this.clerkId,
}
this.$emit('search', paramsSearch)
},
},
}
</script>
<style lang="stylus" scoped>
>>>.el-pagination
padding 20px 5px
min-width 0px
text-align right
>>>.el-pagination .el-select .el-input
width auto
>>>.el-input__inner
min-width 10px
>>>.el-pagination__sizes
width 110px
>>>.temp-list .el-button:focus, .el-button:hover, .el-button:active
background-color none !important
.temp-list
.table-tag
color red
.el-button:focus, .el-button:hover, .el-button:active
background-color #f5f7fa
.temp-button
height 50px
width 120px
.temp-tablespan
display inline-block
width 90px
border 1px solid transparent
border-radius 12px
background #0096FF
text-align center
overflow hidden
text-overflow ellipsis
white-space nowrap
color #fff
padding 0px 3px
vertical-align top
font-size 13px
line-height 28px
.temp-tablesmore
padding 0
border none
color #0379cb
font-size 13px
line-height 28px
&::hover
color #0379cb
.time-line
margin-left 20px
margin-right 20px
</style>
src/pages/marketing-center/components/PushDetail.vue
<template> <template>
<div class="detail-all clear"> <div class="detail-all clear">
<el-row> <el-row>
<el-col :span="12" v-for="(item, index) in pushList" :key="index"> <el-col :span="12" v-for="(item, index) in pushlist.result" :key="index">
<div class="detail-single"> <div class="detail-single">
<div class="detail-top"> <div class="detail-top">
<span class="top-name detail-title">{{item.title}}</span> <span class="top-name detail-title">{{item.title}}</span>
<div class="top-right fr"> <div class="top-right fr">
<span class="top-time detail-title">{{item.pushTime | fomatDate}}</span> <span class="top-time detail-title">{{item.pushTime | fomatDate}}</span>
<span class="top-pushbtn"> <span class="top-pushbtn">
<img src="./../../../../static/image/pushbtn.png"> <img src="@/assets/images/pushbtn.png">
<span class="top-state" v-if="item.status === 0">推送中</span> <span class="top-state" v-if="item.status === 0">推送中</span>
<span class="top-state" v-if="item.status === 1">推送成功</span> <span class="top-state" v-if="item.status === 1">推送成功</span>
<span class="top-state" v-if="item.status === -1">推送失败 </span> <span class="top-state" v-if="item.status === -1">推送失败 </span>
...@@ -37,42 +37,20 @@ ...@@ -37,42 +37,20 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<pagination v-show="pushList.length > 6" :dataList="dataList" class="detail-pagination"></pagination> <pagination v-show="(pushlist&&pushlist.result&&pushlist.result.length) > 10" :pushlist="pushlist" class="detail-pagination"></pagination>
</div> </div>
</template> </template>
<script> <script>
import Pagination from 'components/Pagination' import Pagination from 'components/Pagination'
export default { export default {
data () { data() {
return { return {}
dataList: [],
pushList: []
}
}, },
components: { components: {
Pagination Pagination,
}, },
created () { props: ['pushlist'],
this.GetPushDetail()
},
methods: {
GetPushDetail () {
this.axios
.post('http://rap2api.taobao.org/app/mock/115626/list-data', {
pageNo: 1,
pageSize: 10,
type: 1,
mediaId: 2
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.dataList = res.data.result
this.pushList = this.dataList.result
}
})
}
}
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
......
src/pages/marketing-center/components/PushList.vue
...@@ -2,20 +2,21 @@ ...@@ -2,20 +2,21 @@
<div class="push-detail clear"> <div class="push-detail clear">
<div class="detail-top"> <div class="detail-top">
<span> <span>
<img src="./../../../assets/images/push.png"> <img src="@/assets/images/push.png">
</span> </span>
<span class="detail-title title">推送详情</span> <span class="detail-title title">推送详情</span>
</div> </div>
<detail class="detail-info"></detail> <detail class="detail-info" :pushlist="pushlist"></detail>
</div> </div>
</template> </template>
<script> <script>
import Detail from './PushDetail' import Detail from './PushDetail'
export default { export default {
props: ['pushlist'],
components: { components: {
Detail Detail,
} },
} }
</script> </script>
......
src/tool/api.js 0 → 100644
export default {
getMaterialsList: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list',
getPushList: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist',
getarticlesummary: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary',
}
// export default {
// getCode: 'http://rap2api.taobao.org/app/mock/115626/materials-list',
// getPush: 'http://rap2api.taobao.org/app/mock/115626/list-data',
// getData: 'http://rap2api.taobao.org/app/mock/115626/getarticlesummary',
// getTagCount: 'http://rap2api.taobao.org/app/mock/115626/testCount',
// getAllTag: '',
// }
src/tool/http.js 0 → 100644
import axios from 'axios'
// import qs from 'qs'
axios.interceptors.request.use(
config => {
// loading
return config
},
error => {
return Promise.reject(error)
}
)
axios.interceptors.response.use(
response => {
return response
},
error => {
return Promise.resolve(error.response)
}
)
function checkStatus(response) {
// loading
// 如果http状态码正常，则直接返回数据
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
return response
// 如果不需要除了data之外的数据，可以直接 return response.data
}
// 异常状态下，把错误信息返回去
return {
status: -404,
msg: '网络异常',
}
}
function checkCode(res) {
// 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
if (res.status === -404) {
alert(res.msg)
}
if (res.data && !res.data.success) {
alert(res.data.error_msg)
}
return res
}
export default {
post(data, url) {
return axios({
method: 'post',
url: url,
// data: qs.stringify(data),
data: data,
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json',
},
}).then(response => {
return checkStatus(response)
})
},
get(url, params) {
return axios({
method: 'get',
baseURL: 'https://cnodejs.org/api/v1',
url,
params, // get 请求时带的参数
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
})
.then(response => {
return checkStatus(response)
})
.then(res => {
return checkCode(res)
})
},
}
static/save.json deleted 100644 → 0
{
"code" : 0,
"message" : "suc"
}
\ No newline at end of file
static/tag-count.json deleted 100644 → 0
{
"code" : 0,
"message" : "",
"result" : 5
}
\ No newline at end of file
static/temp-list.json deleted 100644 → 0
{
"totalCount": 3,
"code": 0,
"msg": "成功",
"data": [
{
"title": "软文精准营销测试，点我！",
"type": 1,
"scope": 0,
"push_time": 1524642626000,
"tagList": [],
"pushCount": 2,
"sentCount": 12,
"clerkName": 8,
"statusMsg": "state"
},
{
"title": "营销测试",
"type": 2,
"scope": 0,
"push_time": 1524642626000,
"tagList": [],
"pushCount": 2,
"sentCount": 12,
"clerkName": 8,
"statusMsg": "state"
},
{
"title": "点我",
"type": 3,
"scope": 1,
"push_time": 1524642626000,
"tagList": [
"111",
"222",
"333"
],
"pushCount": 2,
"sentCount": 12,
"clerkName": 8,
"statusMsg": "state"
}
]
}
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