add report

src/components/charts/PieSecondChart.vue

@@ -1,88 +0,0 @@
-<template>
-    <div>
-        <div class="grid-content" ref="secondChart"  id="secondChart" >
-        </div>
-    </div>
-</template>
-
-<script>
-    import Echarts from "echarts";
-    export default {
-        name: "PieSecondChart",
-        props: [
-            'value'
-        ],
-        data() {
-            return {
-                pieSecondChart: '', // 饼状图实例
-                dataVal: this.value,
-                pieData: [] // 渲染的数据
-            }
-
-        },
-        watch: {
-            dataVal(newVal, oldVal) {
-                this.pie()
-            }
-        },
-        created() {
-            // 饼图
-            this.pieSecondChart = Echarts.init(this.$refs.secondChart);
-            console.log('this.pieSecondChart : ', this.pieSecondChart)
-            // this.pieSecondChart.setOption()
-        },
-        methods: {
-            // init() {
-            //     // 饼图
-            //     this.pieSecondChart = Echarts.init(this.$refs.secondChart);
-            //     console.log('this.pieSecondChart : ', this.pieSecondChart)
-            //     this.pieSecondChart.setOption()
-            // },
-            pie () { // 饼状图绘制
-                // 绘制图表
-                this.pieSecondChart.setOption({
-                    tooltip: {
-                        trigger: "item",
-                        formatter: "{a} <br/>{b} : {c} ({d}%)"
-                    },
-                    legend: {
-                        orient: "vertical",
-                        left: "left",
-                        data: ["自主进入", "来源全民经纪人", "来源置业顾问"]
-                        // data: this.pieData.title
-                    },
-                    series: [
-                        {
-                            name: "访问来源",
-                            type: "pie",
-                            radius: "55%",
-                            center: ["50%", "60%"],
-                            label: {
-                                normal: {
-                                    position: "inner"
-                                }
-                            },
-                            data: [
-                                { value: 0, name: "自主进入" },
-                                { value: 0, name: "来源全民经纪人" },
-                                { value: 0, name: "来源置业顾问" }
-                            ],
-                            // data: this.pieData.data,
-                            itemStyle: {
-                                emphasis: {
-                                    shadowBlur: 10,
-                                    shadowOffsetX: 0,
-                                    shadowColor: "rgba(0, 0, 0, 0.5)"
-                                }
-                            }
-                        }
-                    ]
-                });
-            },
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>

src/views/indexEcharts/components/NewUsers.vue

@@ -1,22 +1,65 @@
 <template>
-  <div class="chart-box">
-    <h3>新增客户 <small>最近七天</small></h3>
-    <el-table :data="tableData"  border  center  style="width: 100%; margin-top: 16px">
-      <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label': item"></el-table-column>
-    </el-table>
+  <div>
+    <div class="chart-box" v-if="mode == 'all' || mode == 'line'">
+      <h3>新增客户</h3>
+      <v-chart class="chart" :options="options" />
+    </div>
+    <div class="chart-box" v-if="mode == 'all' || mode == 'table'">
+      <h3>新增客户 <small>最近七天</small></h3>
+      <el-table :data="tableData"  border  center  style="width: 100%; margin-top: 16px">
+        <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label': item"></el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
 <script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
+
 export default {
   name: 'NewUsers',
-  props: ['value'],
+  props: ['value', 'mode'],
   data () {
     return {
       tableTitle: [ '类型' ],
+      lineOpt: {
+        color: ["purple", "green"],
+        tooltip: {
+          trigger: "axis"
+        },
+        legend: {
+          data: ["新用户数", "授权注册"]
+        },
+        toolbox: {},
+        xAxis: {
+          type: "category",
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "新用户数",
+            type: "line",
+          },
+          {
+            name: "授权注册",
+            type: "line",
+          }
+        ]
+      },
     }
   },
   computed: {
+    options () {
+      return {
+        ...this.lineOpt,
+        dataset: {
+          dimensions: ['date', 'userCount', 'authorizationCount'],
+          source: this.value || []
+        }
+      }
+    },
     tableData () {
       return (this.value || []).reduce((acc, item, index) => {
           const { date, userCount, authorizationCount } = item

src/views/indexEcharts/components/UsrSRCLineAndPie.vue → src/views/indexEcharts/components/UserSource.vue

@@ -1,26 +1,39 @@
 <template>
-  <div class="chart-box">
-    <h3>用户来源 <small>最近七天</small></h3>
-    <v-chart class="chart" :options="options" />
+  <div>
+    <div class="chart-box" v-if="mode == 'all' || mode == 'report'">
+      <h3>用户来源 <small>最近七天</small></h3>
+      <v-chart class="chart" :options="options" />
+    </div>
+    <div class="chart-box" v-if="mode == 'all' || mode == 'table'">
+      <el-select v-model="userType">
+        <el-option label="所有用户" value="all"></el-option>
+        <el-option label="注册用户" value="registered"></el-option>
+      </el-select>
+      <el-table :data="tableData"  border  center  style="width: 100%; margin-top: 16px">
+        <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label' : item"></el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
 <script>
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/bar'
+import 'echarts/lib/chart/pie'
 import 'echarts/lib/component/tooltip'
 
 export default {
-  name: 'UsrSRCLineAndPie',
+  name: 'UserSource',
   components: {
     'v-chart': ECharts,
   },
   props: [
     'value',
+    'mode',
   ],
   data () {
     return {
-      baseOpts: {
+      reportOpts: {
         legend: {},
         color: ['#286DD0', '#8565CE', '#6A96F8', '#F5749E', '#8B7FE2'],
         tooltip: {},
@@ -30,9 +43,24 @@ export default {
           { right: '5%' }
         ],
       },
+      userType: 'all',
+      tableTitle: ['类型'],
     }
   },
   computed: {
+    tableData () {
+      const data = (this.value || { data: [] }).data.reduce((acc, item, index) => {
+          const { date, fromName, count } = item
+          
+          this.tableTitle = this.tableTitle.indexOf(date) > -1 ? this.tableTitle : this.tableTitle.concat(date) // eslint-disable-line
+          acc[fromName] = { ...acc[fromName], [`${date}`]: !count ? 0 : count }
+
+          return acc
+        }, {})
+      
+      return Object.keys(data).map(x => ({ label:x, ...data[x] }))
+    },
+
     // 柱图
     barOptions () {
       const source = (this.value || {}).columnar || [];
@@ -82,7 +110,7 @@ export default {
     },
     options() {
       return {
-        ...this.baseOpts,
+        ...this.reportOpts,
         xAxis: [
           this.barOptions.xAxis,
           this.pieOptions.xAxis,

src/views/indexEcharts/index.vue

@@ -8,10 +8,10 @@
       <card label="总注册用户">{{echartsInfo.selectRegisteredCount}}</card>
     </el-col>
     <el-col :span="8">
-      <card label="最近7天新增" @click="toNewUsers()" class="under-line" >{{echartsInfo.selectRecentlyCount}}</card>
+      <card label="最近7天新增" @click.native="toNewUsers()" class="under-line" >{{echartsInfo.selectRecentlyCount}}</card>
     </el-col>
   </el-row>
-  <user-source :value="userSourceData"></user-source>
+  <user-source :value="userSourceData" mode="report"></user-source>
   <user-behavior class="marginTB" :value="userBehaviorData" @click="toBehaviorAnalysis()"></user-behavior>
  <el-row :gutter="20">
     <el-col :span="12">
@@ -27,7 +27,7 @@
       <user-city :value="userCityData"></user-city>
     </el-col>
   </el-row>
-  <new-users class="marginTB" :value="newUserData"></new-users>
+  <new-users class="marginTB" :value="newUserData" mode="table"></new-users>
   <intentional-customers  class="marginTB"></intentional-customers>
 </div>
 </template>
@@ -45,7 +45,7 @@ const {
 export default {
   components: {
     Card: () => import('./components/Card'),
-    UserSource: () => import('./components/UsrSRCLineAndPie'),
+    UserSource: () => import('./components/UserSource'),
     UserBehavior: () => import('./components/UserBehavior'),
     UserActive: () => import('./components/UserActive'),
     UserConversion: () => import('./components/UserConversion'),

src/views/indexEcharts/newUsers.vue

@@ -1,6 +1,7 @@
 <template>
 <div>
-  <p class="title"><span @click="choose(list.id)" :class="active==list.id?'active':''" v-for="(list,index) in dateList" :key="index" >{{list.date}}</span>  
+  <div class="title">
+    <span @click="choose(list.id)" :class="active==list.id?'active':''" v-for="(list,index) in dateList" :key="index" >{{list.date}}</span>  
     <el-date-picker
       v-model="value"
       type="daterange"
@@ -8,19 +9,17 @@
       end-placeholder="结束日期"
       @change="changeDate"
       default-value="2019-08-08">
-    </el-date-picker></p>
-  <x-line :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}"  :value="lineSeting"></x-line>
-  <el-table :data="tableData"  border  center  style="width: 100%">
-    <el-table-column v-for="(item, index) in tableTitle" :key="index" :label="item" :prop="index == 0 ? 'label': item"></el-table-column>
-  </el-table>
+    </el-date-picker>
+  </div>
+  
+  <new-users :mode="all" :value="userData"></new-users>
 
 </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from "vuex";
-import apis from "../../config/api";
-import { mapState } from "vuex";
+import { createNamespacedHelpers } from "vuex"
+import { mapState } from "vuex"
 
 const {
   mapState: mapIndexEchartsState,
@@ -28,7 +27,7 @@ const {
 } = createNamespacedHelpers("indexEcharts");
 export default {
   components: {
-    XLine: () => import('@/components/charts/XLine.vue'),
+    NewUsers: () => import('./components/NewUsers'),
   },
   data() {
     return {
@@ -38,17 +37,7 @@ export default {
         {date:'最近一个月',id:2},
       ],
       active:1,
-      lineSeting: {
-        dataset: {
-          dimensions: ['date', 'userCount', 'authorizationCount'],
-          source: [],
-        },
-      },
-      tableData: [
-        { label: '新增用户', },
-        { label: '授权注册', }
-      ],
-      tableTitle: [ '类型' ],
+      userData: [],
     };
   },
   computed: {
@@ -62,38 +51,18 @@ export default {
       this.active = id;
     },
     changeDate(){
-      console.log(this.value,"value");
       if(this.value!=''){
         this.active = '3'
       }
     },
     initPage() {
       this.getNewsUserCount().then(x => {
-        const data = this.newsUserCount.selectNewsUserCount
-        this.lineSeting.dataset.source = data
-        this.tableData = (data || []).reduce((acc, item, index) => {
-          const { date, userCount, authorizationCount } = item
-
-          const row2 = {
-            ...acc[0],
-            [`${date}`]: userCount,
-          }
-
-          const row3 = {
-            ...acc[1],
-            [`${date}`]: authorizationCount,
-          }
-
-          this.tableTitle = this.tableTitle.concat(`${date}`)
-
-          return [row2, row3];          
-        }, this.tableData)
+        this.userData = this.newsUserCount.selectNewsUserCount
       });
     },
   },
   mounted() {
-    this.initPage();
-  
+    this.initPage();  
   }
 };
 </script>

src/views/indexEcharts/userSource.vue

@@ -9,67 +9,23 @@
       end-placeholder="结束日期"
       default-value="2019-08-08">
     </el-date-picker></p>
-  <el-row :gutter="20" :style="{ height: '560px',margin:'20px 0',border:'1px solid #eee',borderRadius:'5px'}">
-    <el-col :span="14">
-      <div class="grid-content" ref="firstChart"  id="firstChart"  :style="{ height: '500px' ,padding:'20px 10px'}" >
-      </div>
-    </el-col>
-    <el-col :span="10" :style="{ height: '560px',borderLeft:'1px solid #eee'}">
-      <div class="grid-content" ref="secondChart"  id="secondChart"  :style="{ height: '500px',padding:'20px 10px'}" >
-      </div>
-<!--        <pie-second-chart :style="{ height: '500px',padding:'20px 10px'}" ></pie-second-chart>-->
-    </el-col>
-  </el-row>
-  <el-select  :style="{ margin:'10px 0'}"  v-model="registeredType" @change="getInfo" placeholder="请选择">
-    <el-option
-      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value">
-    </el-option>
-  </el-select>
-   <el-table :data="tableData2"  border  center  style="width: 100%">
-       <el-table-column   label="类型" prop="fromName" width="120" />
-       <template v-for="(item, index ) in header">
-           <el-table-column   :label="header[index]" :prop="header[index]" :key="index" width="110"/>
-       </template>
-
-
-  </el-table>
-
+    <user-source :value="userData" mode="all"></user-source>
 </div>
 </template>
 
 <script>
 import { createNamespacedHelpers } from "vuex";
-import PieSecondChart from '../../components/charts/PieSecondChart';
+
 const { mapActions: mapEchartsActions  } = createNamespacedHelpers("indexEcharts")
-import apis from "../../config/api";
-import { mapState } from "vuex";
-import Echarts from "echarts";
 
 export default {
   components: {
-      // eslint-disable-next-line vue/no-unused-components
-      'pie-second-chart' : PieSecondChart
+    UserSource: () => import('./components/UserSource'),
   },
   data() {
     return {
       value: '', // 时间
-      header: [], // 表头
-      tableData2: [], // 表格
-      fromNameType: [], // 类型名
-      options: [{
-          value: '',
-          label: '所有用户'
-        }, {
-          value: 'registered',
-          label: '注册用户'
-        }],
-        registeredType: '', // 类型  所有用户 或 注册用户 的值
-        pieSecondChart: '', // 饼状图实例
-        columnarSecondChart: '', // 柱状图
-
+      userData: {},
     };
   },
   computed: {},
@@ -80,153 +36,6 @@ export default {
      ...mapEchartsActions([
         'getUserResource'
      ]),
-    drawLine() {
-      // 基于准备好的dom，初始化echarts实例
-      this.columnarSecondChart = Echarts.init(this.$refs.firstChart);
-      // 饼图
-      this.pieSecondChart = Echarts.init(this.$refs.secondChart);
-    },
-    pie (obj) { // 饼状图绘制
-        // 绘制图表
-        this.pieSecondChart.setOption({
-            color: ["#7974ce","#f5749d","#3688f8"],
-            tooltip: {
-                trigger: "item",
-                formatter: "{a} <br/>{b} : {c} ({d}%)"
-            },
-            legend: {
-                orient: "vertical",
-                left: "left",
-                data: ["自主进入", "来源全民经纪人", "来源置业顾问"]
-            },
-            series: [
-                {
-                    name: "访问来源",
-                    type: "pie",
-                    radius: "55%",
-                    center: ["50%", "60%"],
-                    // label: {
-                    //     normal: {
-                    //         position: "inner"
-                    //     }
-                    // },
-                    data: [
-                        { value: obj.person_null, name: "自主进入" },
-                        { value: obj.person_estate_agent, name: "来源全民经纪人" },
-                        { value: obj.person_realty_consultant, name: "来源置业顾问" }
-                    ],
-                    itemStyle: {
-                        emphasis: {
-                            shadowBlur: 10,
-                            shadowOffsetX: 0,
-                            shadowColor: "rgba(0, 0, 0, 0.5)"
-                        }
-                    }
-                }
-            ]
-        });
-    },
-    columnar(obj) { // 柱状图
-         // 活动名称
-         const fromName = []
-
-         // 注册人数
-         const registered = []
-
-        // 注册人数
-        const userCount = []
-
-         obj.map((item, index) => {
-            fromName.push(item.fromName)
-            registered.push(item.registered)
-            userCount.push(item.userCount)
-         })
-
-        let labelOption = {
-            normal: {
-                show: true,
-                position: "top",
-                fontSize: 15,
-                rich: {
-                    name: {
-                        textBorderColor: "#fff"
-                    }
-                }
-            }
-        };
-        // 绘制图表
-        this.columnarSecondChart.setOption({
-            color: ["#3688f8", "#7974ce"],
-            backgroundColor: "#fff",
-            tooltip: {
-                trigger: "axis"
-            },
-            toolbox: {
-                show: false,
-                feature: {
-                    mark: { show: true },
-                    dataView: { show: true, readOnly: false },
-                    magicType: { show: true, type: ["bar"] },
-                    restore: { show: true },
-                    saveAsImage: { show: true }
-                }
-            },
-            calculable: true,
-            legend: {
-                data: ["所有用户", "注册用户"]
-            },
-            xAxis: [
-                {
-                    type: "category",
-                    axisLabel: {
-                        interval: 0,
-                        formatter: function(val) {
-                            // return val.split("").join("\n");
-                            return val;
-                        }
-                    },
-                    // data: ["生成海报", "好友分享", "群分享", "线下扫码", "名片分享", "小程序搜索"]
-                    data: fromName
-                }
-            ],
-            yAxis: [
-                {
-                    type: "value",
-                    name: "人数（人）",
-                    axisTick: {
-                        inside: true
-                    },
-                    axisLabel: {
-                        formatter: "{value}"
-                    }
-                }
-            ],
-            grid: {
-                left: "1%",
-                right: "1%",
-                containLabel: true,
-                y2: 10
-            },
-            series: [
-                {
-                    name: "所有用户",
-                    type: "bar",
-                    smooth: true,
-                    label: labelOption,
-                    // data: [78, 90, 13, 81, 170, 77]
-                    data: registered
-                },
-                {
-                    name: "注册用户",
-                    type: "bar",
-                    smooth: true,
-                    label: labelOption,
-                    // data: [26, 49, 62, 45, 21, 89]
-                    data: userCount
-                }
-            ]
-        });
-    },
     getInfo() { // 获取信息
 
          this.getUserResource({
@@ -234,67 +43,14 @@ export default {
              endDate: this.value[1],
              registeredType: this.registeredType
          }).then((res) => {
-            console.log(res)
-            this.setHeaderData(res)
-             this.pie(res.pie)
-             this.columnar(res.columnar)
+            this.userData = res
          }).catch((err) => {
              this.$notify.error(err.msg || err.message);
              console.log('indexEcharts/getUserResource err')
          })
     },
-    setHeaderData(obj) { // 设置表头
-        const header_data = new Set()
-        const from_name_type = new Set()
-
-        // 装载
-        const tab = []
-
-        // 请求的数据列表
-        const objData = obj.data
-        // 装载表头
-        objData.map((item, index) => {
-            // 时间表头
-            header_data.add(item.date)
-            from_name_type.add(item.fromCode)
-        })
-
-        this.header = Array.from(header_data).sort()
-        const fromNameType = Array.from(from_name_type)
-
-
-            fromNameType.map((type, index) => {
-                const dataObj = {}
-
-                // 获取类型和名称
-                objData.map((item, index) => {
-                    if (type === item.fromCode) {
-                        dataObj.fromName = item.fromName
-                        dataObj.fromCode = item.fromCode
-                        return
-                    }
-                })
-
-                // 装载时间
-                objData.map((item, index) => {
-                    if (type === item.fromCode) {
-                        let date = item.date
-                        dataObj[date] = item.count
-                    }
-                })
-
-                tab.push(dataObj)
-            })
-         this.tableData2 = tab
-
-
-
-
-
-    }
   },
   mounted() {
-    this.drawLine();
   }
 };
 </script>