From e52b52c0e9c59147ef28f2cd5a44ef792804e91b Mon Sep 17 00:00:00 2001
From: xue <571013506@qq.com>
Date: Fri, 21 Jun 2024 17:44:05 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=9B=BE=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fta/enterprisestatistics/echarts-data.ts  | 247 ++++++++++++++++++
 src/views/fta/enterprisestatistics/index.vue  | 222 +++++++++++++++-
 2 files changed, 462 insertions(+), 7 deletions(-)
 create mode 100644 src/views/fta/enterprisestatistics/echarts-data.ts

diff --git a/src/views/fta/enterprisestatistics/echarts-data.ts b/src/views/fta/enterprisestatistics/echarts-data.ts
new file mode 100644
index 0000000..47653b8
--- /dev/null
+++ b/src/views/fta/enterprisestatistics/echarts-data.ts
@@ -0,0 +1,247 @@
+import { EChartsOption } from 'echarts'
+
+const { t } = useI18n()
+
+//月度
+export const lmonthlData: EChartsOption = {
+  title: {
+    text: t('analysis.monthlStatistics'),
+    left: 'center'
+  },
+  xAxis: {
+    data: [
+      t('analysis.january'),
+      t('analysis.february'),
+      t('analysis.march'),
+      t('analysis.april'),
+      t('analysis.may'),
+      t('analysis.june'),
+      t('analysis.july'),
+      t('analysis.august'),
+      t('analysis.september'),
+      t('analysis.october'),
+      t('analysis.november'),
+      t('analysis.december')
+    ],
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    }
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    data: [t('analysis.value')],
+    top: 50
+  },
+  series: [
+    {
+      name: t('analysis.value'),
+      smooth: true,
+      type: 'line',
+      data: [],
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    },
+  ]
+}
+
+//季度
+export const lquarterData: EChartsOption = {
+  title: {
+    text: t('analysis.quarterStatistics'), // 修改标题为月度注册人数
+    left: 'center'
+  },
+  xAxis: {
+    data: [
+      t('analysis.quarterOne'),
+      t('analysis.quarterTwo'),
+      t('analysis.quarterThree'),
+      t('analysis.quarterFour')
+    ], // 后端接口获取的月份数据将填充在这里
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    }
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    data: [t('analysis.value')],
+    top: 50
+  },
+  series: [
+    {
+      name: t('analysis.value'),
+      smooth: true,
+      type: 'line',
+      data: [], // 后端接口获取的预估注册人数数据将填充在这里
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    },
+  ]
+}
+
+// 年度
+export const lyearData : EChartsOption = {
+  title: {
+    text: t('analysis.yearStatistics'), // 修改标题为月度注册人数
+    left: 'center'
+  },
+  xAxis: {
+    data: [
+      t('analysis.year20'),
+      t('analysis.year21'),
+      t('analysis.year22'),
+      t('analysis.year23'),
+      t('analysis.year24'),
+      t('analysis.year25'),
+      t('analysis.year26'),
+      t('analysis.year27'),
+      t('analysis.year28'),
+      t('analysis.year29'),
+      t('analysis.year30'),
+    ],
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    }
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 80,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    data: [t('analysis.value')],
+    top: 50
+  },
+  series: [
+    {
+      name: t('analysis.value'),
+      smooth: true,
+      type: 'line',
+      data: [], // 后端接口获取的预估注册人数数据将填充在这里
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    }
+  ]
+}
+
+//
+export const EnterpriseData: EChartsOption = {
+  title: {
+    text: t('analysis.enterpriseData'),
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    data: [
+      t('analysis.greatEnterprise'),
+      t('analysis.centreEnterprise'),
+      t('analysis.smallEnterprise')
+    ]
+  },
+  series: [
+    {
+      name: t('analysis.value'),
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '60%'],
+      data: []
+    }
+  ]
+}
+
+//审核状态统计
+export const lauditStatusData: EChartsOption = {
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '5%',
+    left: 'center',
+    data:[
+      t('analysis.running'),
+      t('analysis.approve'),
+      t('analysis.reject'),
+      t('analysis.cancel')
+    ]
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 40,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: []
+    }
+  ]
+}
diff --git a/src/views/fta/enterprisestatistics/index.vue b/src/views/fta/enterprisestatistics/index.vue
index 8a3593d..1976335 100644
--- a/src/views/fta/enterprisestatistics/index.vue
+++ b/src/views/fta/enterprisestatistics/index.vue
@@ -1,11 +1,219 @@
-<script setup lang="ts">
-
-</script>
-
+<!--企业信息饼状图分析-->
 <template>
-    企业信息饼状图分析
+  <el-row class="mt-8px" :gutter="8" justify="space-between">
+  <el-col :xl="16" :lg="32" :md="32" :sm="24" :xs="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 :xl="12" :lg="12" :md="12" :sm="12" :xs="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 :xl="12" :lg="12" :md="12" :sm="12" :xs="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 :xl="12" :lg="12" :md="12" :sm="12" :xs="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 :xl="12" :lg="12" :md="12" :sm="12" :xs="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 :xl="24" :lg="24" :md="24" :sm="24" :xs="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>
 
-<style scoped lang="scss">
+<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>
 
-</style>