修改首页

admin-client/src/core/utils/Tools.ts

@@ -441,81 +441,37 @@ class Tools {
       fileInput.click();
     });
   }
-  /**
+  static PlayGameStatus = [
-   * 图片上传
+    { value: 0, name: "初始化", color: "#00FF00" },
-   * @param imgaeId imageId
+    { value: 1, name: "启动游戏", color: "#00FF00" },
-   * @param imageType 图片类型
+    { value: 2, name: "排队中", color: "#00FF00" },
-   * @param modelName 模块
+    { value: 3, name: "排队成功", color: "#00FF00" },
-   * @returns
+    { value: 4, name: "取消排队", color: "#FFFF00" },
-   */
+    { value: 5, name: "排队掉线", color: "#FFFF00"  },
-  static async imageFileUpload(
+    { value: 6, name: "排队掉线结束游戏", color: "red" },
-    imgaeId: number,
+    { value: 10, name: "游戏启动失败", color: "red" },
-    imageType: number,
+    { value: 11, name: "用户钻石不足", color: "red"  },
-    modelName?: string,
+    { value: 12, name: "用户游玩时钻石不足", color: "red" },
-  ): Promise<any> {
+    { value: 13, name: "用户游玩时钻石不足退出游戏", color: "red" },
-    //#region 创建文件选择器
+    { value: 14, name: "排队异常", color: "red" },
-    const file = await this.selectFile();
+    { value: 15, name: "用户扣款错误", color: "red"  },
-    if (file == null) {
+    { value: 20, name: "开始游戏", color: "#00FF00" },
-      return null;
+    { value: 21, name: "游戏中", color: "#00FF00" },
-    }
+    { value: 22, name: "用户主动结束游戏", color: "#00FF00" },
-    return await this.imageUpdate(file, imgaeId, imageType, modelName);
+    { value: 23, name: "游戏掉线", color: "#FFFF00" },
-    //#endregion
+    { value: 24, name: "游戏掉线结束", color: "red" },
+    { value: 40, name: "游戏结束", color: "#00FF00" },
+    { value: 50, name: "游戏暂停", color: "#00FF00" },
+    { value: 51, name: "切换视频等级", color: "#00FF00" }
+  ];
+  static getStatusNameByValue(value: number) {
+    const status = this.PlayGameStatus.find(status => status.value === value);
+    return status ? status.name : null; // 如果找到对应的状态，返回其名称，否则返回null
   }
-  /**
-   * 上传图片
-   * @param file 文件流
-   * @param imgaeId 图片编号
-   * @param imageType 图片类型
-   * @param modelName 模块
-   * @returns
-   */
-  static async imageUpdate(
-    file: File,
-    imgaeId: number,
-    imageType: number,
-    modelName?: string,
-    tenantId?: string,
-  ): Promise<any> {
-    // const key = "updatable";
-    // AntdvMessage.loading({ content: "上传图片中", key });
-    // try {
-    //   if (modelName == null || modelName == "") {
-    //     if (imageType == 0) {
-    //       modelName = "images/common";
-    //     } else {
-    //       modelName = "images/common";
-    //     }
-    //   }
-    //   const fileInfo = await this.cosUploadFile(file, modelName);
-    //   if (imgaeId == undefined || imgaeId == null) {
-    //     imgaeId = 0;
-    //   }
-    //   const fromData = await TImageConfigService.findForm(imgaeId);
-    //   const _data = fromData.data;
-    //   //#region  处理数据
-    //   _data.form.url = fileInfo.imageUrl;
-    //   if (_data.form.name == null || _data.form.name == "") {
-    //     _data.form.name = Tools.getFileNameWithoutExtension(file);
-    //   }
-    //   _data.form.ossPath = fileInfo._cosData.filePath;
-    //   _data.form.region = fileInfo._cosData.bucket;
-    //   // _data.form.imageId = imgaeId;
-    //   _data.form.imageType = imageType;
-    //   if (tenantId != null) {
-    //     console.log('租户==》', tenantId);
 
-    //     _data.form.tenantId = tenantId;
+  static getStatusNameByColor(value: number) {
-    //   }
+    const status = this.PlayGameStatus.find(status => status.value === value);
-    //   //#endregion
+    return status ? status.color : null; // 如果找到对应的状态，返回其名称，否则返回null
-    //   const result = await TImageConfigService.saveForm(_data.id, _data.form);
-    //   AntdvMessage.success({ content: "上传成功", key, duration: 2 });
-    //   return { imageId: result.data, imageUrl: fileInfo.imageUrl };
-    // } catch (error) {
-    //   console.log(error);
-    //   AntdvMessage.error({ content: "上传失败", key, duration: 2 });
-    // }
-
-    return null;
   }
 }
 

admin-client/src/views/Apps/App/T_Game_PlayGameLogs/GameUserOperationJson.vue

@@ -9,7 +9,7 @@ import {
 } from "vue";
 import * as monaco from "monaco-editor";
 import "monaco-editor/min/vs/editor/editor.main.css";
-
+import Tools from "@/core/utils/Tools";
 const props = defineProps<{ onSuccess: () => void }>();
 let editorContainer = ref<HTMLElement>();
 let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
@@ -82,7 +82,7 @@ defineExpose({
     totalMilliseconds.value = 0;
     nextTick(() => {
       const data = JSON.parse(jsonstr || "{}");
-      jsonData.value.slice(0, jsonData.value.length);
+      jsonData.value.splice(0, jsonData.value.length);
       jsonData.value.push(...data);
       setTimeout(() => {
         if (editorInstance) {
@@ -118,6 +118,8 @@ function showJyRequestData(t: any) {
       editorInstance.setValue(
         JSON.stringify(JSON.parse(t.RequestContent), null, 2)
       );
+      console.log(t);
+      
     }
     totalMilliseconds.value = t.TotalMilliseconds;
   }
@@ -143,15 +145,12 @@ function showJyRequestData(t: any) {
     width="80%"
   >
     <template #footer>
-      <a-button type="primary" :loading="state.loading" @click="save()">
-        提交
-      </a-button>
       <a-button @click="state.visible = false">关闭</a-button>
     </template>
     <a-spin :spinning="state.loading">
       <el-container>
         <el-aside width="550px">
-          <el-timeline style="max-width: 500px; max-height: 80vh">
+          <el-timeline style="max-width: 500px; height:75vh">
             <el-timeline-item
               @click="() => showJyRequestData(t)"
               v-for="t in jsonData"
@@ -159,6 +158,7 @@ function showJyRequestData(t: any) {
               :timestamp="t.OperationDateTime"
               placement="top"
               :hide-timestamp="true"
+              :color="Tools.getStatusNameByColor(t.ActionId)"
             >
               <div v-if="t.RequestContent != null" style="cursor: pointer">
                 <div>
@@ -203,6 +203,6 @@ function showJyRequestData(t: any) {
 <style>
 .monaco-editor {
   width: 100%;
-  height: 40vh;
+  height:34vh;
 }
 </style>

admin-client/src/views/Apps/App/T_Game_PlayGameLogs/Index.vue

@@ -257,6 +257,12 @@ onMounted(() => {
   findList();
 });
 
+function chongzhi() {
+  state.search.vm.gameid = undefined;
+  state.search.vm.gamename = undefined;
+  state.search.vm.userid = undefined;
+}
+
 /**
  *获取数据
  */
@@ -379,7 +385,7 @@ function exportExcel() {
                 <a-button
                   @click="
                     state.page = 1;
-                    refSearchForm?.resetFields();
+                    chongzhi();
                     findList();
                   "
                 >
@@ -467,7 +473,10 @@ function exportExcel() {
           <template #default="{ record }">
             <a-button
               type="link"
-              @click="() => refgameUserOperationJson?.open(record.gameUserOperationJson)"
+              @click="
+                () =>
+                  refgameUserOperationJson?.open(record.gameUserOperationJson)
+              "
               v-if="power.update"
               >日志</a-button
             >
@@ -487,6 +496,9 @@ function exportExcel() {
     </TableCurdV1>
     <!-- Info -->
     <Info ref="refInfo" :onSuccess="() => findList()" />
-    <gameUserOperationJson ref="refgameUserOperationJson" :onSuccess="() => {}" />
+    <gameUserOperationJson
+      ref="refgameUserOperationJson"
+      :onSuccess="() => {}"
+    />
   </PageContainerGame>
 </template>

admin-client/src/views/home/Index.vue

@@ -2,6 +2,10 @@
 import {ref} from "vue";
 import WorkOrder from "./components/WorkOrder.vue";
 import WorkOrderStatistics from "./components/WorkOrderStatistics.vue";
+import UserSignStatistics from "./components/UserSignStatistics.vue";
+import PlayGameTimeStatistics from "./components/PlayGameTimeStatistics.vue";
+
+
 import HomeChart1 from "./components/HomeChart1.vue";
 import HomeChart2 from "./components/HomeChart2.vue";
 import HomeChart3 from "./components/HomeChart3.vue";
@@ -26,59 +30,17 @@ let visible = ref(false);
     <!-- 近一年设备销售量 -->
     <div class="mt-16">
       <a-row :gutter="[16, 16]">
-        <a-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
+        <a-col :xs="24" :sm="24" :md="12" :lg="16" :xl="12">
           <WorkOrderStatistics/>
         </a-col>
-        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+        <a-col :xs="24" :sm="24" :md="12" :lg="16" :xl="12">
-          <a href="https://gitee.com/hzy6/HzyAdmin/stargazers" target="_black">
+          <UserSignStatistics />
-            <img
+        </a-col>
-                src="https://gitee.com/hzy6/HzyAdmin/widgets/widget_card.svg?colors=eae9d7,2e2f29,272822,484a45,eae9d7,747571"
+        <a-col :xs="24" :sm="24" :md="12" :lg="16" :xl="12">
-                style="width: 100%; height: 320px"/>
+          <PlayGameTimeStatistics />
-          </a>
-        </a-col>
-      </a-row>
-    </div>
-
-    <!-- 更多图形报表 -->
-    <div class="mt-16">
-      <a-row :gutter="[16, 16]">
-        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-          <HomeChart1/>
-        </a-col>
-        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-          <HomeChart2/>
-        </a-col>
-        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-          <HomeChart3/>
-        </a-col>
-      </a-row>
-    </div>
-
-    <!-- 更多图形报表 -->
-    <div class="mt-16">
-      <a-row :gutter="[16, 16]">
-        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-          <a-card :bordered="false">
-            <template #cover>
-              <img alt="example" :src="image1" class="p-16"/>
-            </template>
-          </a-card>
-        </a-col>
-        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-          <a-card :bordered="false">
-            <template #cover>
-              <img alt="example" :src="image2" class="p-16"/>
-            </template>
-          </a-card>
-        </a-col>
-        <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-          <a-card :bordered="false">
-            <template #cover>
-              <img alt="example" :src="image3" class="p-16"/>
-            </template>
-          </a-card>
         </a-col>
       </a-row>
+      <!-- PlayGameTimeStatistics -->
     </div>
     <!-- 抽屉 -->
     <a-drawer v-model:open="visible" title="更多" placement="right" width="90%">

admin-client/src/views/home/components/PlayGameTimeStatistics.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { onMounted, ref, onBeforeUnmount } from "vue";
+import { Line } from "@antv/g2plot";
+//
+let data = [];
+for (let i = 0; i < 30; i++) {
+  data.push({
+    type: i + 1 + "号",
+    sales: Math.floor(Math.random() * 400),
+    category: "总数",
+  });
+  data.push({
+    type: i + 1 + "号",
+    sales: Math.floor(Math.random() * 200),
+    category: "华为渠道",
+  });
+  data.push({
+    type: i + 1 + "号",
+    sales: Math.floor(Math.random() * 200),
+    category: "小米渠道",
+  });
+}
+
+let timer = ref();
+
+onMounted(() => {
+  document.getElementById("PlayGameTimeContainer")!.innerHTML = "";
+  const line = new Line("PlayGameTimeContainer", {
+    data,
+    xField: "type",
+    yField: "sales",
+    seriesField: "category",
+    yAxis: {
+      label: {
+        // 数值格式化为千分位
+        formatter: (v) =>
+          `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
+      },
+    },
+    color: ["#1979C9", "#D62A0D", "#FAA219"],
+  });
+
+  line.render();
+});
+</script>
+
+<template>
+  <a-card
+    title="近一月玩游戏时长统计"
+    :bordered="false"
+    :headStyle="{ 'border-bottom': 0 }"
+  >
+    <template #extra>
+      <a
+        href="https://g2plot.antv.vision/zh/docs/manual/getting-started"
+        target="_black"
+        >更多数据</a
+      >
+    </template>
+    <div id="PlayGameTimeContainer"></div>
+  </a-card>
+</template>
+
+<style lang="less">
+.work-order {
+  .icon-size {
+    font-size: 70px;
+  }
+}
+</style>

admin-client/src/views/home/components/UserSignStatistics.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { onMounted, ref, onBeforeUnmount } from "vue";
+import { Line } from "@antv/g2plot";
+//
+let data = [];
+for (let i = 0; i < 30; i++) {
+  data.push({
+    type: i + 1 + "号",
+    sales: Math.floor(Math.random() * 400),
+    category: "总数",
+  });
+  data.push({
+    type: i + 1 + "号",
+    sales: Math.floor(Math.random() * 200),
+    category: "华为渠道",
+  });
+  data.push({
+    type: i + 1 + "号",
+    sales: Math.floor(Math.random() * 200),
+    category: "小米渠道",
+  });
+}
+
+let timer = ref();
+
+onMounted(() => {
+  document.getElementById("UserSignStatisticsContainer")!.innerHTML = "";
+  const line = new Line("UserSignStatisticsContainer", {
+    data,
+    xField: "type",
+    yField: "sales",
+    seriesField: "category",
+    yAxis: {
+      label: {
+        // 数值格式化为千分位
+        formatter: (v) =>
+          `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
+      },
+    },
+    color: ["#1979C9", "#D62A0D", "#FAA219"],
+  });
+
+  line.render();
+});
+</script>
+
+<template>
+  <a-card
+    title="近一月注册人数统计"
+    :bordered="false"
+    :headStyle="{ 'border-bottom': 0 }"
+  >
+    <template #extra>
+      <a
+        href="https://g2plot.antv.vision/zh/docs/manual/getting-started"
+        target="_black"
+        >更多数据</a
+      >
+    </template>
+    <div id="UserSignStatisticsContainer"></div>
+  </a-card>
+</template>
+
+<style lang="less">
+.work-order {
+  .icon-size {
+    font-size: 70px;
+  }
+}
+</style>

admin-client/src/views/home/components/WorkOrder.vue

@@ -2,76 +2,115 @@
 import { ref, onBeforeUnmount } from "vue";
 import AppIcon from "@/core/components/AppIcon.vue";
 
-let value1 = ref(12);
+interface CardData {
-let value2 = ref(26);
+  title: string;
-let value3 = ref(107);
+  unit: string;
-let value4 = ref(5);
+  value: number;
-let iconSize = ref(60);
+  icon: string;
-let timer = ref<NodeJS.Timer | null>(null);
+  color: string;
-timer.value = setInterval(() => {
+}
-  value1.value = Math.floor(Math.random() * 90);
-  value2.value = Math.floor(Math.random() * 90);
-  value3.value = Math.floor(Math.random() * 1000);
-  value4.value = Math.floor(Math.random() * 500);
-}, 2 * 1000);
 
-onBeforeUnmount(() => {
+const iconSize = ref(60);
-  if (timer.value) {
+const timer = ref<NodeJS.Timer | null>(null);
-    clearInterval(timer.value);
+const cards = ref<CardData[]>([
-  }
+  {
-});
+    title: "今日注册人数",
+    unit: "人",
+    value: 107,
+    icon: "UserAddOutlined",
+    color: "#32CD32",
+  },
+  {
+    title: "今日登录人数",
+    unit: "人",
+    value: 5,
+    icon: "UserOutlined",
+    color: "#9370DB",
+  },
+  {
+    title: "当前在线人数",
+    unit: "人",
+    value: 0,
+    icon: "TeamOutlined",
+    color: "#00BFFF",
+  },
+  {
+    title: "当前玩游戏人数",
+    unit: "人",
+    value: 0,
+    icon: "UserSwitchOutlined",
+    color: "#FF8C00",
+  },
+  {
+    title: "当前排队人数",
+    unit: "人",
+    value: 0,
+    icon: "UserSwitchOutlined",
+    color: "#FF7F50",
+  },
+  {
+    title: "今日意向订单",
+    unit: "次",
+    value: 5,
+    icon: "SolutionOutlined",
+    color: "#FFD700",
+  },
+  {
+    title: "今日支付订单",
+    unit: "次",
+    value: 5,
+    icon: "AccountBookOutlined",
+    color: "#FF4500",
+  },
+  {
+    title: "今日充值金额",
+    unit: "次",
+    value: 5,
+    icon: "AccountBookOutlined",
+    color: "#FF6347",
+  },
+]);
+
+const updateValues = () => {
+  cards.value = cards.value.map((card) => {
+    const max = card.unit === "台" ? 1000 : card.unit === "次" ? 500 : 90;
+    return { ...card, value: Math.floor(Math.random() * max) };
+  });
+};
+
+// timer.value = setInterval(updateValues, 2000);
+
+// onBeforeUnmount(() => {
+//   if (timer.value) {
+//     // clearInterval(timer.value);
+//   }
+// });
 </script>
 
 <template>
   <a-row class="work-order" :gutter="[16, 16]">
-    <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+    <a-col
-      <a-card :bordered="false" hoverable :style="{ background: '#5b8ff9' }" :bodyStyle="{ padding: 0 }">
+      v-for="(card, index) in cards"
+      :key="index"
+      :xs="24"
+      :sm="12"
+      :md="12"
+      :lg="6"
+      :xl="4"
+    >
+      <a-card
+        :bordered="false"
+        hoverable
+        :style="{ background: card.color }"
+        :bodyStyle="{ padding: 0 }"
+      >
         <a-row class="text-center p-16">
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="icon">
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" class="icon">
-            <AppIcon name="DashboardOutlined" :size="iconSize" style="color: #fff" />
+            <AppIcon :name="card.icon" :size="iconSize" style="color: #fff" />
           </a-col>
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="14">
-            <h3 style="color: #fff">CPU占用率</h3>
+            <h3 style="color: #fff">{{ card.title }}</h3>
-            <h2 style="color: #fff">{{ value1 }}%</h2>
+            <h2 style="color: #fff">{{ card.value }}{{ card.unit }}</h2>
-          </a-col>
-        </a-row>
-      </a-card>
-    </a-col>
-    <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-      <a-card :bordered="false" hoverable :style="{ background: '#61ddaa' }" :bodyStyle="{ padding: 0 }">
-        <a-row class="text-center p-16">
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="icon">
-            <AppIcon name="CloudServerOutlined" :size="iconSize" style="color: #fff" />
-          </a-col>
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
-            <h3 style="color: #fff">内存占用率</h3>
-            <h2 style="color: #fff">{{ value2 }}%</h2>
-          </a-col>
-        </a-row>
-      </a-card>
-    </a-col>
-    <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-      <a-card :bordered="false" hoverable :style="{ background: '#85ce61' }" :bodyStyle="{ padding: 0 }">
-        <a-row class="text-center p-16">
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="icon">
-            <AppIcon name="LinkOutlined" :size="iconSize" style="color: #fff" />
-          </a-col>
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
-            <h3 style="color: #fff">当前在线设备</h3>
-            <h2 style="color: #fff">{{ value3 }}台</h2>
-          </a-col>
-        </a-row>
-      </a-card>
-    </a-col>
-    <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-      <a-card :bordered="false" hoverable :style="{ background: '#ff7875' }" :bodyStyle="{ padding: 0 }">
-        <a-row class="text-center p-16">
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" class="icon">
-            <AppIcon name="DisconnectOutlined" :size="iconSize" style="color: #fff" />
-          </a-col>
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
-            <h3 style="color: #fff">当前离线设备</h3>
-            <h2 style="color: #fff">{{ value4 }}台</h2>
           </a-col>
         </a-row>
       </a-card>

admin-client/src/views/home/components/WorkOrderStatistics.vue

@@ -1,116 +1,61 @@
 <script lang="ts" setup>
 import { onMounted, ref, onBeforeUnmount } from "vue";
-import { Column } from "@antv/g2plot";
+import { Column, Line } from "@antv/g2plot";
 
-const data = [
+let data = [];
-  {
+for (let i = 0; i < 30; i++) {
-    type: "1月",
+  data.push({
-    sales: 38,
+    type: i + 1 + "号",
-  },
+    sales: Math.floor(Math.random() * 400),
-  {
+    category: "总数",
-    type: "2月",
+  });
-    sales: 52,
+  data.push({
-  },
+    type: i + 1 + "号",
-  {
+    sales: Math.floor(Math.random() * 200),
-    type: "3月",
+    category: "华为渠道",
-    sales: 61,
+  });
-  },
+  data.push({
-  {
+    type: i + 1 + "号",
-    type: "4月",
+    sales: Math.floor(Math.random() * 200),
-    sales: 145,
+    category: "小米渠道",
-  },
+  });
-  {
+}
-    type: "5月",
-    sales: 48,
-  },
-  {
-    type: "6月",
-    sales: 38,
-  },
-  {
-    type: "7月",
-    sales: 38,
-  },
-  {
-    type: "8月",
-    sales: 38,
-  },
-  {
-    type: "9月",
-    sales: 38,
-  },
-  {
-    type: "10月",
-    sales: 38,
-  },
-  {
-    type: "11月",
-    sales: 38,
-  },
-  {
-    type: "12月",
-    sales: 38,
-  },
-];
 
 let timer = ref();
 
 onMounted(() => {
   document.getElementById("WorkOrderStatisticsContainer")!.innerHTML = "";
-  const columnPlot = new Column("WorkOrderStatisticsContainer", {
+  const line = new Line("WorkOrderStatisticsContainer", {
     data,
     xField: "type",
     yField: "sales",
-    height: 250,
+    seriesField: "category",
-    label: {
+    yAxis: {
-      // 可手动配置 label 数据标签位置
-      position: "middle", // 'top', 'bottom', 'middle',
-      // 配置样式
-      style: {
-        fill: "#FFFFFF",
-        opacity: 0.6,
-      },
-    },
-    xAxis: {
       label: {
-        autoHide: true,
+        // 数值格式化为千分位
-        autoRotate: false,
+        formatter: (v) =>
-      },
+          `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
-    },
-    meta: {
-      type: {
-        alias: "月份",
-      },
-      sales: {
-        alias: "处理工单量",
       },
     },
+    color: ["#1979C9", "#D62A0D", "#FAA219"],
   });
 
-  columnPlot.render();
+  line.render();
-
-  //动态改变数据
-  timer.value = setInterval(() => {
-    var data = [];
-    for (var i = 1; i < 13; i++) {
-      data.push({
-        type: i + "月",
-        sales: Math.floor(Math.random() * 200),
-      });
-    }
-    columnPlot.changeData(data);
-  }, 2 * 1000);
-});
-
-onBeforeUnmount(() => {
-  clearInterval(timer.value);
 });
 </script>
 
 <template>
-  <a-card title="近一年设备销售量" :bordered="false" :headStyle="{ 'border-bottom': 0 }">
+  <a-card
+    title="近一月活跃人数统计"
+    :bordered="false"
+    :headStyle="{ 'border-bottom': 0 }"
+  >
     <template #extra>
-      <a href="https://g2plot.antv.vision/zh/docs/manual/getting-started" target="_black">组件地址</a>
+      <a
+        href="https://g2plot.antv.vision/zh/docs/manual/getting-started"
+        target="_black"
+        >更多数据</a
+      >
     </template>
     <div id="WorkOrderStatisticsContainer"></div>
   </a-card>