From 0acca1af27b7d8cdc5b2c8809924c03e7f30ca85 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Thu, 11 Jan 2024 10:36:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=9D=E8=A7=84=E6=80=BB=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/echarts/index.ts                  |   5 +-
 src/views/workbench/components/chart/bar.vue  | 310 ++++++++++++++++++
 src/views/workbench/components/chart/index.ts |   1 +
 src/views/workbench/index.vue                 |  26 +-
 4 files changed, 337 insertions(+), 5 deletions(-)
 create mode 100644 src/views/workbench/components/chart/bar.vue
 create mode 100644 src/views/workbench/components/chart/index.ts

diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts
index b209ead..723945f 100644
--- a/src/plugins/echarts/index.ts
+++ b/src/plugins/echarts/index.ts
@@ -1,7 +1,7 @@
 import type { App } from "vue";
 import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
-import { PieChart, BarChart, LineChart } from "echarts/charts";
+import { PieChart, BarChart, LineChart, CustomChart } from "echarts/charts";
 import {
   GridComponent,
   TitleComponent,
@@ -27,7 +27,8 @@ use([
   ToolboxComponent,
   TooltipComponent,
   DataZoomComponent,
-  VisualMapComponent
+  VisualMapComponent,
+  CustomChart
 ]);
 
 /**
diff --git a/src/views/workbench/components/chart/bar.vue b/src/views/workbench/components/chart/bar.vue
new file mode 100644
index 0000000..3d48e33
--- /dev/null
+++ b/src/views/workbench/components/chart/bar.vue
@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { useDark, useECharts } from "@pureadmin/utils";
+import { type PropType, ref, computed, watch, nextTick } from "vue";
+import * as echarts from "echarts/core";
+
+const props = defineProps({
+  requireData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  questionData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+});
+
+const { isDark } = useDark();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+const chartRef = ref();
+const { setOptions } = useECharts(chartRef, {
+  theme
+});
+
+const name = [
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月"
+];
+const value = [100, 500, 400, 600, 700, 200, 450, 670, 900, 450, 670, 900];
+// const toolTims = null;
+const offsetX = 16;
+const offsetY = 8;
+// 绘制左侧面
+const CubeLeft = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x, shape.y];
+    const c1 = [shape.x - offsetX, shape.y - offsetY];
+    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+    const c3 = [xAxisPoint[0], xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  }
+});
+// 绘制右侧面
+const CubeRight = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c1 = [shape.x, shape.y];
+    const c2 = [xAxisPoint[0], xAxisPoint[1]];
+    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+    const c4 = [shape.x + offsetX, shape.y - offsetY];
+    ctx
+      .moveTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .lineTo(c4[0], c4[1])
+      .closePath();
+  }
+});
+// 绘制顶面
+const CubeTop = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0
+  },
+  buildPath: function (ctx, shape) {
+    const c1 = [shape.x, shape.y];
+    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+    const c3 = [shape.x, shape.y - offsetX];
+    const c4 = [shape.x - offsetX, shape.y - offsetY];
+    ctx
+      .moveTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .lineTo(c4[0], c4[1])
+      .closePath();
+  }
+});
+// 注册三个面图形
+echarts.graphic.registerShape("CubeLeft", CubeLeft);
+echarts.graphic.registerShape("CubeRight", CubeRight);
+echarts.graphic.registerShape("CubeTop", CubeTop);
+
+watch(
+  () => props,
+  async () => {
+    await nextTick(); // 确保DOM更新完成后再执行
+    setOptions({
+      container: ".bar-card",
+      // color: ["#41b6ff", "#e85f33"],
+      // backgroundColor: "#010d3a",
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow"
+        },
+        formatter: function (params) {
+          const item = params[1];
+          return `${item.name}:${item.value}人`;
+        }
+      },
+      grid: {
+        top: "8%",
+        left: "0%",
+        right: "0%",
+        bottom: "0%",
+        containLabel: true
+      },
+      // legend: {
+      //   data: ["需求人数", "提问数量"],
+      //   textStyle: {
+      //     color: "#606266",
+      //     fontSize: "0.875rem"
+      //   },
+      //   bottom: 0
+      // },
+      xAxis: [
+        {
+          type: "category",
+          data: name,
+          // X
+          axisLine: {
+            show: true,
+            lineStyle: {
+              // width: 1,
+              type: "dashed",
+              color: "#666"
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 14,
+            interval: 0
+          }
+        }
+      ],
+      yAxis: [
+        {
+          // name: "人数",
+          type: "value",
+          // y
+          axisLine: {
+            show: false,
+            lineStyle: {
+              // width: 1,
+              fontSize: 12,
+              color: "#666666"
+            }
+          },
+          splitLine: {
+            show: true,
+            // y-line
+            lineStyle: {
+              // width: 1,
+              type: "dashed",
+              color: "#DCDCDC"
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            fontSize: 14
+          }
+          // name: "单位: 个"
+        }
+      ],
+      series: [
+        {
+          // name: "",
+          type: "custom",
+          renderItem: (params, api) => {
+            const location = api.coord([api.value(0), api.value(1)]);
+            return {
+              type: "group",
+              children: [
+                {
+                  type: "CubeLeft",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0])
+                  },
+                  style: {
+                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: "#417EFD"
+                      },
+                      {
+                        offset: 1,
+                        color: "#0044D2"
+                      }
+                    ])
+                  }
+                },
+                {
+                  type: "CubeRight",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0])
+                  },
+                  style: {
+                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: "#417EFD"
+                      },
+                      {
+                        offset: 1,
+                        color: "#0044D2"
+                      }
+                    ])
+                  }
+                },
+                {
+                  type: "CubeTop",
+                  shape: {
+                    api,
+                    xValue: api.value(0),
+                    yValue: api.value(1),
+                    x: location[0],
+                    y: location[1],
+                    xAxisPoint: api.coord([api.value(0), 0])
+                  },
+                  style: {
+                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {
+                        offset: 0,
+                        color: "#0044D2"
+                      },
+                      {
+                        offset: 1,
+                        color: "#417EFD"
+                      }
+                    ])
+                  }
+                }
+              ]
+            };
+          },
+          data: value
+        },
+        {
+          // name: "",
+          type: "bar",
+          label: {
+            // normal: {
+            show: false,
+            position: "top",
+            formatter: e => {
+              return `${e.value}人`;
+            },
+            fontSize: 16,
+            color: "#43C4F1",
+            offset: [0, -15]
+            // }
+          },
+          itemStyle: {
+            color: "transparent"
+          },
+          tooltip: {},
+          data: value
+        }
+      ]
+    });
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+</script>
+
+<template>
+  <div ref="chartRef" style="width: 100%" />
+</template>
diff --git a/src/views/workbench/components/chart/index.ts b/src/views/workbench/components/chart/index.ts
new file mode 100644
index 0000000..ee14d2e
--- /dev/null
+++ b/src/views/workbench/components/chart/index.ts
@@ -0,0 +1 @@
+export { default as barChart } from "./bar.vue";
diff --git a/src/views/workbench/index.vue b/src/views/workbench/index.vue
index d8ee4f7..749f5d0 100644
--- a/src/views/workbench/index.vue
+++ b/src/views/workbench/index.vue
@@ -1,9 +1,22 @@
 <script setup lang="ts">
 import ReCol from "@/components/ReCol";
+import { barChart } from "./components/chart";
 
 defineOptions({
   name: "Workbench"
 });
+
+/** 分析概览 */
+// const barChartData = [
+//   {
+//     requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
+//     questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
+//   },
+//   {
+//     requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600],
+//     questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
+//   }
+// ];
 </script>
 
 <template>
@@ -51,8 +64,11 @@ defineOptions({
           }
         }"
       >
-        <el-card class="line-card" shadow="never">
-          <div class="flex justify-between h-[422px]">222</div>
+        <span>违规总量</span>
+        <el-card class="line-card" shadow="always">
+          <div class="flex justify-between h-[422px]">
+            <barChart />
+          </div>
         </el-card>
       </re-col>
       <re-col
@@ -74,8 +90,9 @@ defineOptions({
           }
         }"
       >
+        <span>消息通知</span>
         <el-card class="line-card" shadow="never">
-          <div class="flex justify-between h-[422px]">222</div>
+          <div class="flex justify-between h-[422px]" />
         </el-card>
       </re-col>
       <re-col
@@ -97,6 +114,7 @@ defineOptions({
           }
         }"
       >
+        <span>设备状态</span>
         <el-card class="line-card" shadow="never">
           <div class="flex justify-between h-[282px]">33</div>
         </el-card>
@@ -120,6 +138,7 @@ defineOptions({
           }
         }"
       >
+        <span>设备告警情况</span>
         <el-card class="line-card" shadow="never">
           <div class="flex justify-between h-[282px]">33</div>
         </el-card>
@@ -143,6 +162,7 @@ defineOptions({
           }
         }"
       >
+        <span>算力占用</span>
         <el-card class="line-card" shadow="never">
           <div class="flex justify-between h-[282px]">33</div>
         </el-card>