Merge branch 'feat/v20240706-dashboard' into dev

.env.development

@@ -4,6 +4,9 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = '/dev-api'
 
+# laoa api
+VUE_APP_LAOA_BASE_API = 'https://test.zhult.com/laoa-huozhu'
+
 # 开发环境
 # VUE_APP_DOMAIN_PREFIX = 'http://192.168.0.91:9003'
 # 线上

.env.production

@@ -7,3 +7,6 @@ VUE_APP_BASE_API = '/prod-api'
 VUE_APP_DOMAIN_TF = 'https://nsappapi.tuanfengkeji.cn'
 VUE_APP_DOMAIN_TUAN = 'https://www.tuanfengkeji.cn/dts-app-api'
 VUE_APP_DOMAIN_PREFIX = 'https://nsadminapi.tuanfengkeji.cn'
+
+# laoa api
+VUE_APP_LAOA_BASE_API = 'https://www.zhult.com/laoa-huozhu'

.env.staging

@@ -11,4 +11,6 @@ VUE_APP_BASE_API = '/stage-api'
 # 测试
 VUE_APP_DOMAIN_TF = 'https://nsappapitest.tuanfengkeji.cn'
 VUE_APP_DOMAIN_TUAN = 'https://test.tuanfengkeji.cn/dts-app-api'
-VUE_APP_DOMAIN_PREFIX = 'https://nsadminapitest.tuanfengkeji.cn'
+VUE_APP_DOMAIN_PREFIX = 'https://nsadminapitest.tuanfengkeji.cn'
+# laoa api
+VUE_APP_LAOA_BASE_API = 'https://test.zhult.com/laoa-huozhu'

src/api/home.js

@@ -1,38 +1,48 @@
-import request from '@/utils/request'
-
-// 查询首页统计图表
-/**
- * @param {*}
- * @returns request
- */
-
-export function homeGetChartData() {
-  return request({
-    url: '/index/indexCharts',
-    method: 'post'
-  })
-}
-
-// 查询首页统计统计数据
-/**
- * @param {*}
- * @returns request
- */
-
-export function homeGetFormData() {
-  return request({
-    url: '/index/indexStats',
-    method: 'post'
-  })
-}
-
-
-/**
- * @description 获取首页统计信息
- */
-export function getHomeStatisticsData() {
-  return request({
-    url: '/home/statistics',
-    method: 'get'
-  })
-}
+import request from '@/utils/request'
+
+// 查询首页统计图表
+/**
+ * @param {*}
+ * @returns request
+ */
+
+export function homeGetChartData() {
+  return request({
+    url: '/index/indexCharts',
+    method: 'post'
+  })
+}
+
+// 查询首页统计统计数据
+/**
+ * @param {*}
+ * @returns request
+ */
+
+export function homeGetFormData() {
+  return request({
+    url: '/index/indexStats',
+    method: 'post'
+  })
+}
+
+/**
+ * @description 获取首页统计信息
+ */
+export function getHomeStatisticsData(params) {
+  return request({
+    url: '/home/statistics',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * @description 获取商家统计列表
+ */
+export function getHomeStatisticsShopList() {
+  return request({
+    url: '/home/statistics/getShopList',
+    method: 'get'
+  })
+}

src/views/dashboard/data/dashboard.js

@@ -109,3 +109,10 @@ export const sitedatastatistics = [
   { label: '团长总量', field: 'headquarterTotal', itemStyles: 'margin-right: 51px' },
   { label: '合伙人总量', field: 'partnerTotal', itemStyles: 'margin-right: 51px' }
 ]
+
+// 搜索访问类型
+export const searchType = [
+  { key: 'agents', value: 1 },
+  { key: 'franchise', value: 2 },
+  { key: 'shop', value: 3 }
+]

src/views/dashboard/index.vue

@@ -3,10 +3,28 @@
     <!-- 顶部的地区和店铺筛选 -->
     <div class="total-search">
       <div class="wrapper">
-        <AddresSelect size=""></AddresSelect>
-        <el-select class="shop-selector" v-model="totalSearch.selectShop" placeholder="请选择区域">
-          <el-option v-for="shop in selectOptions.shopListOptions" :key="shop.value" :label="shop.label" :value="shop.value"></el-option>
-        </el-select>
+        <el-form ref="topSearchFormRef" inline :model="topSearchForm">
+          <el-form-item label="代理商">
+            <el-select @change="handleChangeTopSelect('agents')" v-model="topSearchForm.agents" class="select" placeholder="请选择代理商">
+              <el-option v-for="(item, index) in selectOptions.agents" :key="`${item.shopAddress}:${index}`" :label="item.shopName" :value="`${item.shopAddress}:${index}`"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="加盟商">
+            <el-select @change="handleChangeTopSelect('franchise')" v-model="topSearchForm.franchise" class="select" placeholder="请选择加盟商">
+              <el-option v-for="(item, index) in selectOptions.franchise" :key="`${item.shopAddress}:${index}`" :label="item.shopName" :value="`${item.shopAddress}:${index}`"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="商家">
+            <el-select @change="handleChangeTopSelect('shop')" class="select" v-model="topSearchForm.shop" placeholder="请选择商家">
+              <el-option v-for="(item, index) in selectOptions.shopList" :key="`${item.shopName}:${index}`" :label="item.shopName" :value="`${item.shopName}:${index}`"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-button class="btn" type="primary" size="default" @click="getHomeData">筛选</el-button>
+          <el-button class="btn" size="default" @click="handleResetForm">重置</el-button>
+        </el-form>
       </div>
     </div>
 
@@ -103,7 +121,8 @@
 
 <script>
 import * as _ from 'lodash'
-import { getHomeStatisticsData } from '@/api/home'
+import axios from 'axios'
+import { getHomeStatisticsData, getHomeStatisticsShopList } from '@/api/home'
 import { getDefaultBarData } from './utils/echarts'
 import StatisticsPanel from './componets/StatisticsPanel.vue'
 import AddresSelect from './componets/AddresSelect.vue'
@@ -119,8 +138,10 @@ import SitePieChart from './componets/SitePieChart.vue'
 import PAndLWarning from './componets/PAndLWarning.vue'
 import SetPLLine from './componets/SetPLLine.vue'
 
-import { statisticalArea, consumerProfile, financialStatistics, sitedatastatistics } from './data/dashboard.js'
+import { statisticalArea, consumerProfile, financialStatistics, sitedatastatistics, searchType } from './data/dashboard.js'
+import { Loading } from 'element-ui'
 
+// api docs: https://www.showdoc.com.cn/2275703555064913/11472635245710770
 export default {
   components: {
     SetPLLine,
@@ -139,6 +160,7 @@ export default {
   },
   data() {
     return {
+      observer: null,
       statisticalArea: Object.freeze(statisticalArea),
       consumerProfile: Object.freeze(consumerProfile),
       financialStatistics: Object.freeze(financialStatistics),
@@ -147,6 +169,12 @@ export default {
         selectAddress: 1,
         selectShop: 1
       },
+      topSearchForm: {
+        agents: undefined,
+        shop: undefined,
+        franchise: undefined,
+        type: undefined
+      },
       dymicStyle: {
         siteContainerHeight: '891px',
         statisticalAreaItemWidth: '32%'
@@ -170,7 +198,11 @@ export default {
           // { label: '社区', value: 1 },
           // { label: '商圈', value: 2 },
           // { label: '商城', value: 3 }
-        ]
+        ],
+
+        shopList: [], // 商家列表
+        agents: [], // 代理商列表
+        franchise: [] // 加盟商列表
       },
 
       // 分析图相关
@@ -286,42 +318,89 @@ export default {
     }
   },
 
+  created() {
+    this.getFranchiseesOrAgents(1)
+    this.getFranchiseesOrAgents(2)
+    this.getShopList()
+  },
+
   mounted() {
     this.getHomeData()
     this.observeContainerSize()
   },
 
   methods: {
-    // 一次性获取首页数据
-    async getHomeData() {
-      const res = await getHomeStatisticsData()
-      const { data } = res
-
-      Object.assign(this.statisticalRegionData.memberStatistics, data.memberStatistics, data.memberStatistics.memberIncreaseRate)
+    // 获取代理商或者加盟商列表 1=代理商 2=加盟商
+    async getFranchiseesOrAgents(type = 1) {
+      try {
+        const res = await axios.get(`${process.env.VUE_APP_LAOA_BASE_API}/api/hz/shop/third/getShopsByType`, {
+          params: { type, shopName: '' }
+        })
+        const target = type === 1 ? 'agents' : 'franchise'
+        this.selectOptions[target] = res.status === 200 && res.data.statusCode === 20000 ? res.data.data : []
+      } catch (error) {
+        console.error('Error fetching data:', error)
+        const target = type === 1 ? 'agents' : 'franchise'
+        this.selectOptions[target] = []
+      }
+    },
 
-      console.log('年的', this.statisticalRegionData.memberStatistics)
-      Object.assign(this.statisticalRegionData.orderStatistics, data.orderStatistics)
-      Object.assign(this.statisticalRegionData.platformTransactionDataStatistics, data.platformTransactionDataStatistics)
-      Object.assign(this.statisticalRegionData.voucherStatistics, data.voucherStatistics)
-      Object.assign(this.statisticalRegionData.commissionStatistics, data.commissionStatistics)
-      Object.assign(this.statisticalRegionData.consumptionStatistics, data.consumptionStatistics)
-      Object.assign(this.memberConsumptionStatistics, data.memberConsumptionStatistics)
-      Object.assign(this.analysisChartStatistics, data.analysisChartStatistics)
-      Object.assign(this.logisticsStatistics, data.logisticsStatistics)
+    // 获取商家列表
+    async getShopList() {
+      try {
+        const res = await getHomeStatisticsShopList()
+        this.selectOptions.shopList = res.data
+      } catch (error) {
+        this.selectOptions.shopList = []
+      }
+    },
 
-      // 商品排名
-      const { mallProductStatisticsTotalList, communityProductStatisticsTotalList, businessDistrictProductStatisticsTotalList } = data.goodsSortStatistics
-      this.goodsRanking.community = communityProductStatisticsTotalList
-      this.goodsRanking.shop = mallProductStatisticsTotalList
-      this.goodsRanking.businessDistrict = businessDistrictProductStatisticsTotalList
+    // 一次性获取首页数据
+    async getHomeData() {
+      const serveice = Loading.service()
+      try {
+        const type = this.topSearchForm.type
+        let address = undefined
+        if (type) {
+          address = this.topSearchForm[searchType.find((item) => item.value === type).key]
+          if (address) {
+            address = address.split(':')[0]
+          }
+        }
 
-      // 网点统计
-      this.dotStatistics = {
-        ...data.dotStatistics,
-        ...this.statisticalRegionData.memberStatistics
+        const res = await getHomeStatisticsData({
+          type: type || null,
+          address
+        })
+        const { data } = res
+
+        Object.assign(this.statisticalRegionData.memberStatistics, data.memberStatistics, data.memberStatistics.memberIncreaseRate)
+        Object.assign(this.statisticalRegionData.orderStatistics, data.orderStatistics)
+        Object.assign(this.statisticalRegionData.platformTransactionDataStatistics, data.platformTransactionDataStatistics)
+        Object.assign(this.statisticalRegionData.voucherStatistics, data.voucherStatistics)
+        Object.assign(this.statisticalRegionData.commissionStatistics, data.commissionStatistics)
+        Object.assign(this.statisticalRegionData.consumptionStatistics, data.consumptionStatistics)
+        Object.assign(this.memberConsumptionStatistics, data.memberConsumptionStatistics)
+        Object.assign(this.analysisChartStatistics, data.analysisChartStatistics)
+        Object.assign(this.logisticsStatistics, data.logisticsStatistics)
+
+        // 商品排名
+        const { mallProductStatisticsTotalList, communityProductStatisticsTotalList, businessDistrictProductStatisticsTotalList } = data.goodsSortStatistics
+        this.goodsRanking.community = communityProductStatisticsTotalList
+        this.goodsRanking.shop = mallProductStatisticsTotalList
+        this.goodsRanking.businessDistrict = businessDistrictProductStatisticsTotalList
+
+        // 网点统计
+        this.dotStatistics = {
+          ...data.dotStatistics,
+          ...this.statisticalRegionData.memberStatistics
+        }
+        // 地图数据
+        this.nationalMapList = data.nationalMapList
+      } catch (error) {
+      } finally {
+        serveice.close()
       }
-      // 地图数据
-      this.nationalMapList = data.nationalMapList
     },
 
     // 最上面的搜索区域发生变化
@@ -333,18 +412,26 @@ export default {
     // 监听容器变化重新渲染图标
     observeContainerSize() {
       const _this = this
-      const observer = new ResizeObserver(
+      this.observer = new ResizeObserver(
         _.debounce(() => {
-          try {
-            _this.$refs.analysisChartRef.resize()
-            _this.$refs.lLogisticsStatisticsChartRef.resize()
-            _this.$refs.goodsRankingChartRef.resize()
-            _this.$refs.siteMapChartRef.resize()
-            _this.$refs.sitePieChartRef.resize()
-          } catch (error) {}
+          _this.$refs.analysisChartRef.resize()
+          _this.$refs.lLogisticsStatisticsChartRef.resize()
+          _this.$refs.goodsRankingChartRef.resize()
+          _this.$refs.siteMapChartRef.resize()
+          _this.$refs.sitePieChartRef.resize()
         }, 500)
       )
-      observer.observe(this.$refs.dashboardContainerRef)
+      this.observer.observe(this.$refs.dashboardContainerRef)
+    },
+
+    handleResetForm() {
+      this.topSearchForm = {
+        agents: undefined,
+        shop: undefined,
+        franchise: undefined,
+        type: undefined
+      }
+      this.getHomeData()
     },
 
     // 统计区域的筛选发生变化
@@ -375,6 +462,16 @@ export default {
     // 二级区域的筛选发生变化
     handleFilterChange(label, data) {
       console.log('二级区域发生变化了', label, data)
+    },
+
+    handleChangeTopSelect(currentKey) {
+      for (const key in this.topSearchForm) {
+        if (Object.hasOwnProperty.call(this.topSearchForm, key) && currentKey !== key) {
+          this.topSearchForm[key] = undefined
+        }
+      }
+
+      this.topSearchForm.type = searchType.find((item) => item.key === currentKey).value || null
     }
   },
 
@@ -388,6 +485,13 @@ export default {
     goodsRankingData() {
       return this.goodsRanking[{ 1: 'community', 2: 'businessDistrict', 3: 'shop' }[this.currentGoodsRankingTab]]
     }
+  },
+
+  beforeDestroy() {
+    if (this.observer) {
+      this.observer.unobserve(this.$refs.dashboardContainerRef)
+      this.observer = null
+    }
   }
 }
 </script>
@@ -488,30 +592,42 @@ export default {
   overflow: auto;
 
   .total-search {
-    height: 72px;
+    min-height: 72px;
     background-color: #fff;
     padding: 16px 24px;
     box-sizing: border-box;
 
     .wrapper {
-      display: inline-flex;
-      border: 1px solid #dfdfdf;
-      border-radius: 4px;
-
-      .shop-selector {
-        position: relative;
-        width: 256px;
-
-        &::after {
-          top: 50%;
-          left: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 20px;
-          content: '';
-          display: block;
-          position: absolute;
-          background-color: #d8d8d8;
+      ::v-deep .el-form-item__label {
+        font-size: 16px;
+        font-weight: normal;
+        padding-right: 16px;
+      }
+
+      .el-form-item {
+        margin-right: 24px;
+      }
+
+      .select {
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+      }
+
+      .btn {
+        height: 40px;
+        width: 96px;
+        font-size: 16px;
+        font-weight: 500;
+        &.el-button--default {
+          border: 1px solid #dcdfe6;
+        }
+        &.el-button--primary {
+          background-color: #3a68f2;
+          border: none;
+
+          &:hover {
+            background-color: rgba($color: #3a68f2, $alpha: 0.8);
+          }
         }
       }
     }