add:chartdata

package.json

@@ -16,6 +16,7 @@
     "element-ui": "^2.4.9",
     "moment": "^2.22.2",
     "underscore": "^1.9.1",
+    "v-charts": "^1.19.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/main.js

@@ -13,13 +13,18 @@ import Axios from 'axios'
 import * as filters from './filters'
 // 引入echarts
 import echarts from 'echarts'
+import VCharts from 'v-charts'
 
 import * as plugins from './plugin'
-// Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm'
 
-const AUTH_TOKEN = 'X8IvNcvIe7xFvbNhk0I5HyVZY1E'
+Vue.use(VCharts)
 Axios.defaults.withCredentials = true // 让ajax携带cookie
-Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
+
+// const AUTH_TOKEN =
+// '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 = 'QuY4MdyNXUjnOSmTTn17apD9vxc'
+// Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
+// Axios.defaults.headers.common['Cookie'] = AUTH_TOKEN
 
 Axios.interceptors.request.use(
   config => {

src/pages/marketing-center/components/ArticleChart.vue

@@ -7,8 +7,11 @@
 </template>
 <script>
 export default {
+  props: ['item'],
   mounted () {
     this.drawLine()
+    // console.log('acount', this.item.oriPageReadUser)
+    // console.log('auser', this.item.oriPageReadCount)
   },
   methods: {
     drawLine () {

src/pages/marketing-center/components/ArticleDetails.vue

@@ -2,12 +2,12 @@
   <div class="article-details">
     <div class="title">• 文章详情</div>
     <el-row :gutter="20" v-for="(item,index) in datalist" :key="index">
-      <el-col :span="6">
+      <el-col :span="4" :offset="1">
         <div class="article-img">
           <img :src="item.thumb_url" class="img-size">
         </div>
       </el-col>
-      <el-col :span="10">
+      <el-col :span="8" :offset="1">
         <div class="article-info">
           <p>{{item.title}}</p>
           <div>
@@ -30,7 +30,10 @@
           </div>
         </div>
       </el-col>
-      <article-chart></article-chart>
+      <el-col :span="10" class="articleChart">
+        <!-- {{item.mediaGetarticles[0]}} -->
+        <ve-line :data="chartData" :grid="grid" height="180px" :extend="extend" :tooltip-visible="false" :legend-visible="false"></ve-line>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -38,6 +41,47 @@
 import ArticleChart from './ArticleChart'
 
 export default {
+  data () {
+    this.extend = {
+      series: {
+        smooth: 0
+      },
+      yAxis: {
+        splitLine: { show: false }
+      },
+      'xAxis.0.axisLabel.show': false, // x轴标签不显示
+      'yAxis.0.axisLabel.show': false, // y轴标签不显示
+      'xAxis.0.splitLine.show': false // x轴表格线不显示
+    }
+    this.grid = {
+      left: 40,
+      eight: 40,
+      show: true,
+      backgroundColor: '#fff',
+      borderColor: '#FFF'
+    }
+    return {
+      chartData: {
+        columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
+        rows: []
+      },
+      articleList: []
+    }
+  },
+  mounted () {
+    this.datalist.forEach((item, index) => {
+      console.log('index', index)
+      // console.log('itemall', item.mediaGetarticles)
+      item.mediaGetarticles.forEach(article => {
+        const { refDate, oriPageReadCount, oriPageReadUser } = article
+        this.chartData.rows.push({
+          日期: refDate,
+          图文总阅读人数: oriPageReadUser,
+          图文总阅读次数: oriPageReadCount
+        })
+      })
+    })
+  },
   props: ['datalist'],
   components: {
     ArticleChart
@@ -50,6 +94,8 @@ export default {
   background-color #fff
   border-top 1px solid #ccc
   padding 0 10px
+  .articleChart
+    // background-color pink
   .title
     height 30px
     line-height 30px

src/pages/marketing-center/components/MarketingTab.vue

@@ -3,8 +3,8 @@
     <el-tab-pane label="图文素材消息" name="first">
       <materia-list :imgList="imgList" @sendid="handleId"></materia-list>
       <push-detail></push-detail>
-      <material-details :datalist="datalist" :MediaSummary="MediaSummary"></material-details>
-      <article-details :datalist="datalist"></article-details>
+      <material-details v-if="materialChartList&&materialChartList.length" :datalist="datalist" :MediaSummary="MediaSummary" :materialChartList="materialChartList"></material-details>
+      <article-details v-if="articleChartList&&articleChartList.length" :datalist="datalist"></article-details>
     </el-tab-pane>
     <el-tab-pane label="营销模版消息" name="second">
       <temp-list></temp-list>
@@ -26,7 +26,9 @@ export default {
       imgList: [],
       mediaId: '',
       datalist: [],
-      MediaSummary: {}
+      MediaSummary: {},
+      articleChartList: [],
+      materialChartList: []
     }
   },
   components: {
@@ -43,8 +45,8 @@ export default {
     // 图文素材
     getDataList () {
       this.axios
-        .post('/materials-list', {
-          // .post('http://rap2api.taobao.org/app/mock/115626/materials-list', {
+      // .post('/materials-list', {
+        .post('http://rap2api.taobao.org/app/mock/115626/materials-list', {
           pageNo: 1,
           pageSize: 10
         })
@@ -64,15 +66,16 @@ export default {
           mediaId: id
         })
         .then(res => {
-          console.log(res)
           // 文章流量分析
           this.datalist = res.data.result.mediaGetarticle
           // 文章单日流量分析
-          // = res.data.result.mediaGetarticle.mediaGetarticles
+          this.datalist.forEach(item => {
+            this.articleChartList = item.mediaGetarticles.reverse()
+          })
           // 素材总流量分析
           this.MediaSummary = res.data.result.wechatMediaSummary
           // 素材单日流量分析
-          // = res.data.result.wechatMediaSummary.mediaGetarticles
+          this.materialChartList = res.data.result.wechatMediaSummary.mediaGetarticles.reverse()
         })
     },
     handleId (params) {

src/pages/marketing-center/components/MaterialChart.vue

@@ -8,19 +8,14 @@
   </div>
 </template>
 <script>
-import Bus from '@/common/bus'
-
 export default {
   data () {
     return {
       userTotal: 0
     }
   },
+  props: ['materialChartList'],
   mounted () {
-    Bus.$on('mediaChart', data => {
-      console.log('User', data.intPageReadUserTotal)
-      console.log('Count', data.intPageReadCountTotal)
-    })
     this.drawLine()
   },
   methods: {

src/pages/marketing-center/components/MaterialDetails.vue

@@ -17,7 +17,7 @@
       </el-col>
     </el-row>
     <material-info :datalist="datalist" :MediaSummary="MediaSummary"></material-info>
-    <material-chart></material-chart>
+    <ve-line :data="chartData" :judge-width="true" :extend="extend" height="230px" :mark-line="markLine"></ve-line>
   </div>
 </template>
 <script>
@@ -25,7 +25,55 @@ import MaterialInfo from './MaterialInfo'
 import MaterialChart from './MaterialChart'
 
 export default {
-  props: ['datalist', 'MediaSummary'],
+  data () {
+    this.markLine = {
+      symbol: 'none',
+      data: [
+        {
+          name: '标准1',
+          yAxis: 1
+        }
+      ],
+      itemStyle: {
+        normal: {
+          lineStyle: {
+            type: 'solid',
+            color: '#e2d73c ',
+            width: 2
+          },
+          label: {
+            formatter: '',
+            textStyle: {
+              fontSize: 16,
+              fontWeight: 'bolder'
+            }
+          }
+        }
+      }
+    }
+    this.extend = {
+      series: {
+        smooth: 0
+      }
+    }
+    return {
+      chartData: {
+        columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
+        rows: []
+      }
+    }
+  },
+  mounted () {
+    this.materialChartList.forEach(item => {
+      const { refDate, intPageReadCount, intPageReadUser } = item
+      this.chartData.rows.push({
+        日期: refDate,
+        图文总阅读人数: intPageReadUser,
+        图文总阅读次数: intPageReadCount
+      })
+    })
+  },
+  props: ['datalist', 'MediaSummary', 'materialChartList'],
   components: {
     MaterialInfo,
     MaterialChart

src/pages/marketing-center/components/MaterialInfo.vue

@@ -7,7 +7,7 @@
         </div>
       </el-col>
       <el-col :span="18">
-        <material-text :datalist="datalist" :MediaSummary="MediaSummary"></material-text>
+        <material-text :MediaSummary="MediaSummary"></material-text>
       </el-col>
     </el-row>
   </div>

src/pages/marketing-center/components/MaterialText.vue

@@ -45,7 +45,7 @@
 </template>
 <script>
 export default {
-  props: ['datalist', 'MediaSummary']
+  props: ['MediaSummary']
 }
 </script>
 <style lang="stylus" scoped>