manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/home/component/dataSummary.vue

<template>
  <div class="dataSummary box mt-4">
    <div class="box-title">
      <div class="box-title-left text-size-in">数据汇总</div>
      <div class="box-title-right text-size-small" @click="showPopUpLayer()">
        {{ scopeText }}/{{ dateText }}
        <van-icon name="play" class="ml-2 rotate-90" color="#747474" />
      </div>
    </div>

    <div class="content w-full overflow-hidden transitionEffect"
      :style="`height: ${expandAndCollapse ? usePxToVwView(313) : '0'}`">
      <div class="data-item flex flex-row bg-[#F8F8FA]">
        <img src="/src/assets/image/kehuhz.png" class="kehu-img">
        <div class="flex-1">
          <div class="font-bold text-[#000]">客户汇总</div>
          <div class="flex mt-2">
            <div class="text-size-small text-[#999]" style="width: 40%">
              新增客户 <span class="ml-1 text-[#FFBD27]">
                {{ dataSummary?.customDataSummary?.newNum || 0 }}
              </span> 人
            </div>
            <div class="text-size-small text-[#999]" style="width: 60%">
              转成交客户 <span class="ml-1 text-[#FFBD27]">
                {{ dataSummary?.closeDealNum?.newNum || 0 }}
              </span> 人
            </div>
          </div>
        </div>
      </div>

      <div class="data-item flex flex-row bg-[#F8F8FA]">
        <img src="/src/assets/image/shangjihz.png" class="businessOpportunity-img">
        <div class="flex-1">
          <div class="font-bold text-[#000]">商机汇总</div>
          <div class="flex mt-2">
            <div class="text-size-small text-[#999]" style="width: 40%;">
              新增商机 <span class="ml-1 text-[#51C2FF]">
                {{ dataSummary?.businessOpportunityDataSummary?.newNum || 0 }}
              </span> 个
            </div>
            <div class="text-size-small text-[#999]" style="width: 60%;">
              商机赢单 <span class="ml-1 text-[#51C2FF]">
                {{ dataSummary?.businessOpportunityDataSummary?.losting || 0 }}
              </span> 个
            </div>
          </div>
          <div class="flex mt-2">
            <div class="text-size-small text-[#999]" style="width: 40%;">
              输单商机 <span class="ml-1 text-[#51C2FF]">
                {{ dataSummary?.businessOpportunityDataSummary?.winning || 0 }}
              </span> 个
            </div>
            <div class="text-size-small text-[#999]" style="width: 60%;">
              商机总金额 <span class="ml-1 text-[#51C2FF]">
                {{ dataSummary?.businessOpportunityDataSummary?.allAmountOfMoney || 0 }}
              </span> 元
            </div>
          </div>
        </div>
      </div>

      <div class="data-item flex flex-row bg-[#F8F8FA]">
        <img src="/src/assets/image/xiansuohz.png" class="xiansuo-img">
        <div class="flex-1">
          <div class="font-bold text-[#000]">线索汇总</div>
          <div class="flex mt-2">
            <div class="w-1/2 text-size-small text-[#999]">
              新增线索 <span class="ml-1 text-[#28C67E]">
                {{ dataSummary?.clueDataSummary?.newNum || 0 }}
              </span> 个
            </div>
            <div class="w-1/2 text-size-small text-[#999]">
              线索转商机 <span class="ml-1 text-[#28C67E]">
                {{ dataSummary?.clueDataSummary?.changeNum || 0 }}
              </span> 个
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="w-full flex justify-center mt-2" @click="expandAndCollapseSwitch()">
      <van-icon name="arrow-up" color="#AFAFAF"
        :class="`${!expandAndCollapse && 'rotate-180'} transitionEffect`" />
    </div>

    <van-popup v-model:show="filterCriteriaPopUpLayerFlag" position="bottom" :style="{ height: '100%' }" closeable>
      <FilterItem :dataFilters="filterCriteria" @submit="FilterItemSubmit" />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useLifecycle } from '@hooks/useCommon.js';
import { OBTAIN_DATA_SUMMARY } from '@hooks/useApi.js';
import { fixedFieldPermissionOptions, fixedFieldDateOptions } from '@utility/defaultData.js';
import requests from "@common/requests"
import usePxToVwView from "@hooks/usePxTransform.js";
import FilterItem from './filterItem.vue';

const filterCriteriaPopUpLayerFlag = ref(false);
const expandAndCollapse = ref(true);
const dataSummary = ref({});
const filterCriteria = ref({
  scopeSelection: 0,
  dateSelection: 0,
  customTime: []
})

const scopeText = computed(() => {
  return fixedFieldPermissionOptions[filterCriteria.value.scopeSelection].label
})

const dateText = computed(() => {
  if(filterCriteria.value.dateSelection == -1) {
    const { customTime = [] } = filterCriteria.value
    return ` ${customTime[0]} 至 ${customTime[1]}`
  }
  
  return fixedFieldDateOptions[filterCriteria.value.dateSelection].label
})

function FilterItemSubmit(val) {
  filterCriteria.value = val

  filterCriteriaPopUpLayerFlag.value = false;
  obtainDataSummary()
}

function showPopUpLayer() {
  filterCriteriaPopUpLayerFlag.value = true;
}

function expandAndCollapseSwitch() {
  expandAndCollapse.value = !expandAndCollapse.value;
}

function obtainDataSummary() {
  const { scopeSelection = 0, dateSelection = 0, customTime = [] } = filterCriteria.value
  const formVal = {
    queryType: scopeSelection,
    ...(dateSelection !== -1 ? { dateType: dateSelection } : { startDate: customTime[0], endDate: customTime[1] })
  }
  requests.post(OBTAIN_DATA_SUMMARY, {
    ...formVal
  }).then((res) => {
    dataSummary.value = res.data
  })
}

useLifecycle({
  load: () => {
    obtainDataSummary()
  },
  init: () => {
    obtainDataSummary()
  }
});
</script>

<style lang='scss' scoped>
/* 样式代码 */
</style>