feat(工作台): 对接工作台后端接口

完成了部分数据的对接，还差图标数据的对接。

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

@@ -0,0 +1,24 @@
+/**
+ * 平台管理 - 工作台
+ *  数据对象的Dto
+ * */
+import {ContentType, HttpClient} from "/@/api/admin/http-client";
+import {AxiosResponse} from "axios/index";
+
+export class WorkBench<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
+
+  /**
+   * @name: GetInitData
+   * @description: 获取工作台表格初始化的数据
+   * @author wyoujia
+   * @date 工作台数据
+  */
+  getInitData = () =>
+    this.request<AxiosResponse, any>({
+      path: `/api/app/compoent/get-key-count-to-be-used`,
+      method: 'POST',
+      secure: true,
+      type: ContentType.Json,
+      format: 'json',
+    })
+}

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

@@ -0,0 +1,4 @@
+/**
+ * 平台管理 - 工作台
+ *  数据对象的Dto
+ * */

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

@@ -71,6 +71,7 @@ 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";
 
 // 定义变量内容
 const homeLineRef = ref()
@@ -80,6 +81,7 @@ const storesTagsViewRoutes = useTagsViewRoutes()
 const storesThemeConfig = useThemeConfig()
 const { themeConfig } = storeToRefs(storesThemeConfig)
 const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes)
+
 const state = reactive({
   global: {
     homeChartOne: null,
@@ -89,8 +91,8 @@ const state = reactive({
   } as any,
   homeOne: [
     {
-      num1: '125,12',
-      num2: '-12.32',
+      num1: 0,
+      // num2: '-12.32',
       num3: '团标备案主板',
       num4: 'fa fa-microchip',
       color1: '#FF6462',
@@ -98,8 +100,8 @@ const state = reactive({
       color3: '--el-color-primary',
     },
     {
-      num1: '653,33',
-      num2: '+42.32',
+      num1: 0,
+      // num2: '+42.32',
       num3: '备案ECVR-FM',
       num4: 'fa fa-flag-checkered',
       color1: '#6690F9',
@@ -107,8 +109,8 @@ const state = reactive({
       color3: '--el-color-success',
     },
     {
-      num1: '125,65',
-      num2: '+17.32',
+      num1: 0,
+      // num2: '+17.32',
       num3: '待使用主板密钥',
       num4: 'fa fa-key',
       color1: '#6690F9',
@@ -116,8 +118,8 @@ const state = reactive({
       color3: '--el-color-warning',
     },
     {
-      num1: '520,43',
-      num2: '-10.01',
+      num1: 0,
+      // num2: '-10.01',
       num3: '待使用ECVR-FM',
       num4: 'fa fa-flag-o',
       color1: '#FF6462',
@@ -189,11 +191,9 @@ const state = reactive({
   },
 })
 
-// 折线图
-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))
-  const option = {
+/**折线图数据*/
+const lineChart = reactive({
+  option : {
     backgroundColor: state.charts.bgColor,
     title: {
       text: '团标灌注',
@@ -202,14 +202,14 @@ const initLineChart = () => {
     },
     grid: { top: 70, right: 20, bottom: 30, left: 30 },
     tooltip: { trigger: 'axis' },
-    legend: { data: ['ECVR-FM', '主板'], right: 0 },
+    legend: { data: ['ECVR-FM', '团标主板', '团标备案主板', 'ECVR-FM备案'], right: 0 },
     xAxis: {
       data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     },
     yAxis: [
       {
         type: 'value',
-        name: '价格',
+        name: '数量',
         splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
       },
     ],
@@ -220,7 +220,7 @@ const initLineChart = () => {
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1],
+        data: [],
         lineStyle: { color: '#fe9a8b' },
         itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
         areaStyle: {
@@ -231,12 +231,12 @@ const initLineChart = () => {
         },
       },
       {
-        name: '主板',
+        name: '团标主板',
         type: 'line',
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
+        data: [],
         lineStyle: { color: '#9E87FF' },
         itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
         areaStyle: {
@@ -266,20 +266,63 @@ const initLineChart = () => {
           },
         },
       },
+      {
+        name: '团标备案主板',
+        type: 'line',
+        symbolSize: 6,
+        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' },
+          ]),
+        },
+      },
+      {
+        name: 'ECVR-FM备案',
+        type: 'line',
+        symbolSize: 6,
+        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' },
+          ]),
+        },
+      },
     ],
   }
-  state.global.homeChartOne.setOption(option)
+})
+
+/**饼图数据*/
+const pieChart = reactive({
+  getName : ['TQC主板', 'HSC', 'ECVR-FM'],
+  getValue : [34.2, 38.87, 17.88]
+})
+
+//折线图
+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.myCharts.push(state.global.homeChartOne)
 }
 // 饼图
 const initPieChart = () => {
   if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose()
   state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme))
-  var getname = ['TQC主板', 'HSC', 'ECVR-FM']
-  var getvalue = [34.2, 38.87, 17.88]
+
   var data = []
-  for (var i = 0; i < getname.length; i++) {
-    data.push({ name: getname[i], value: getvalue[i] })
+  for (var i = 0; i < pieChart.getName.length; i++) {
+    data.push({ name: pieChart.getName[i], value: pieChart.getValue[i] })
   }
   const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8']
   const option = {
@@ -315,7 +358,7 @@ const initPieChart = () => {
       top: 'center',
       itemWidth: 14,
       itemHeight: 14,
-      data: getname,
+      data: pieChart.getName,
       textStyle: {
         rich: {
           name: {
@@ -501,8 +544,45 @@ const initEchartsResizeFun = () => {
 const initEchartsResize = () => {
   window.addEventListener('resize', initEchartsResizeFun)
 }
+
+const initData = async () => {
+  const { data } = await new WorkBench().getInitData()
+  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)
+}
+
+const nowMonth = new Date().getMonth() + 1
+
+const getSeriesData = (obj) => {
+  const fixedLengthArray: number[] = new Array(nowMonth).fill(0);
+  obj.map(item => {
+    // console.log(item)
+    if(item.month <= nowMonth){
+      fixedLengthArray[item.month-1] = item.totalCount
+    }
+  })
+
+  return fixedLengthArray
+}
+
 // 页面加载时
 onMounted(() => {
+  initData()
   initEchartsResize()
 })
 // 由于页面缓存原因，keep-alive