FlowTrend.nvue

<template>
  <view>
    <CardNvue :title="t('PreMallChart.recent_passenger_flow_trends.bar')">
      <template #filter>
        <view class="filter filter-border transparent-bg" @tap="handleTapToChoose">
          <text class="filter_text">{{ selectText || t('maintenance.common.select') }}</text>
          <uv-icon name="arrow-right" color="#90949D" size="24rpx" />
        </view>
      </template>
      <template #content>
        <!-- 防止加载闪屏 -->
        <!-- #ifdef MP-WEIXIN -->
        <ChartsNvue ref="chartsRef" />
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <ChartsNvue v-if="renderFlag === '1'" ref="chartsRef" />
        <!-- #endif -->
        <view class="p-empty" v-if="renderFlag === '0'" style="margin-top: 40rpx;">
          <image class="p-empty-img" src="/static/common/empty.png" mode=""></image>
          <text class="p-empty-text chart-text">{{ t('maintenance.monitor.project.empty.text') }}</text>
        </view>
      </template>
    </CardNvue>
    <uv-popup ref="typePopRef" round="24rpx" @maskClick="handleMaskClick">
      <view class="pop_header">
        <view style="width: 22px;visibility: hidden;"></view>
        <!-- <view style="width: 22px;"></view> -->
        <text class="pop_header_text">{{ t('app.title.kpiSelect') }}</text>
        <uv-icon name="close" size="22" class="pop_header_icon" @tap="handleCloseTypeSelect"></uv-icon>
      </view>
      <scroll-view scroll-y="true" style="height: 240px;">
        <view class="l_type">
          <view class="l_type_item" v-for="(item,index) in getIndicator" :key="item.indexKey"
            :class="{'l_type_item_active':index === checkIndex}" @tap="handleChangeCheckType(index)">
            <text class="l_type_item_text"
              :class="{'l_type_item_active_text':index === checkIndex}">{{ item.indexName }}</text>
          </view>
        </view>
      </scroll-view>
    </uv-popup>
  </view>
</template>

<script setup>
  import {
    getFlowTrendApi
  } from '@/api'
  import CardNvue from './Card.nvue'
  import ChartsNvue from '@/components/Charts.nvue'
  import {
    onMounted,
    computed,
    ref,
    nextTick
  } from 'vue'
  import {
    getStageObj,
    percentKeys,
    timeKeys
  } from '@/utils';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    t,
    initI18n
  } from '@/plugins/index.js'

  // #ifdef APP || H5
  import * as echarts from 'echarts';
  // #endif
  // #ifdef MP-WEIXIN
  const echarts = require('../../../uni_modules/lime-echart/static/echarts.min');
  // #endif
  const renderFlag = ref('')

  const props = defineProps({
    indicators: {
      type: Array,
      default: () => []
    },
    unit: {
      type: String,
      default: 'day'
    }
  })
  onLoad(() => {
    initI18n()
  })

  /**************************** pop选择相关 *********************************/
  const typePopRef = ref(null)
  const checkIndex = ref('')
  const selectIndex = ref(0)
  const selectText = computed(() => {
    return getIndicator.value?.[selectIndex.value]?.indexName
  })
  const handleMaskClick = () => {
    uni.showTabBar()
  }
  const handleTapToChoose = () => {
    uni.hideTabBar()
    checkIndex.value = selectIndex.value || 0
    typePopRef.value?.open('bottom')
  }
  const handleCloseTypeSelect = () => {
    uni.showTabBar()
    typePopRef.value?.close()
  }
  const handleChangeCheckType = (index) => {
    checkIndex.value = index
    handleConfirmSelectType()
  }
  const handleConfirmSelectType = () => {
    uni.showTabBar()
    selectIndex.value = checkIndex.value
    typePopRef.value?.close()
    getTrendChartData()
  }

  // 可以展示的指标值 与pc保持一致
  const allStoreIndexData = [{
      value: 'PassByCount',
      showType: ['month', 'week', 'day', 'hour', 'minute'],
    },
    {
      value: 'EnterCount',
      showType: ['month', 'week', 'day', 'hour', 'minute'],
    },
    {
      value: 'CustomerNum',
      showType: ['month', 'week', 'day', 'hour'],
    },
    {
      value: 'StaffCount',
      showType: ['month', 'week', 'day', 'hour'],
    },
    {
      value: 'EnterRate',
      showType: ['month', 'week', 'day', 'hour'],
    },
    {
      value: 'ResidenceTime',
      showType: ['day'],
    },
    {
      value: 'DeepShopping',
      showType: ['month', 'week', 'day'],
    },
    {
      value: 'DeepShoppingRate',
      showType: ['month', 'week', 'day'],
    }
  ]
  const allAccountIndexData = [{
      value: 'PassByCount',
      showType: ['month', 'week', 'day', 'hour', 'minute'],
    },
    {
      value: 'EnterCount',
      showType: ['month', 'week', 'day', 'hour', 'minute'],
    },
    {
      value: 'CustomerNum',
      showType: ['month', 'week', 'day', 'hour'],
    },
    {
      value: 'EnterRate',
      showType: ['month', 'week', 'day', 'hour'],
    },
    {
      value: 'DeepShopping',
      showType: ['month', 'week', 'day'],
    },
    {
      value: 'DeepShoppingRate',
      showType: ['month', 'week', 'day'],
    },
  ]


  // 查找能用的getIndicator
  const getIndicator = computed(() => {

    const allIndexData = options.value.storeId ? allStoreIndexData : allAccountIndexData
    // console.log(props.indicators, props.unit, 'props.unit');
    return props.indicators?.filter(item => {
      const flag = !!allIndexData.find(el => el.value === item.indexKey && el.showType.includes(props
        .unit))
      return flag
    }) || []
  })

  const chartsRef = ref(null)

  // 加载数据
  const options = ref({})
  const initData = async (params) => {
    options.value = params
    await nextTick(() => {
      getTrendChartData()
    })
  }
  // 下标key
  const indexKey = computed(() => {
    return getIndicator.value?.[selectIndex.value]?.indexKey || ''
  })

  // 格式化y轴label
  function formatLabel(val) {
    if (timeKeys.includes(indexKey.value)) {
      return formatSecondsNum(val)
    }
    if (percentKeys.includes(indexKey.value)) {
      return val + '%'
    }
    return (val >= 1000 && val < 1000000) ? (val / 1000 + "K") : (val >= 1000000) ? (val /
      1000000 + "M") : val

  }

  function formatSecondsNum(val) {
    if (isNaN(val) || val == '--') return val;
    return parseFloat(val / 60).toFixed(1) + 'm';
  }

  const getTrendChartData = async () => {
    try {
      const account = await getStageObj('account')
      const commonParams = {
        startDate: options.value.startDate,
        endDate: options.value.endDate,
        type: 'line',
        // 当前客流趋势暂不支持month
        option: props.unit === 'month' ? 'day' : props.unit,
        indexes: getIndicator.value?.[selectIndex.value]?.indexKey || '',
      }

      const params = options.value.storeId ? {
        orgId: options.value.storeId
      } : {
        accountId: account.id,
        groupId: options.value.groupId ? options.value.groupId : -1,
      };

      const {
        data
      } = await getFlowTrendApi({
        ...commonParams,
        ...params
      })
      const {
        BasePassengerFlowReport
      } = data.body
      renderCharts(BasePassengerFlowReport)
    } catch (e) {
      console.log(e);
    }
  }

  // 渲染图表
  const renderCharts = (val = {
    series: [{
      data: [],
      name: ''
    }],
    title: '',
    xaxis: {
      data: []
    }
  }) => {
    if (val.xaxis.data.length > 0) {
      renderFlag.value = '1'
    } else {
      renderFlag.value = '0'
      return false
    }
    const option = {
      grid: {
        bottom: '0%',
        left: 0,
        right: '2%',
        top: '10%',
        containLabel: true
      },
      tooltip: {
        extraCssText: 'white-space:pre-wrap;',
        useHTML: true,
        trigger: 'axis',
        confine: true,
        triggerOn: 'click',
        // #ifdef APP-NVUE
        formatter: `function(params){
          const item = params[0]
          let paramsValue = item.data

          function formatSeconds(seconds) {
            if (isNaN(seconds)) return seconds;
            return numFormat(parseInt(seconds / 3600)) + ':' + numFormat(parseInt(seconds % 3600 / 60)) + ':' + numFormat(
              parseInt(seconds % 60));
          }
          function numFormat(val) {
            return val >= 10 ? val : ("0" + val)
          }
            // 时间
           if (${timeKeys.includes(indexKey.value)}) {
             if (isNaN(paramsValue) || paramsValue == '--'){
               paramsValue = '--'
             }else{
               paramsValue = formatSeconds(paramsValue)
             }
           }
           // 率
           if (${percentKeys.includes(indexKey.value)}) {
             paramsValue =  paramsValue + '%'
           }
           return '<div style="font-size:13px">' +
                    '<div style="color:#202328; margin-bottom:5px">' +
                      item.axisValueLabel +
                    '</div>' +
                    '<div>' +
                      '<span style="display:inline-block;width:8px;height:8px;background:#387CF5;border-radius:50%;"></span>' +
                      '<span style="color:#656A72;padding-left:10px">' + item.seriesName + '</span>' +
                      '<span style="padding-left:10px;color:#202328;font-weight:bold">' + paramsValue + '</span>' +
                    '</div>' +
                  '</div>'
        }`
        // #endif
      },

      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: val.xaxis.data,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#E1E4EA'
          }
        },
        axisLabel: {
          color: '#202328'
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: "#E8E8E8",
            type: "dotted" // dotted 虚线
          }
        },
        axisLabel: {
          color: '#202328',
          // nvue端
          // #ifdef APP-NVUE
          formatter: `function(value) {
            if (${timeKeys.includes(indexKey.value)}) {
              if (isNaN(value) || value == '--') return value;
              return parseFloat(value / 60).toFixed(1) + 'm';
            }
            if (${percentKeys.includes(indexKey.value)}) {
              return value + '%'
            }
            return (value >= 1000 && value < 1000000) ? (value / 1000 + "K") : (value >= 1000000) ? (value /
                1000000 + "M") : value
          }`,
          // #endif
          // 非nvue端
          // #ifndef APP-NVUE
          formatter: function(value, index) {
            return formatLabel(value);
          }
          // #endif
        }
      },
      series: [{
        name: val.series?.[0]?.name || '',
        data: val.series?.[0]?.data || [],
        type: 'line',
        smooth: 'true',
        showSymbol: false,
        lineStyle: {
          color: '#387CF5'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(91,143,249,0.3)'
            },
            {
              offset: 1,
              color: 'rgba(91,143,249,0)'
            }
          ])
        }
      }]
    }
    nextTick(() => {
      chartsRef.value?.initCharts(option)
    })
  }

  defineExpose({
    initData
  })
</script>

<style lang="scss">
  @import '@/styles/normal.scss'
</style>