AreaStatisticsComp.vue

<template>
  <view class="h-c-container">
    <CardNvue :auto-height="true" card-padding="20rpx 28rpx 28rpx">
      <template #content>
        <view class="table">
          <IndicatorsFilterTitleVue :title="t('PreMenu.regionalStatistics')" :options="indicatorsList" :options-props="indicatorsOptions"
            @change="handleCurrentKeyChange" />
          <view class="table-head" style="margin-top: 20rpx;">
            <view class="table-head-item">
              <text class="table-head-item-text">{{ t('table.areaName') }}</text>
            </view>
            <view class="table-head-item">
              <text class="table-head-item-text">{{ t('table.value') }}</text>
            </view>
            <l-popover placement="bottom" v-if="hasPreviers">
              <view class="table-head-item" style="display: flex;flex-direction: row;">
                <text class="table-head-item-text">{{ t('DateType.lastWeekDay') }}</text>
                <uv-icon name="info-circle" size="28rpx" style="margin-left: 8rpx;" color="#90949D"></uv-icon>
              </view>
              <template #content>
                <view style="width: 400rpx;">
                  <uv-text
                    :text="`${t('DateType.lastWeekDay')}:${previers.startDate} ${t('maintenance.common.splitDate')} ${previers.endDate}`"
                    color="#387CF5" size="24rpx"></uv-text>
                </view>
              </template>
            </l-popover>
            <view class="table-head-item last-table" v-if="hasPreviers">
              <text class="table-head-item-text">{{ t('echarts.growthRate') }}</text>
            </view>
          </view>
          <view class="table-body" v-if="tableList.length>0">
            <view class="table-body-item" v-for="(item,index) in tableList" :key="index">
              <view class="table-body-item-value table-body-item-name">
                <uv-text class="table-body-item-value-text" align="center" color="#202328" size="26rpx" :lines="1"
                  :text="item.gateName"></uv-text>
              </view>
              <view class="table-body-item-value">
                <text class="table-body-item-value-text">{{formateVal(item?.[currentKey])}}</text>
              </view>
              <view class="table-body-item-value" v-if="hasPreviers">
                <text class="table-body-item-value-text">{{formateVal(previersList[index]?.[currentKey])}}</text>
              </view>
              <view class="table-body-item-value" v-if="hasPreviers">
                <uv-icon
                  :name="calRateAndFlag(item?.[currentKey],previersList[index]?.[currentKey])?.flag === '1'?'arrow-up-fill':'arrow-down-fill'"
                  v-if="calRateAndFlag(item?.[currentKey],previersList[index]?.[currentKey])?.flag !== '2'"
                  :color="['#00B274','#ff3000'][calRateAndFlag(item?.[currentKey],previersList[index]?.[currentKey])?.flag || 2]"
                  size="16rpx" style="margin-top: 4rpx;margin-right: 6rpx;" />
                <text class="table-body-item-value-text"
                  :class="['decrease','increase','normal'][calRateAndFlag(item?.[currentKey],previersList[index]?.[currentKey])?.flag || 1]">
                  {{ calRateAndFlag(item?.[currentKey],previersList[index]?.[currentKey])?.rate }}</text>
              </view>
            </view>
          </view>
          <view class="p-empty" v-else 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>
        </view>
      </template>
    </CardNvue>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted,
    computed
  } from 'vue'
  import {
    formatSeconds,
    calculatePreviousPeriod
  } from '@/utils'
  import {
    getUserIndicatorIndexApi,
    getAreaAnalysisStatisApi
  } from '@/api'
  import {
    t
  } from '@/plugins/index.js'
  import PageOptions from '@/components/PageOptions.vue'
  import CardNvue from '@/pages/flow/components/Card.nvue'
  import CustomNavBar from '@/components/CustomNav.nvue'
  import LPopover from '@/uni_modules/lime-popover/components/l-popover/l-popover.vue'
  import IndicatorsFilterTitleVue from '@/components/IndicatorsFilterTitle.vue'

  // 格式化数值
  const formateVal = (val) => {
    if (currentKey.value?.endsWith('Time')) {
      return formatSeconds(val)
    }
    return val
  }

  // 计算增长率及颜色
  const calRateAndFlag = (fir, last) => {

    //  测试说：需要与pc保持一致，因此都设置为0
    // fir有值 last 无值 +100%
    // fir无值 last 有值 -100%
    // fir无值 last 无值 0%
    if (!fir && !last) {
      return {
        rate: '0%',
        flag: '2'
      }
    } else if (fir && !last) {
      return {
        // rate: '+100%',
        rate: '0%',
        flag: '2'
      }
    } else if (!fir && last) {
      return {
        // rate: '-100%',
        rate: '0%',
        flag: '2'
      }
    }

    const rate = ((fir - last) / last * 100).toFixed(2)

    if (rate > 0) {
      return {
        rate: `+${rate}%`,
        flag: '1'
      }
    } else {
      return {
        rate: `${rate}%`,
        flag: '0'
      }
    }
  }

  /**********  列表展示  *********/
  const initData = (val) => {
    params.value = val

    if (!!currentKey.value) {
      getTableList()
    } else {
      initIndicatorList()
    }
  }

  // 存在上周期数据
  const hasPreviers = computed(() => {
    return ['yearMonth', 'year', 'week', 'date'].includes(params.value.type)
  })
  const tableList = ref([])
  const previersList = ref([])
  const params = ref({})
  const previers = ref({})
  const getTableList = async () => {
    try {
      const {
        data
      } = await getAreaAnalysisStatisApi({
        mallId: params.value.storeId,
        startDate: params.value.startDate,
        endDate: params.value.endDate
      })
      tableList.value = data || []

      // 如果有上周期数据，则获取上周期数据
      if (hasPreviers.value) {
        previers.value = calculatePreviousPeriod(params.value)
        const {
          startDate,
          endDate
        } = previers.value
        const {
          data: previersData
        } = await getAreaAnalysisStatisApi({
          mallId: params.value.storeId,
          startDate,
          endDate
        })
        previersList.value = previersData || []
      }

    } catch (e) {
      console.log(e);
    }
  }
  /**********  指标相关  *********/
  const indicatorsOptions = {
    label: 'indexName',
    value: 'indexKey'
  }
  // onMounted(() => {

  //   flag.value = true
  // })
  const handleCurrentKeyChange = (e) => {
    currentKey.value = e
  }
  const currentKey = ref('')
  const indicatorsList = ref([])
  const initIndicatorList = async () => {
    try {
      const {
        data
      } = await getUserIndicatorIndexApi({
        id: params.value.storeId
      })
      indicatorsList.value = data?.filter(item => item.status === 1) || []
      currentKey.value = data.length > 0 ? data[0].indexKey : ''
      params.value.currentKey = currentKey.value

      getTableList()
    } catch (e) {
      console.log(e);
    }
  }
  defineExpose({
    initData
  })
</script>

<style lang="scss" scoped>
  @import '@/styles/table.scss';

  .table-body-item-value-text.increase {
    color: #FF3000;
  }

  .table-body-item-value-text.decrease {
    color: #00B274;
  }
</style>