feat(平台管理): 工作台报表页面开发，完成了对接后端接口的数据

成功对接了工作台中报表的数据接口。

admin.ui.plus-master/src/views/admin/workbench/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home-container layout-pd">
+  <div class="home-container layout-pd" v-if="state.v_if" v-loading="state.loading">
     <el-row :gutter="15" class="home-card-one mb15">
       <el-col
         :xs="24"
@@ -66,11 +66,11 @@
 </template>
 
 <script setup lang="ts" name="example/home">
-import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue'
+import {markRaw, nextTick, onActivated, onMounted, reactive, ref, watch} from 'vue'
 import * as echarts from 'echarts'
-import { storeToRefs } from 'pinia'
-import { useThemeConfig } from '/@/stores/themeConfig'
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'
+import {storeToRefs} from 'pinia'
+import {useThemeConfig} from '/@/stores/themeConfig'
+import {useTagsViewRoutes} from '/@/stores/tagsViewRoutes'
 import {WorkBench} from "/@/api/admin/workbench/workBench";
 
 // 定义变量内容
@@ -83,6 +83,8 @@ const { themeConfig } = storeToRefs(storesThemeConfig)
 const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes)
 
 const state = reactive({
+  loading:false,
+  v_if:false,
   global: {
     homeChartOne: null,
     homeChartTwo: null,
@@ -192,7 +194,7 @@ const state = reactive({
 })
 
 /**折线图数据*/
-const lineChart = reactive({
+const lineChart = ref({
   option : {
     backgroundColor: state.charts.bgColor,
     title: {
@@ -221,14 +223,14 @@ const lineChart = reactive({
         symbol: 'circle',
         smooth: true,
         data: [],
-        lineStyle: { color: '#fe9a8b' },
-        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#fe9a8bb3' },
-            { offset: 1, color: '#fe9a8b03' },
-          ]),
-        },
+        lineStyle: { color: '#3498db' },
+        itemStyle: { color: '#3498db', borderColor: '#3498db' },
+        // areaStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     { offset: 0, color: '#3498db' },
+        //     { offset: 1, color: '#3498db' },
+        //   ]),
+        // },
       },
       {
         name: '团标主板',
@@ -237,34 +239,14 @@ const lineChart = reactive({
         symbol: 'circle',
         smooth: true,
         data: [],
-        lineStyle: { color: '#9E87FF' },
-        itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#9E87FFb3' },
-            { offset: 1, color: '#9E87FF03' },
-          ]),
-        },
-        emphasis: {
-          itemStyle: {
-            color: {
-              type: 'radial',
-              x: 0.5,
-              y: 0.5,
-              r: 0.5,
-              colorStops: [
-                { offset: 0, color: '#9E87FF' },
-                { offset: 0.4, color: '#9E87FF' },
-                { offset: 0.5, color: '#fff' },
-                { offset: 0.7, color: '#fff' },
-                { offset: 0.8, color: '#fff' },
-                { offset: 1, color: '#fff' },
-              ],
-            },
-            borderColor: '#9E87FF',
-            borderWidth: 2,
-          },
-        },
+        lineStyle: { color: '#2ecc71' },
+        itemStyle: { color: '#2ecc71', borderColor: '#2ecc71' },
+        // areaStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     { offset: 0, color: '#51cc88' },
+        //     { offset: 1, color: '#51cc88' },
+        //   ]),
+        // },
       },
       {
         name: '团标备案主板',
@@ -273,14 +255,14 @@ const lineChart = reactive({
         symbol: 'circle',
         smooth: true,
         data: [],
-        lineStyle: { color: '#fe9a8b' },
-        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#fe9a8bb3' },
-            { offset: 1, color: '#fe9a8b03' },
-          ]),
-        },
+        lineStyle: { color: '#e74c3c' },
+        itemStyle: { color: '#e74c3c', borderColor: '#e74c3c' },
+        // areaStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     { offset: 0, color: '#e3584a' },
+        //     { offset: 1, color: '#e3584a' },
+        //   ]),
+        // },
       },
       {
         name: 'ECVR-FM备案',
@@ -289,14 +271,14 @@ const lineChart = reactive({
         symbol: 'circle',
         smooth: true,
         data: [],
-        lineStyle: { color: '#fe9a8b' },
-        itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
-        areaStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#fe9a8bb3' },
-            { offset: 1, color: '#fe9a8b03' },
-          ]),
-        },
+        lineStyle: { color: '#f39c12' },
+        itemStyle: { color: '#f39c12', borderColor: '#f39c12' },
+        // areaStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     { offset: 0, color: '#eea93c' },
+        //     { offset: 1, color: '#eea93c' },
+        //   ]),
+        // },
       },
     ],
   }
@@ -304,15 +286,15 @@ const lineChart = reactive({
 
 /**饼图数据*/
 const pieChart = reactive({
-  getName : ['TQC主板', 'HSC', 'ECVR-FM'],
-  getValue : [34.2, 38.87, 17.88]
+  getName : [],
+  getValue : []
 })
 
 //折线图
 const initLineChart = () => {
   if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose()
   state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme))
-  state.global.homeChartOne.setOption(lineChart.option)
+  state.global.homeChartOne.setOption(lineChart.value.option)
   state.myCharts.push(state.global.homeChartOne)
 }
 // 饼图
@@ -546,28 +528,29 @@ const initEchartsResize = () => {
 }
 
 const initData = async () => {
+  state.loading = true
   const { data } = await new WorkBench().getInitData()
+  const { mainboardChart } = data.chart
   state.homeOne[0].num1 = data.calculatorMainboardCount
   state.homeOne[1].num1 = data.vaporRecoveryCount
   state.homeOne[2].num1 = data.vaporRecoveryStateCount
   state.homeOne[3].num1 = data.calculatorMainboardStateCount
-  // console.log(data?.chart)
-  // const a = getSeriesData(data.chart?.vaporRecovery)
-  // console.log([...a])
-  lineChart.option.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 612,0,0,0]
-  // lineChart.option.series[1].data = getSeriesData(data.chart?.calculatorMainboard)
-  // lineChart.option.series[2].data = getSeriesData(data.chart?.recordCalculatorMainboard)
-  // lineChart.option.series[3].data = getSeriesData(data.chart?.recordVaporRecovery)
-  // const arr = [1,2,3,3]
-  // console.log(arr)
-  // console.log(lineChart.option.series[0].data)
-  // console.log(lineChart.option.series[1].data)
-  // console.log(lineChart.option.series[2].data)
-  // console.log(lineChart.option.series[3].data)
+  lineChart.value.option.series[0].data = getSeriesData(data.chart?.vaporRecovery)
+  lineChart.value.option.series[1].data = getSeriesData(data.chart?.calculatorMainboard)
+  lineChart.value.option.series[2].data = getSeriesData(data.chart?.recordCalculatorMainboard)
+  lineChart.value.option.series[3].data = getSeriesData(data.chart?.recordVaporRecovery)
+  pieChart.getName = pieChartGetName(mainboardChart)
+  console.log(pieChart.getName)
+  pieChart.getValue = pieChartGetValue(mainboardChart)
+  console.log(pieChart.getValue)
+  state.loading = false
+  state.v_if = true
 }
 
+/**获取当前月份*/
 const nowMonth = new Date().getMonth() + 1
 
+/**获取当前月份之前的数据*/
 const getSeriesData = (obj) => {
   const fixedLengthArray: number[] = new Array(nowMonth).fill(0);
   obj.map(item => {
@@ -576,10 +559,30 @@ const getSeriesData = (obj) => {
       fixedLengthArray[item.month-1] = item.totalCount
     }
   })
-
   return fixedLengthArray
 }
 
+/**计算饼状图的数组*/
+const pieChartGetName = (val) => {
+  return val?.reduce((v, obj) => {
+    v.push(obj.name)
+    return v
+  }, [])
+}
+
+/**计算饼状图的数据*/
+const pieChartGetValue = (val) => {
+  const total = val?.reduce((v, obj) => {
+    v += obj?.totalCount ?? 0
+    return v
+  },0)
+  const arr = val?.reduce((v, obj) => {
+    v.push((obj.totalCount/total * 100).toFixed(2))
+    return v
+  },[])
+  return arr
+}
+
 // 页面加载时
 onMounted(() => {
   initData()