feats

src/components/SelectBuilding.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-select v-model="val" filterable placeholder="请选择">
+  <el-select v-model="val" filterable placeholder="请选择" @change="handleChange">
     <el-option
       v-for="item in buildings"
       :key="item.buildingId"
@@ -43,6 +43,9 @@ export default {
     ...mapActions([
       'getBuildings',
     ]),
+    handleChange(e) {
+      this.$emit('change', e)
+    }
   },
 }
 </script>

src/components/XMSearchForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form :inline="true" size="small" class="search-form">
+  <el-form :inline="true" :size="size" class="search-form">
     <slot></slot>
     <el-form-item>
       <el-button type="primary" @click="submit">搜索</el-button>
@@ -11,6 +11,12 @@
 <script>
 export default {
   name: 'search-form',
+  props: {
+    size: {
+      type: String,
+      default: 'small',
+    }
+  },
   methods: {
     submit() {
       this.$emit('submit')

src/config/api.js

@@ -345,19 +345,40 @@ const apis = {
         method:'get',
         url: `${commPrefix}/selectUserResource`
     },
-    newsUserCount: {
-        method:'get',
-        url: `${commPrefix}/selectNewsUserCount`
-    },
     userConversion: {
       method:'get',
       url: `${commPrefix}/selectConversion`
     },
-
+    userActive: {
+      method:'get',
+      url: `${commPrefix}/selectActiveUserCount`
+    },
     newUser: {
       method:'get',
       url: `${commPrefix}/selectNewsUserCount`
-    }
+    },
+    userBehavior: {
+      summary: {
+        method:'get',
+        url: `${commPrefix}/selectUserBehavior`
+      },
+      profile: {
+        method:'get',
+        url: `${commPrefix}/selectEventAll`
+      },
+    },
+    intentionUsers: {
+      method:'get',
+      url: `${commPrefix}/selectIntentionUser`
+    },
+    userSex: {
+      method:'get',
+      url: `${commPrefix}/selectSexUser`
+    },
+    userCity: {
+      method:'get',
+      url: `${commPrefix}/selectCityUser`
+    },
   },
   bizEvent: {
     dict: {
@@ -366,7 +387,11 @@ const apis = {
     },
     list: {
       method:'get',
-      url: `${commPrefix}/tdBizEventType`
+      url: `${commPrefix}/tdBizEvent`
+    },
+    properties: {
+      method:'get',
+      url: `${commPrefix}/taEventProperties`
     },
   }
 }

src/store/modules/indexEcharts.js

@@ -5,7 +5,10 @@ export default {
   namespaced: true,
   state: {
     echartsInfo: {},
-    newsUserCount:{}
+    newsUserCount:{},
+    bizEvents: [],
+    bizEventTypes: [],
+    bizEventProperties: [],
   },
   mutations: {
     updateList (state, payload) {
@@ -14,12 +17,84 @@ export default {
     updateNewsUserCount (state, payload) {
       state.newsUserCount = payload
     },
+    updateEvents (state, payload) {
+      state.bizEvents = payload
+    },
+    updateEventTypes (state, payload) {
+      state.bizEventTypes = payload
+    },
+    updateEventProperties (state, payload) {
+      state.bizEventProperties = payload
+    },
   },
   actions: {
     setDetailNull ({ commit }) {
       commit('updateList', {})
     },
 
+    getBizEvents ({ state, commit }) {
+      if (state.bizEvents && state.bizEvents.length) {
+        return Promise.resolve(state.bizEvents)
+      }
+
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.bizEvent.list,
+          params: { pageSize: 9999 }
+        }).then((data) => {
+          commit('updateEvents', data.records)
+          resolve(data.records)
+        }).catch((err) => {
+          const message = err.message || err.msg
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+
+    getBizEventTypes ({ state, commit }) {
+      if (state.bizEventTypes && state.bizEventTypes.length) {
+        return Promise.resolve(state.bizEventTypes)
+      }
+
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.bizEvent.dict,
+          params: { pageSize: 9999 }
+        }).then((data) => {
+          commit('updateEventTypes', data.records)
+          resolve(data.records)
+        }).catch((err) => {
+          const message = err.message || err.msg
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+
+    getBizEventProperties ({ state, commit }, payload = {}) {
+      if (state.bizEventProperties && state.bizEventProperties.length) {
+        return Promise.resolve(state.bizEventProperties)
+      }
+
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.bizEvent.properties,
+          params: { pageSize: 9999, ...payload }
+        }).then((data) => {
+          commit('updateEventProperties', data.records)
+          resolve(data.records)
+        }).catch((err) => {
+          const message = err.message || err.msg
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+
     getUserConversionRate(_, payload) {
       return new Promise((resolve, reject) => {
         request({
@@ -67,34 +142,6 @@ export default {
         })
       })
     },
-    // changeExchangeStatus (_, payload) {
-    //   return new Promise((resolve, reject) => {
-    //     request({
-    //       ...apis.exchange.change,
-    //       data: payload,
-    //     }).then((data) => {
-    //       resolve(data)
-    //     }).catch((err) => {
-    //       const message = err.message || err.msg
-
-    //       if (typeof message === 'string') {
-    //         reject(message)
-    //       }
-    //     })
-    //   })
-    // },
-    // verifyById (_, payload) {
-    //   return new Promise((resolve, reject) => {
-    //     request({
-    //       ...apis.exchange.update,
-    //       urlData: payload,
-    //     }).then((data) => {
-    //       resolve(data)
-    //     }).catch((err) => {
-    //       reject(err)
-    //     })
-    //   })
-    // }
     getUserResource({ commit }, payload) { // 用户来源 详情页
       return new Promise((resolve, reject) => {
         request({
@@ -106,6 +153,78 @@ export default {
           reject(err)
         })
       })
-    }
+    },
+    getUserBehaviorSummary({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.userBehavior.summary,
+          params: payload
+        }).then((data) => {
+          resolve(data)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getUserBehaviorProfile({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.userBehavior.profile,
+          params: payload
+        }).then((data) => {
+          resolve(data)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getIntentionUsers({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.intentionUsers,
+          params: { pageSize: 9999, ...payload }
+        }).then((data) => {
+          resolve(data.records)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getUserSex({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.userSex,
+          params: { pageSize: 9999, ...payload }
+        }).then((data) => {
+          resolve(data.selectSexUser)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getUserCity({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.userCity,
+          params: { pageSize: 9999, ...payload }
+        }).then((data) => {
+          resolve(data.records)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
+    getUserActive({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.indexEcharts.userActive,
+          params: { pageSize: 9999, ...payload }
+        }).then((data) => {
+          resolve(data.selectActiveUserCount)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
+    },
   }
 }

src/views/indexEcharts/behaviorAnalysis.vue

@@ -1,183 +1,105 @@
 <template>
 <div>
-  <div class="system-table-search">
-      <div>
-        <ul>
-          <li>
-            <span>用户事件</span>
-            <el-select v-model="form.verifyStatus" placeholder="请选择">
-              <el-option v-for="(item,i) in gridData || []" :key="i" :label="item.name" :value="item.value"></el-option>
-            </el-select>
-          </li>
-          <li>
-            <el-select v-model="form.verifyStatus" placeholder="请选择">
-              <el-option v-for="(item,i) in gridData || []" :key="i" :label="item.name" :value="item.value"></el-option>
-            </el-select>
-          </li>
-          <li>
-            <span>属性</span>
-            <el-select v-model="form.verifyStatus" placeholder="请选择">
-              <el-option v-for="(item,i) in gridData || []" :key="i" :label="item.name" :value="item.value"></el-option>
-            </el-select>
-          </li>
-        </ul>
-      </div>
+  <xm-search size="medium" @submit="search">
+    <div>
+      <el-form-item label="选择项目">
+        <select-building v-model="formData.buildingId"></select-building>
+      </el-form-item>
+      <el-form-item label="用户事件">
+        <el-select v-model="formData.eventType" placeholder="所有事件组">
+          <el-option v-for="item in bizEventTypes" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="formData.event" placeholder="请选择事件">
+          <el-option v-for="item in bizEvents" :key="item.eventCode" :label="item.eventName" :value="item.eventCode"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="属性">
+        <el-select v-model="formData.activity" placeholder="请选择属性">
+          <el-option v-for="item in eventProperties" :key="item.propertyCode" :label="item.propertyName" :value="item.propertyCode"></el-option>
+        </el-select>
+      </el-form-item>
     </div>
-  <p>最近一周 最近一个月 
-    <el-date-picker
-      v-model="value"
-      type="daterange"
-      start-placeholder="开始日期"
-      end-placeholder="结束日期"
-      default-value="2019-08-08">
-    </el-date-picker>
-    <el-button class="btn" size="mini"  type="primary" @click="search">查询</el-button>
-  </p>
+    <el-form-item>
+      <el-button type="text" @click="() => getDataOf(7)">最近7天</el-button>
+      <el-button type="text" @click="() => getDataOf(30)">最近1月</el-button>
+    </el-form-item>
+    <el-form-item>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        style="margin-left: 16px">
+      </el-date-picker>
+    </el-form-item>
+  </xm-search>
   
-  <div class="grid-content" ref="thirdChart"  id="thirdChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div>
-   <el-table :data="tableData2"  border  center  style="width: 100%">
-    <el-table-column label="用户姓名" prop="name"></el-table-column>
-    <el-table-column label="手机号" prop="phone"></el-table-column>
-    <el-table-column label="意向楼盘" prop="building"></el-table-column>
-    <el-table-column label="意向值" prop="num"></el-table-column>
-  </el-table>
-
+  <user-behavior :data-zoom="true" ref="chart" mode="all"></user-behavior>
 </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from "vuex";
-import apis from "../../config/api";
-import { mapState } from "vuex";
-import Echarts from "echarts";
+import dayjs from 'dayjs'
+import { createNamespacedHelpers } from "vuex"
+
+const { mapActions } = createNamespacedHelpers("indexEcharts")
 
 export default {
-  components: {},
+  components: {
+    UserBehavior: () => import('./components/UserBehavior')
+  },
   data() {
     return {
-      form: {
-        verifyStatus: ""
+      formData: {
+        eventType: '',
+        event: '',
+        activity: '',
+        buildingId: '',
+        pageSize: 9999,
       },
-      gridData: [
-        {
-          name: "未通过",
-          value: "0"
-        },
-        {
-          name: "已通过",
-          value: "1"
-        },
-        {
-          name: "已驳回",
-          value: "2"
-        }
-      ],
-      value: "",
-      tableData2: [
-        {
-          num: "98",
-          name: "王晓红",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "99",
-          name: "王晓红2",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "88",
-          name: "王晓红3",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "94",
-          name: "王晓红4",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        }
-      ]
+      dateRange: [],
+      bizEvents: [],
+      bizEventTypes: [],
+      eventProperties: [],
     };
   },
   computed: {},
-  methods: {
-    search() {},
-    drawLine() {
-      // 折线图
-      let thirdChart = Echarts.init(this.$refs.thirdChart);
-      // 绘制图表
-      thirdChart.setOption({
-        title: {
-          text: "访问人数"
-        },
-        color: ["#000", "green", "#5793f3", "#d14a61", "#241bba", "orange"],
-        tooltip: {
-          trigger: "axis"
-        },
-        legend: {
-          data: ["首页", "项目", "咨询", "名片", "活动", "资讯"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        toolbox: {},
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
-        },
-        yAxis: {
-          type: "value"
-        },
-        series: [
-          {
-            name: "首页",
-            type: "line",
-            stack: "1",
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: "项目",
-            type: "line",
-            stack: "2",
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: "咨询",
-            type: "line",
-            stack: "3",
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: "名片",
-            type: "line",
-            stack: "4",
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: "活动",
-            type: "line",
-            stack: "5",
-            data: [820, 932, 901, 544, 1290, 1330, 1320]
-          },
-          {
-            name: "资讯",
-            type: "line",
-            stack: "6",
-            data: [400, 500, 201, 934, 1290, 1423, 777]
-          }
-        ]
-      });
+  watch: {
+    formData: {
+      handler(nw) {
+        const { eventType, buildingId } = nw
+        if (!eventType && !buildingId) return
+
+        this.getBizEventProperties({ eventType, buildingId }).then((dt) => (this.eventProperties = dt))
+      },
+      deep: true
     }
   },
+  methods: {
+    ...mapActions([
+      'getBizEvents',
+      'getBizEventTypes',
+      'getBizEventProperties',
+    ]),
+    search() {
+      const [startDate, endDate] = this.dateRange
+      this.$refs.chart.getData({ startDate, endDate, ...this.formData })
+    },
+    getDataOf(days) {      
+      const endDate = new Date()
+      const startDate = dayjs().subtract(days, 'day').toDate()
+
+      this.$refs.chart.getData({ startDate, endDate, ...this.formData })
+    },
+  },
   mounted() {
-    this.drawLine();
-  }
+  },
+  created () {
+    this.getBizEvents().then((dt) => (this.bizEvents = dt))
+    this.getBizEventTypes().then((dt) => (this.bizEventTypes = dt))
+  },
 };
 </script>
 

src/views/indexEcharts/components/IntentionalCustomers.vue

@@ -2,29 +2,56 @@
   <div class="chart-box">
     <header-cell>
       <h3>意向客户</h3>
-      <select-building slot="action"></select-building>
+      <select-building slot="action" @change="handleBuildingChange"></select-building>
     </header-cell>
 
-    <el-table :data="tableData"  border  center  style="width: 100%; margin-top: 16px">
-      <el-table-column label="用户姓名" prop="name"></el-table-column>
+    <el-table v-loading="loading" :data="dataset"  border  center  style="width: 100%; margin-top: 16px">
+      <el-table-column label="用户姓名" prop="personName"></el-table-column>
       <el-table-column label="手机号" prop="phone"></el-table-column>
-      <el-table-column label="意向楼盘" prop="building"></el-table-column>
-      <el-table-column label="意向值" prop="num"></el-table-column>
+      <el-table-column label="意向楼盘" prop="buildingName"></el-table-column>
+      <el-table-column label="意向值" prop="intention"></el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
+import dayjs from 'dayjs'
+import { createNamespacedHelpers } from "vuex"
+
+const { mapActions } = createNamespacedHelpers("indexEcharts")
+
 export default {
   name: 'IntentionalCustomers',
   props: ['value'],
   components: {
     HeaderCell: () => import('@/components/HeaderCell'),
   },
-  computed: {
-    tableData() {
-      return this.value || []
+  data() {
+    return {
+      loading: false,
+      dataset: [],
+    }
+  },
+  methods: {
+    ...mapActions(['getIntentionUsers']),
+    handleBuildingChange(buildingId) {
+      this.getData({ buildingId })
+    },
+    getData(filters = {}) {
+      const endDate = new Date()
+      const startDate = dayjs().subtract(7, 'day').toDate()
+
+      this.loading = true
+      this.getIntentionUsers({ startDate, endDate, ...filters}).then((dt) => {
+        this.loading = false
+        this.dataset = dt
+      }).catch(() => {
+        this.loading = false
+      })
     }
+  },
+  mounted () {
+    this.getData()
   }
 }
 </script>

src/views/indexEcharts/components/UserActive.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="chart-box">
-    <h3>活跃用户数</h3>
-    <v-chart class="chart" :options="options" />
+    <header-cell>
+      <h3>活跃用户数</h3>
+      <el-select v-model="theType" slot="action" @change="handleTypesChange">
+        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
+      </el-select>
+    </header-cell>
+    <v-chart class="chart" v-loading="loading" :options="options" />
   </div>
 </template>
 
@@ -9,15 +14,28 @@
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/component/tooltip'
+import dayjs from 'dayjs'
+import { createNamespacedHelpers } from "vuex"
+
+const { mapActions } = createNamespacedHelpers("indexEcharts")
 
 export default {
   name: 'UserActive',
   components: {
     'v-chart': ECharts,
+    HeaderCell: () => import('@/components/HeaderCell')
   },
   props: [ 'value' ],
   data () {
     return {
+      loading: false,
+      dataset: [],
+      theType: 'day',
+      types: [
+        {label: '日活跃', value: 'day'},
+        {label: '周活跃', value: 'week'},
+        {label: '月活跃', value: 'month'},
+      ],
       defaultOpt: {
         legend: { show: false },
         color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
@@ -34,11 +52,31 @@ export default {
         series: {
           type: 'bar',
           name: '活跃用户',
-          data: (this.value || []).map(x => ([ x.date,!x.activityCount ? 0 : x.activityCount ]))
+          data: (this.dataset || []).map(x => ([ x.date,!x.activityCount ? 0 : x.activityCount ]))
         }
       }
     }
-  }
+  },
+  methods: {
+    ...mapActions(['getUserActive']),
+    getData(filers) {
+      // const endDate = new Date()
+      // const startDate = dayjs().subtract(7, 'day').toDate()
+      this.loading = true
+      this.getUserActive(filers).then((data) => {
+        this.dataset = data || []
+        this.loading = false
+      }).catch(() => {
+        this.loading = true
+      })
+    },
+    handleTypesChange (e) {
+      this.getData({ dateType: e })
+    }
+  },
+  mounted() {
+    this.getData({ dateType: this.theType })
+  },
 }
 </script>
 

src/views/indexEcharts/components/UserBehavior.vue

@@ -1,10 +1,35 @@
 <template>
-  <div class="chart-box">
-    <header-cell>
-      <h3>用户行为 <small>最近七天</small></h3>
-      <select-building slot="action"></select-building>
-    </header-cell>
-    <v-chart class="chart" :options="options" />
+  <div>
+    <div class="chart-box" v-if="mode === 'all' || mode === 'lines'">
+      <header-cell>
+        <h3>用户行为 <small>{{subtitle}}</small></h3>
+        <select-building slot="action" v-if="selectBuilding" @change="handleBuildingChange"></select-building>
+      </header-cell>
+      <v-chart class="chart" v-loading="loading" :options="options" />
+    </div>
+    <div class="chart-box" v-if="mode === 'all' || mode === 'table'">
+      <el-table :data="tableData"  border  center  style="width: 100%" height="400">
+        <el-table-column label="访问事件" prop="eventName"></el-table-column>
+        <el-table-column label="访问用户" prop="userName"></el-table-column>
+        <el-table-column label="访问次数">
+          <template slot-scope="scope">
+            <el-button type="text" @click="showDetail(scope.row)">{{scope.row.accessCount}}</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="首次访问时间" prop="visitTime"></el-table-column>
+        <el-table-column label="离开时间" prop="leaveTime"></el-table-column>
+      </el-table>
+    </div>
+    <el-dialog
+      title="访问记录"
+      :visible.sync="dialogVisible"
+      width="50%">
+      <el-table v-loading="detailData.length > 0" :data="detailData"  border  center  style="width: 100%" height="400">
+        <el-table-column type="index" width="50"></el-table-column>
+        <el-table-column label="访问时间" prop="visitTime"></el-table-column>
+        <el-table-column label="离开时间" prop="leaveTime"></el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
@@ -12,32 +37,48 @@
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/line'
 import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/dataZoom'
 import dayjs from 'dayjs'
 import HeaderCell from '@/components/HeaderCell'
+import { createNamespacedHelpers } from "vuex"
+
+const { mapActions } = createNamespacedHelpers("indexEcharts")
 
 export default {
   name: 'UserBehavior',
   components: {
-    'v-chart': ECharts,
     HeaderCell,
   },
   props: [
     'value',
+    'subtitle',
+    'dataZoom',
+    'selectBuilding',
+    'mode',
   ],
   data() {
     return {
+      loading: false,
+      dataset: {},
+      dialogVisible: false,
+      detailData: [],
       baseOpt: {
-        legend: {},
+        legend: { show: true, zlevel: 10 },
         color: ['#8954BA', '#175DFB', '#0BB963', '#27DEFF', '#E713D2', '#E71313'],
-        tooltip: {},
+        tooltip: {
+          trigger: 'axis'
+        },
         xAxis: { type: 'time' },
         yAxis: {},
       },
     }
   },
   computed: {
+    tableData () {
+      return (this.dataset.data || {}).records || []
+    },
     options() {
-      const seriesMaker = (this.value || []).reduce((series, item) => {
+      const seriesMaker = (this.dataset.selectUserBehavior || []).reduce((series, item) => {
         let { date, activityCount, activity } = item
         date = dayjs(date).format('YYYY-MM-DD')
         if (!activityCount) activityCount = 0
@@ -48,8 +89,23 @@ export default {
         return series;
       }, {})
 
+      const dataZoom = this.dataZoom ? 
+        [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100
+          },
+          {
+            type: 'slider',
+            start: 0,
+            end: 100
+          },
+        ] : undefined
+
       return {
         ...this.baseOpt,
+        dataZoom,
         series: Object.keys(seriesMaker).map(x => {
           return {
             type: 'line',
@@ -60,6 +116,37 @@ export default {
       }
     }
   },
+  methods: {
+    ...mapActions([
+      'getUserBehaviorSummary',
+      'getUserBehaviorProfile',
+    ]),
+    getData(filers) {
+      this.loading = true
+      this.getUserBehaviorSummary(filers).then((data) => {
+        this.dataset = data || {}
+        this.loading = false
+      }).catch(() => {
+        this.loading = true
+      })
+    },
+    showDetail (row) {
+      this.detailData = []
+      this.dialogVisible = true
+      this.getUserBehaviorProfile({ event: row.event, personId: row.personId }).then((data) => {
+        this.detailData = data
+      })
+    },
+    handleBuildingChange (e) {
+      this.getData({ buildingId: e })
+    },
+  },
+  mounted () {
+    const endDate = new Date()
+    const startDate = dayjs().subtract(7, 'day').toDate()
+
+    this.getData({ startDate, endDate, pageSize: 9999 })
+  },
 }
 </script>
 

src/views/indexEcharts/components/UserSex.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chart-box">
     <h3>性别比例</h3>
-    <v-chart class="chart" :options="options" />
+    <v-chart v-loading="loading" class="chart" :options="options" />
   </div>
 </template>
 
@@ -9,6 +9,10 @@
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/pie'
 import 'echarts/lib/component/tooltip'
+import dayjs from 'dayjs'
+import { createNamespacedHelpers } from "vuex"
+
+const { mapActions } = createNamespacedHelpers("indexEcharts")
 
 export default {
   name: 'UserSex',
@@ -20,6 +24,8 @@ export default {
   ],
   data() {
     return {
+      loading: false,
+      dataset: [],
       defaultOpt: {
         legend: {},
         color: ['#6A96F8', '#F5749E'],
@@ -38,11 +44,28 @@ export default {
         ...this.defaultOpt,
         series: {
           ...this.defaultOpt.series,
-          data: this.value || [],
+          data: this.dataset || [],
         },
       }
     }
   },
+  methods: {
+    ...mapActions(['getUserSex']),
+    getData(filers) {
+      this.loading = true
+      this.getUserSex(filers).then((data) => {
+        this.dataset = data || {}
+        this.loading = false
+      }).catch(() => {
+        this.loading = true
+      })
+    },
+  },
+  mounted () {
+    const endDate = new Date()
+    const startDate = dayjs().subtract(7, 'day').toDate()
+    this.getData({ startDate, endDate })
+  },
 }
 </script>
 

src/views/indexEcharts/components/UserSource.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="chart-box" v-if="mode == 'all' || mode == 'report'">
-      <h3>用户来源 <small>{{subTitle}}</small></h3>
+      <h3>用户来源 <small>{{subtitle}}</small></h3>
       <v-chart v-loading="loading" class="chart" :options="options" />
     </div>
     <div class="chart-box" v-if="mode == 'all' || mode == 'table'">
@@ -33,7 +33,7 @@ export default {
   },
   props: [
     'value',
-    'subTitle',
+    'subtitle',
     'mode',
   ],
   data () {

src/views/indexEcharts/index.vue

@@ -8,27 +8,27 @@
       <card label="总注册用户">{{echartsInfo.selectRegisteredCount}}</card>
     </el-col>
     <el-col :span="8">
-      <card label="最近7天新增" @click.native="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" mode="report" sub-title="最近七天"></user-source>
-  <user-behavior class="marginTB" :value="userBehaviorData" @click="toBehaviorAnalysis()"></user-behavior>
+  <user-source mode="report" subtitle="最近七天" @click.native="toUserSource"></user-source>
+  <user-behavior class="marginTB" mode="lines" :select-building="true" @click.native="toBehaviorAnalysis" subtitle="最近七天"></user-behavior>
  <el-row :gutter="20">
     <el-col :span="12">
-      <user-active :value="userActiveData"></user-active>
+      <user-active></user-active>
     </el-col>
     <el-col :span="12">
       <user-conversion></user-conversion>
     </el-col>
     <el-col :span="12">
-      <user-sex :value="userSexData"></user-sex>
+      <user-sex></user-sex>
     </el-col>
     <el-col :span="12">
-      <user-city :value="userCityData"></user-city>
+      <user-city></user-city>
     </el-col>
   </el-row>
-  <new-users class="marginTB" :value="newUserData" mode="table"></new-users>
-  <intentional-customers  class="marginTB"></intentional-customers>
+  <new-users class="marginTB" mode="table"></new-users>
+  <intentional-customers class="marginTB"></intentional-customers>
 </div>
 </template>
 
@@ -56,12 +56,6 @@ export default {
   },
   data() {
     return {
-      userSourceData: {},
-      userBehaviorData: [],
-      userActiveData: [],
-      userSexData: [],
-      userCityData: [],
-      newUserData: [],
     };
   },
   computed: {
@@ -73,13 +67,7 @@ export default {
     ...mapIndexEchartsActions(["getIndexEcharts", "setDetailNull"]),
     initPage() {
       this.setDetailNull();
-      this.getIndexEcharts().then(x => {
-        this.userSourceData = x.selectUserSource
-        this.userBehaviorData = x.selectUserBehavior
-        this.userActiveData = x.selectActiveUserCount
-        this.userSexData = x.selectSexUser
-        this.newUserData = this.echartsInfo.selectNewsUserCount
-      });;
+      this.getIndexEcharts().then(window.console.log);;
     },
     toNewUsers() {
       this.$router.push({ name: "newUsers" });