perf(工作台): 添加DTO对象，优化图表的渲染

添加工作台界面的数据对象，优化图标的渲染，解决了网络慢图表渲染失败的问题。

admin.ui.plus-master/src/App.vue

@@ -20,6 +20,7 @@ import { Local, Session } from '/@/utils/storage'
 import mittBus from '/@/utils/mitt'
 import setIntroduction from '/@/utils/setIconfont'
 import {useGlobalCacheStore} from "/@/stores/globalCacheStore";
+import {useChartDataStore} from "/@/stores/chartDataStore";
 
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'))
@@ -34,6 +35,7 @@ const route = useRoute()
 const stores = useTagsViewRoutes()
 const storesThemeConfig = useThemeConfig()
 const globalCacheStore = useGlobalCacheStore()
+const chartDataStore = useChartDataStore()
 const { themeConfig } = storeToRefs(storesThemeConfig)
 
 // 设置锁屏时组件显示隐藏
@@ -84,6 +86,9 @@ onMounted(() => {
     globalCacheStore.requestGlobalStore()
     console.log(globalCacheStore.getGlobalStore());
 
+    //获取图表数据
+    chartDataStore.requestChartStore()
+
     // 获取缓存中的布局配置
     if (Local.get('themeConfig')) {
       storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') })

admin.ui.plus-master/src/api/admin/workbench/workBenchDto.ts

@@ -2,3 +2,47 @@
  * 平台管理 - 工作台
  *  数据对象的Dto
  * */
+
+
+export interface workBenchDto {
+  /**团标备案主板 数目*/
+  calculatorMainboardCount: number | null,
+  /**备案ECVR-FM 数目*/
+  vaporRecoveryCount: number | null,
+  /**待使用主板密钥 数目*/
+  vaporRecoveryStateCount: number | null,
+  /**待使用ECVR-FM 数目*/
+  calculatorMainboardStateCount: number | null,
+  /**图表数据*/
+  chart:chartDto,
+}
+
+export interface chartDto {
+  /**线性图 ECVR-FM*/
+  vaporRecovery: lineChartDto [] | null
+  /**线性图 团标主板*/
+  calculatorMainboard: lineChartDto [] | null
+  /**线性图 团标备案主板*/
+  recordCalculatorMainboard: lineChartDto [] | null
+  /**线性图 ECVR-FM备案*/
+  recordVaporRecovery:  lineChartDto [] | null
+  /**饼状图*/
+  mainboardChart: mainboardChartDto [] | null
+}
+
+export interface lineChartDto {
+  /**月份*/
+  month: number | null,
+  /**类型*/
+  deviceType: string | null,
+  /**总数*/
+  totalCount: number | null
+}
+
+export interface mainboardChartDto {
+  /**名字*/
+  name: string | null,
+  bomNo: string | null,
+  /**总数*/
+  totalCount: number | null
+}

admin.ui.plus-master/src/stores/chartDataStore.ts

@@ -0,0 +1,24 @@
+import {defineStore} from "pinia";
+import {WorkBench} from "/@/api/admin/workbench/workBench";
+import {workBenchDto} from "/@/api/admin/workbench/workBenchDto";
+
+export const useChartDataStore = defineStore('chartDataStore', {
+  state: () => ({
+    chartStore:{} as workBenchDto
+  }),
+  actions: {
+    /**获取所有字典缓存*/
+    async requestChartStore  ()  {
+      const { data } = await new WorkBench().getInitData()
+      this.setChartStore(data)
+    },
+
+    getChartStore(){
+      return this.chartStore
+    },
+
+    setChartStore(val:any) {
+      this.chartStore = val
+    }
+  }
+})

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="home-container layout-pd" v-if="state.v_if" v-loading="state.loading">
+  <div class="home-container layout-pd"  v-loading="state.loading">
     <el-row :gutter="15" class="home-card-one mb15">
       <el-col
         :xs="24"
@@ -71,7 +71,9 @@ import * as echarts from 'echarts'
 import {storeToRefs} from 'pinia'
 import {useThemeConfig} from '/@/stores/themeConfig'
 import {useTagsViewRoutes} from '/@/stores/tagsViewRoutes'
-import {WorkBench} from "/@/api/admin/workbench/workBench";
+import {useChartDataStore} from "/@/stores/chartDataStore";
+import {workBenchDto} from "/@/api/admin/workbench/workBenchDto";
+const chartDataStore = useChartDataStore()
 
 // 定义变量内容
 const homeLineRef = ref()
@@ -84,7 +86,6 @@ const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes)
 
 const state = reactive({
   loading:false,
-  v_if:false,
   global: {
     homeChartOne: null,
     homeChartTwo: null,
@@ -529,12 +530,12 @@ const initEchartsResize = () => {
 
 const initData = async () => {
   state.loading = true
-  const { data } = await new WorkBench().getInitData()
+  const  data : workBenchDto  = chartDataStore.getChartStore()
   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
+  state.homeOne[0].num1 = data.calculatorMainboardCount ?? 0
+  state.homeOne[1].num1 = data.vaporRecoveryCount ?? 0
+  state.homeOne[2].num1 = data.vaporRecoveryStateCount ?? 0
+  state.homeOne[3].num1 = data.calculatorMainboardStateCount ?? 0
   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)
@@ -542,7 +543,6 @@ const initData = async () => {
   pieChart.getName = pieChartGetName(mainboardChart)
   pieChart.getValue = pieChartGetValue(mainboardChart)
   state.loading = false
-  state.v_if = true
 }
 
 /**获取当前月份*/
@@ -583,8 +583,8 @@ const pieChartGetValue = (val) => {
 
 // 页面加载时
 onMounted(() => {
-  initData()
   initEchartsResize()
+  initData()
 })
 // 由于页面缓存原因，keep-alive
 onActivated(() => {
@@ -621,6 +621,7 @@ watch(
     immediate: true,
   }
 )
+
 </script>
 
 <style scoped lang="scss">