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

<template>
  <div class="businessOpportunityStage box mt-4">
    <div class="box-title">
      <div class="box-title-left text-size-in">{{ businessLabel }}阶段</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(echartsHeight) : '0'}`">
      <ReRcharts :option="echartsOption" />
    </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 { STAGE_OF_OBTAINING_BUSINESS_OPPORTUNITIES } from '@hooks/useApi.js';
import { fixedFieldPermissionOptions, fixedFieldDateOptions } from '@utility/defaultData.js';
import requests from "@common/requests"
import usePxToVwView from "@hooks/usePxTransform.js";
import ReRcharts from '@components/dataView/reRcharts.vue';
import FilterItem from './filterItem.vue';

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

const scopeText = computed(() => {
  return fixedFieldPermissionOptions[filterCriteria.value.scopeSelection].label
})
const isExistBusiness = sessionStorage.getItem("isExistBusiness");
const businessLabel = isExistBusiness === "1" ? "商机" : "项目"; 
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;
  getEchartsData()
}

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

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

function processChartData(yAxisData = [], seriesData = []) {
  const dataLength = yAxisData.length
  if(dataLength > 3) {
    echartsHeight.value = dataLength * 38
  }
  echartsOption.value = {
    tooltip: {
      // trigger: 'axis',
      // axisPointer: {
      //   type: 'shadow'
      // }
      trigger: 'item',
      formatter: function (params) {
          return `
              <div class="tooltip-content">
                  <div>${params.name}</div>
                  <div>${params.data} 个</div>
              </div>
          `;
      }
    },
    legend: {
      show: false
    },
    grid: {
      top: usePxToVwView(60),
      left: usePxToVwView(250),
      right: usePxToVwView(60),
      bottom: usePxToVwView(100),
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        fontSize: usePxToVwView(12),
      }
    },
    yAxis: {
      type: 'category',
      data: yAxisData,
      axisLabel: {
        fontSize: usePxToVwView(14),
      }
    },
    series: [
      {
        name: '2011',
        type: 'bar',
        data: seriesData,
        barWidth: usePxToVwView(80),
      },
    ]
  }
}

function getEchartsData() {
  const { scopeSelection = 0, dateSelection = 0, customTime = [] } = filterCriteria.value
  const formVal = {
    queryType: scopeSelection,
    ...(dateSelection !== -1 ? { dateType: dateSelection } : { startDate: customTime[0], endDate: customTime[1] })
  }
  requests.post(STAGE_OF_OBTAINING_BUSINESS_OPPORTUNITIES, {
    ...formVal
  }).then((res) => {
    const yAxisData = (res.data?.dataMap || []).map(item => item.stageName);
    const seriesData = (res.data?.dataMap || []).map(item => item.num);
    processChartData(yAxisData, seriesData)
  })
}

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

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