xys-FTA-Ui/src/views/fta/enterprisestatistics/index.vue

<!--企业信息饼状图分析-->
<template>
  <el-row class="mt-8px" :gutter="8" justify="space-between">
  <el-col :span="24" class="mb-8px">
    <el-card shadow="never" class="mt-8px">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="20" justify="space-between">
          <!-- 第一个饼图-->
          <el-col :span="12">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="enterpriseData" :height="280" />
              </el-skeleton>
            </el-card>
          </el-col>
          <!-- 第二个饼图-->
          <el-col :span="12">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="auditStatusData" :height="280" />
              </el-skeleton>
            </el-card>
          </el-col>
          <!-- 月度企业统计 -->
          <el-col :span="12">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="monthlData" :height="280" />
              </el-skeleton>
            </el-card>
          </el-col>
          <!-- 季度企业统计 -->
          <el-col :span="12">
            <el-card shadow="hover" class="mb-8px">
              <el-skeleton :loading="loading" animated>
                <Echart :options="quarterData" :height="280" />
              </el-skeleton>
            </el-card>
          </el-col>
        </el-row>
      </el-skeleton>
     <!--      年度度企业统计（自己一行）-->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover" class="mb-8px">
            <el-skeleton :loading="loading" animated>
              <Echart :options="yearData" :height="280" />
            </el-skeleton>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </el-col>
  </el-row>

</template>

<script lang="ts" setup>
import {EChartsOption} from "echarts";
import {EnterpriseData, lmonthlData, lquarterData, lyearData, lauditStatusData} from './echarts-data'
import { set } from 'lodash-es'
import {pieOptions} from "@/views/Home/echarts-data";
import {EnterprisestatisticsApi} from "@/api/fta/enterprisestatistics";
const { t } = useI18n()
const loading = ref(true)

defineOptions({ name: 'enterprisestatistics' })



//月度monthl
const monthlData = reactive<EChartsOption>(lmonthlData) as EChartsOption
// 季度quarter
const quarterData = reactive<EChartsOption>(lquarterData) as EChartsOption
// 年度year
const yearData = reactive<EChartsOption>(lyearData) as EChartsOption
//企业类型统计(大型企业great enterprise、中型企业centre enterprise、小型企业small enterprise)
const enterpriseData = reactive<EChartsOption>(EnterpriseData) as EChartsOption
//审核状态统计()
const auditStatusData = reactive<EChartsOption>(lauditStatusData) as EChartsOption

//月度
const getMonthlData = async () => {
  try {
    const data = await EnterprisestatisticsApi.getMonthl();
    // 确保数据格式与之前的假数据一致
    if (!Array.isArray(data)) {
      throw new Error('Invalid data format received from API');
    }

    set(
      monthlData,
      'xAxis.data',
      data.map((v) => t(v.name))
    );
    set(monthlData, 'series', [
      {
        name: t('analysis.value'),
        smooth: true,
        type: 'line',
        data: data.map((v) => v.value),
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
    ]);
  } catch (error) {
    console.error('Failed to fetch monthly data:', error);
  }
};


//季度
const getQuarterData = async () => {
  try {
    const data = await EnterprisestatisticsApi.getQuarter();
    // 确保数据格式与之前的假数据一致
    if (!Array.isArray(data)) {
      throw new Error('Invalid data format received from API');
    }
    set(
      quarterData,
      'xAxis.data',
      data.map((v) => t(v.name))
    )
    set(quarterData, 'series', [
      {
        name: t('analysis.value'),
        smooth: true,
        type: 'line',
        data: data.map((v) => v.value),
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
    ]);
  } catch (error) {
    console.error('Failed to fetch monthly data:', error);
  }
};

// 年度
const getYearData = async () => {
  try {
    const data = await EnterprisestatisticsApi.getYear();
    console.log('-------------2------',data);
    // 确保数据格式与之前的假数据一致
    if (!Array.isArray(data)) {
      throw new Error('Invalid data format received from API');
    }
    set(
      yearData,
      'xAxis.data',
      data.map((v) => t(v.name))
    )
    set(yearData, 'series', [
      {
        name: t('analysis.value'),
        smooth: true,
        type: 'line',
        data: data.map((v) => v.value),
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
    ]);
  } catch (error) {
    console.error('Failed to fetch monthly data:', error);
  }
};

//企业类型统计
const getEnterprise = async () => {
  const data = await EnterprisestatisticsApi.getEnterpriseData();
  if (!Array.isArray(data)) {
    throw new Error('Invalid data format received from API');
  }
  set(
    enterpriseData,
    'legend.data',
    data.map((v) => t(v.name))
  )
  enterpriseData!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}

//审核状态统计
const getAuditStatus= async () => {

  const data = await EnterprisestatisticsApi.getAuditStatusData();
  set(
    auditStatusData,
    'legend.data',
    data.map((v) => t(v.name))
  )
  auditStatusData!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}

const getAllApi = async () => {
  await Promise.all([
    getMonthlData(),
    getQuarterData(),
    getYearData(),
    getEnterprise(),
    getAuditStatus()
  ])

  loading.value = false
}

getAllApi()
</script>