FlowDetail.nvue

<template>
  <view class="fixed-date">
    <DatePicker @change="handleDateChange">
      <!-- <template #filter>
    		<view class="filter">
    			<text class="filter_text">{{ '自定义' }}</text>
    			<uv-icon name="arrow-down-fill" class="filter_icon" size="10rpx" color="#202328" />
    		</view>
    	</template> -->
    </DatePicker>
  </view>
  <!-- #ifdef MP-WEIXIN -->
  <view class="fixed-date-block"></view>
  <!-- #endif -->
  <view class="h-page page">
    <view class="mall" style="height: 0;overflow: hidden;">
      <MallSelectNvue @change="handleMallChange" :is-home="true" choose-group="1" />
    </view>
    <scroll-view scroll-y="true" nested="true">
      <view class="content">
        <!-- 基础数据 -->
        <BasicData ref="basicRef" class="card-item" :store-cards="storeCards" :unit="params.unit"
          style="margin-bottom: 20rpx;" />
        <!-- 近期客流趋势 -->
        <FlowTrendNvue v-if="activeCharts.recent_passenger_flow_trends" :indicators="indicatorList" :unit="params.unit"
          class="card-item" ref="flowTrendRef" style="margin-bottom: 20rpx;" />
        <!-- 停留时长分布 -->
        <ResidencTime v-if="activeCharts.stay_time_statistics" class="card-item" ref="residencTimeRef"
          style="margin-bottom: 20rpx;" />
        <!-- 流量转换 -->
        <FlowTrans v-if="activeCharts.mall_flow_conversion" class="card-item" ref="flowTransRef"
          style="margin-bottom: 20rpx;" />
        <!-- 客群画像：性别统计 / 年龄统计 -->
        <FaceAnalyzeMall v-if="activeCharts.account_customer_demographics || activeCharts.mall_customer_demographics"
          class="card-item" ref="faceAnalyzeRef" style="margin-bottom: 20rpx;" />
        <!-- 时段客流热力 -->
        <HeatMap v-if="activeCharts.mall_period_passenger_flow_heat" :indicators="indicatorList" class="card-item"
          ref="heatMapRef" style="margin-bottom: 20rpx;" />
        <!-- 分区顾客流向 -->
        <GateFlowDirection v-if="activeCharts.mall_visitors_flow_direction" class="card-item"
          style="margin-bottom: 20rpx;" ref="gateFlowRef" />
        <!-- 区域统计 -->
        <AreaStatisticTable v-if="activeCharts.mall_gate_statistics" class="card-item" style="margin-bottom: 20rpx;"
          ref="areaStatisticRef" />
        <!-- 门店排行 -->
        <StoreRank v-if="activeCharts.mall_ranking" :card-props="{height:'584rpx',title:t('PreMenu.regionalRanking')}" class="card-item"
          ref="storeRankRef" style="margin-bottom: 20rpx;" />
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
  import {
    ref,
    onMounted,
    nextTick,
} from 'vue';

  import {
    onPullDownRefresh
  } from '@dcloudio/uni-app'
  import {
    getStoreInfoApi,
    getStoreHoursDateApi,
    getAccountConfiguredApi,
    getStoreConfiguredApi,
    getStoreIndicatorsApi,
    getAccountIndicatorsApi
  } from '@/api'
  import {
    rpx2Px
  } from '@/utils'
  import {
    timeFormat
  } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

  import MallSelectNvue from '../../components/MallSelect.nvue';
  import DatePicker from '@/components/DatePicker.nvue'
  import StatusBarVue from '../../components/StatusBar.vue';
  import FlowTrendNvue from './components/FlowTrend.nvue';
  import BasicData from './components/BasicData.nvue';
  import CardNvue from './components/Card.nvue';
  import ResidencTime from './components/ResidenceTime.nvue'
  import GateFlowDirection from './components/GateFlowDirection.nvue';
  import FaceAnalyzeMall from './components/FaceAnalyzeMall.nvue';
  import AreaStatisticTable from './components/AreaStatisticTable.vue';
  import HeatMap from './components/HeatMap.nvue';
  import FlowTrans from './components/FlowTrans.nvue';
  import StoreRank from './components/StoreRank.nvue';
  import { t } from '@/plugins/index.js'

  // 所有统计数据的ref
  const basicRef = ref(null)
  const flowTrendRef = ref(null)
  const residencTimeRef = ref(null)
  const flowTransRef = ref(null)
  const faceAnalyzeRef = ref(null)
  const heatMapRef = ref(null)
  const gateFlowRef = ref(null)
  const areaStatisticRef = ref(null)
  const storeRankRef = ref(null)

  // 计算tabcard高度
  const height = ref(0)

  // #ifdef APP
  height.value = plus.navigator.getStatusbarHeight()
  // #endif

  // #ifdef MP-WEIXIN
  height.value = 25
  // #endif


  // 要传递的数据
  const params = ref({
    accountId: '',
    startDate: '',
    endDate: '',
    groupId: '',
    storeId: '',
    unit: ''
  })

  // 日期选择值更改
  const handleDateChange = (val, type) => {
    params.value.unit = val.unit
    const [startDate, endDate] = val.range
    params.value.startDate = startDate
    params.value.endDate = endDate
    if (type !== 'init') {
      renderAllCharts()
    }
  }
  // 集团、门店选取值更改
  const handleMallChange = (val, type) => {
    params.value.accountId = val.accountId
    params.value.groupId = val.groupId
    params.value.storeId = val.storeId
    if (type !== 'init') {
      renderAllCharts()
    }
  }

  // 初始化加载
  onMounted(() => {
    renderAllCharts()
  })

  onPullDownRefresh(() => {
    renderAllCharts()
    uni.stopPullDownRefresh()
  });
  // 数据更改后渲染图表
  const renderAllCharts = async () => {
    try {
      // 获取指标
      await getIndicatorList()

      if (!params.value.storeId) {
        await renderAccountData()
      } else {
        //获取门店指标
        // 获取营业时间、面积
        getStoreHoursAndArea()
        renderStoreData()
      }
    } catch (e) {
      console.log(e)
    }
  }

  // 门店所有的指标选项
  const indicatorList = ref([])
  const getIndicatorList = async () => {
    try {
      const {
        data
      } = params.value.storeId ?
        await getStoreIndicatorsApi(params.value.storeId) :
        await getAccountIndicatorsApi(params.value.accountId)
      indicatorList.value = []
      // 根据sort字段排序
      data.sort((a, b) => {
        return a.sort - b.sort
      })
      data?.forEach(item => {
        if (item.status) {
          indicatorList.value.push(item)
        }
      })
    } catch (e) {
      console.log(e)
    }
  }


  // 获取营业时间与面积
  const storeHours = ref('')
  const area = ref(1)
  const getStoreHoursAndArea = async () => {
    try {
      const res = await getStoreInfoApi(params.value.storeId)
      area.value = res.data.area
      const {
        data
      } = await getStoreHoursDateApi({
        mallId: params.value.storeId,
        date: timeFormat(Date.now(), 'yyyy-mm-dd')
      })
      const start = formatStoreHours(data.startTime)
      const end = formatStoreHours(data.endTime)

      // storeHours.value = start + (end <= start ? '-次日' : '-') + end
      storeHours.value = start + '-' + end

    } catch (e) {
      console.log(e)
    }
  }
  const formatStoreHours = (dateTime) => {
    // 将2021-02-12 00:00:01 转换为00:00
    return dateTime.slice(11, 16)
  }


  // 渲染点击的是集团时要展示的数据
  const activeCharts = ref({
    // 客流趋势
    'recent_passenger_flow_trends': false,
    // 停留时长分布
    'stay_time_statistics': false,
    // 流量转化
    'mall_flow_conversion': false,
    // 门店时段热力
    'mall_period_passenger_flow_heat': false,
    // 客群画像
    'account_customer_demographics': false,
    'mall_customer_demographics': false,

    // 门店排行
    'mall_ranking': false,
    // 分区顾客走向
    'mall_visitors_flow_direction': false,
    // 区域统计
    'mall_gate_statistics': false
  })

  // 渲染门店数据
  const storeCards = ref([]) // 基础卡片数据
  const renderStoreData = async () => {
    try {
      // 重置所有图表的激活状态
      Object.keys(activeCharts.value).forEach(key => {
        activeCharts.value[key] = false;
      });

      const {
        data
      } = await getStoreConfiguredApi({
        belongTo: 'NewMall',
        showIndex: 1,
        mallId: params.value.storeId,
        accountId: params.value.accountId
      })

      if (data) {
        storeCards.value = data?.cards || []
        if (data.charts) {
          renderPageCharts(data)
        }
      }
      // 加载门店卡片数据
      basicRef.value?.initStoreCardData?.(params.value)
    } catch (e) {
      console.log(e)
    }
  }

  const renderAccountData = async () => {
    try {

      // 渲染集团卡片数据
      basicRef.value?.initAccountCardData?.(params.value)

      // 根据条件渲染图表数据
      const {
        data
      } = await getAccountConfiguredApi({
        belongTo: 'NewAccount',
        showIndex: 1,
        accountId: params.value.accountId,
        mallId: params.value.storeId || ''
      })
      if (data && data.charts) {
        renderPageCharts(data)
      }
    } catch (e) {
      console.log(e)
    }
  }


  // 加载页面组件
  const renderPageCharts = async (data) => {

    // 所有ref映射
    const chartKeyToRefMap = {
      // 客流趋势
      'recent_passenger_flow_trends': flowTrendRef,
      // 停留时长分布
      'stay_time_statistics': residencTimeRef,
      // 门店时段热力
      'mall_period_passenger_flow_heat': heatMapRef,
      // 客群画像
      'account_customer_demographics': faceAnalyzeRef,
      'mall_customer_demographics': faceAnalyzeRef,
      // 流量转化
      'mall_flow_conversion': flowTransRef,
      // 门店排行
      'mall_ranking': storeRankRef,
      // 分区顾客走向
      'mall_visitors_flow_direction': gateFlowRef,
      // 区域统计
      'mall_gate_statistics': areaStatisticRef
    }

    // 重置所有图表的激活状态
    Object.keys(activeCharts.value).forEach(key => {
      activeCharts.value[key] = false;
    });

    data.charts.forEach(item => {
      if (activeCharts.value.hasOwnProperty(item.chartKey)) {
        activeCharts.value[item.chartKey] = true;
      }
    })
    console.log(data, activeCharts.value, '---');

    await nextTick()

// 并行创建检测任务
  const initTasks = data.charts.map(async (item) => {
    const refObj = chartKeyToRefMap[item.chartKey];
    if (!refObj) {
      console.warn(`Ref not found for chart key: ${item.chartKey}`);
      return;
    }

    // 动态等待组件挂载
    let hasComponent = false;
    for (let i = 0; i < 40; i++) { // 总等待 2 秒（40*50ms）
      if (refObj.value) {
        hasComponent = true;
        break;
      }
      await new Promise(resolve => setTimeout(resolve, 50));
    }

    if (hasComponent && refObj.value.initData) {
      refObj.value.initData(params.value);
    } else {
      console.warn(`Component ${item.chartKey} failed to load after 2s`);
    }
  });

  await Promise.all(initTasks); // 并行执行所有初始化




    // 逐个初始化图表，确保每个ref都有值
    // for (const item of data.charts) {
    //   try {
    //     const refName = chartKeyToRefMap[item.chartKey];

    //     // 等待ref有值（最多等待1秒）
    //     let attempts = 0;
    //     while (!refName?.value && attempts < 20) {
    //       await new Promise(resolve => setTimeout(resolve, 50));
    //       attempts++;
    //     }

    //     if (refName?.value) {
    //       refName.value.initData?.(params.value);
    //     } else {
    //       console.warn(`Ref ${item.chartKey} not available after waiting`);
    //     }
    //   } catch (e) {
    //     console.error('Chart init error:', e);
    //   }
    // }


    // 微信小程序可能需要额外时间
    // await new Promise(resolve => setTimeout(resolve, 100))
    // data.charts.forEach(item => {
    //   try {
    //     const refName = chartKeyToRefMap[item.chartKey];
    //     refName.value?.initData?.(params.value);
    //   } catch (e) {
    //     console.log(e);
    //   }
    // });



  }
</script>

<style lang="scss" scoped>
  .h-page.page {
    flex: 1;
    position: relative;
    background-color: #F2F3F6;

    .mall {
      flex-direction: row;
      justify-content: space-between;
      // padding: 10rpx 20rpx 0;

      .mall-info {
        padding: 40rpx 0 0 14rpx;

        &_text {
          margin: 20rpx 0;

          &_time {
            width: 450rpx;
          }
        }

        .text {
          color: #fff;
          font-size: 24rpx;
        }

        .text1 {
          padding-right: 28rpx;
        }
      }
    }

    .bg-img {
      position: absolute;
      width: 750rpx;
      height: 776rpx;
      top: 0;
      left: 0;
      right: 0;
    }

    .content {
      z-index: 99;
      margin: 0 20rpx;

      .basic-card {
        border-radius: 20rpx;
        position: relative;

        .b-c-img {
          position: absolute;
          width: 710rpx;
          height: 150rpx;
          top: 0;
          left: 0;
          z-index: 1;
        }
      }

      .b-c-content {
        z-index: 22;

        .d-p {
          padding: 24rpx 20rpx 24rpx;
        }
      }
    }
  }

  .filter {
    background-color: #fff;
    width: 160rpx;
    height: 60rpx;
    border-radius: 12rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 16rpx;
    padding: 0 10rpx;

    &_text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 50rpx;
      color: #202328;
      font-size: 24rpx;
    }
  }

  .fixed-date {
    width: 750rpx;
    padding: 20rpx 20rpx 0;
    height: 100rpx;
    background-color: #f2f3f6;
    /* #ifdef MP-WEIXIN */
    position: fixed;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    position: sticky;
    /* #endif */
    left: 0;
    top: 0;
    z-index: 100;
  }
  .fixed-date-block{
    width: 750rpx;
    height: 100rpx;
  }
</style>