双击打开详情修复

cdTMP/src/views/dashboard/workplace/components/cpns/st-project-chart.vue

@@ -1,179 +1,31 @@
 <template>
     <div class="ma-content-block p-3 mt-3 bg-white">
-        <a-spin class="chartContainer" :loading="isDataLoading" tip="图标数据加载中...">
-            <ma-chart height="300px" :option="loginChartOptions" v-if="!isDataLoading" />
+        <a-spin class="chartContainer" :loading="isPending" tip="图标数据加载中...">
+            <div class="flex justify-center items-center" v-if="!isPending">
+                <template v-if="isError">
+                    <img class="w-[200px] h-[300px]" src="@/assets/img/ErrorLoad.svg" alt="" />
+                </template>
+                <template v-else>
+                    <VueUiXy :dataset="chartData" :config="chartConfig" />
+                </template>
+            </div>
         </a-spin>
     </div>
 </template>
 
 <script setup>
-import { computed, ref } from "vue"
-import { graphic } from "echarts"
-import fetchData from "@/hooks/fetchData"
 import commonApi from "@/api/common"
-// 传给hook的远程请求数据函数
-async function fetchDataFunc() {
-    return await commonApi.getChartData()
-}
-const { loadingData, isDataLoading } = fetchData(
-    [
-        { month: "1", count: 2 },
-        { month: "2", count: 10 }
-    ],
-    fetchDataFunc
-)
-// 计算属性：将loadingData转为xAxis
-const xAxisData = computed(() => {
-    return loadingData.value.map((item) => {
-        return item.month + "月"
-    })
+import { VueUiXy } from "vue-data-ui"
+import useVueDataUI from "@/views/dashboard/workplace/components/cpns/hooks/vueDataUI"
+import { useQuery } from "@tanstack/vue-query"
+// vue-query请求图表接口
+const { isPending, data, isError } = useQuery({
+    queryKey: ["chart"],
+    queryFn: commonApi.getChartData,
+    refetchOnWindowFocus: false
 })
-const yAxisData = computed(() => {
-    return loadingData.value.map((item) => {
-        return item.count
-    })
-})
-
-function graphicFactory(side) {
-    return {
-        type: "text",
-        bottom: "8",
-        ...side,
-        style: {
-            text: "",
-            textAlign: "center",
-            fill: "#4E5969",
-            fontSize: 12
-        }
-    }
-}
-
-const graphicElements = ref([graphicFactory({ left: "3%" }), graphicFactory({ right: 0 })])
-
-const loginChartOptions = computed(() => ({
-    title: {
-        text: `项目每月统计-${new Date().getFullYear()}年份`
-    },
-    grid: {
-        left: "3%",
-        right: "3%",
-        top: "50",
-        bottom: "30"
-    },
-    xAxis: {
-        type: "category",
-        offset: 2,
-        data: xAxisData.value,
-        boundaryGap: true,
-        axisLabel: {
-            color: "#4E5969",
-            formatter(value, idx) {
-                return `${value}`
-            }
-        },
-        axisLine: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        splitLine: {
-            show: true,
-            interval: (idx) => {
-                if (idx === xAxisData.value.length - 1) return false
-                return true
-            },
-            lineStyle: {
-                color: "#E5E8EF"
-            }
-        },
-        axisPointer: {
-            show: true,
-            lineStyle: {
-                color: "#23ADFF",
-                width: 2
-            }
-        }
-    },
-    yAxis: {
-        type: "value",
-        axisLine: {
-            show: false
-        },
-        axisLabel: {
-            formatter(value, idx) {
-                if (idx === 0) return value
-                return `${value}`
-            }
-        },
-        splitLine: {
-            show: true,
-            lineStyle: {
-                type: "dashed",
-                color: "#E5E8EF"
-            }
-        }
-    },
-    tooltip: {
-        trigger: "axis",
-        formatter(params) {
-            return `<div class="login-chart">
-        <p class="tooltip-title">${params[0].axisValueLabel}</p>
-        <div class="content-panel"><span>项目数量</span><span class="tooltip-value">${Number(
-            params[0].value
-        ).toLocaleString()}</span></div>
-      </div>`
-        }
-    },
-    graphic: {
-        elements: graphicElements.value
-    },
-    series: [
-        {
-            data: yAxisData.value,
-            type: "line",
-            smooth: true,
-            symbolSize: 14,
-            emphasis: {
-                focus: "series",
-                itemStyle: {
-                    borderWidth: 2
-                }
-            },
-            lineStyle: {
-                width: 3,
-                color: new graphic.LinearGradient(0, 0, 1, 0, [
-                    {
-                        offset: 0,
-                        color: "rgba(30, 231, 255, 1)"
-                    },
-                    {
-                        offset: 0.5,
-                        color: "rgba(36, 154, 255, 1)"
-                    },
-                    {
-                        offset: 1,
-                        color: "rgba(111, 66, 251, 1)"
-                    }
-                ])
-            },
-            showSymbol: false,
-            areaStyle: {
-                opacity: 0.8,
-                color: new graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: "rgba(17, 126, 255, 0.16)"
-                    },
-                    {
-                        offset: 1,
-                        color: "rgba(17, 128, 255, 0)"
-                    }
-                ])
-            }
-        }
-    ]
-}))
+// vue-data-ui图表
+const { chartData, chartConfig } = useVueDataUI(data)
 </script>
 
 <style lang="less" scoped>