修改首页
This commit is contained in:
zpc
parent
85d7953634
commit
db78ab0a66
|
|
@ -441,81 +441,37 @@ class Tools {
|
|||
fileInput.click();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 图片上传
|
||||
* @param imgaeId imageId
|
||||
* @param imageType 图片类型
|
||||
* @param modelName 模块
|
||||
* @returns
|
||||
*/
|
||||
static async imageFileUpload(
|
||||
imgaeId: number,
|
||||
imageType: number,
|
||||
modelName?: string,
|
||||
): Promise<any> {
|
||||
//#region 创建文件选择器
|
||||
const file = await this.selectFile();
|
||||
if (file == null) {
|
||||
return null;
|
||||
}
|
||||
return await this.imageUpdate(file, imgaeId, imageType, modelName);
|
||||
//#endregion
|
||||
static PlayGameStatus = [
|
||||
{ value: 0, name: "初始化", color: "#00FF00" },
|
||||
{ value: 1, name: "启动游戏", color: "#00FF00" },
|
||||
{ value: 2, name: "排队中", color: "#00FF00" },
|
||||
{ value: 3, name: "排队成功", color: "#00FF00" },
|
||||
{ value: 4, name: "取消排队", color: "#FFFF00" },
|
||||
{ value: 5, name: "排队掉线", color: "#FFFF00" },
|
||||
{ value: 6, name: "排队掉线结束游戏", color: "red" },
|
||||
{ value: 10, name: "游戏启动失败", color: "red" },
|
||||
{ value: 11, name: "用户钻石不足", color: "red" },
|
||||
{ value: 12, name: "用户游玩时钻石不足", color: "red" },
|
||||
{ value: 13, name: "用户游玩时钻石不足退出游戏", color: "red" },
|
||||
{ value: 14, name: "排队异常", color: "red" },
|
||||
{ value: 15, name: "用户扣款错误", color: "red" },
|
||||
{ value: 20, name: "开始游戏", color: "#00FF00" },
|
||||
{ value: 21, name: "游戏中", color: "#00FF00" },
|
||||
{ value: 22, name: "用户主动结束游戏", color: "#00FF00" },
|
||||
{ value: 23, name: "游戏掉线", color: "#FFFF00" },
|
||||
{ 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;
|
||||
// }
|
||||
// //#endregion
|
||||
// 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;
|
||||
static getStatusNameByColor(value: number) {
|
||||
const status = this.PlayGameStatus.find(status => status.value === value);
|
||||
return status ? status.color : null; // 如果找到对应的状态，返回其名称，否则返回null
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 href="https://gitee.com/hzy6/HzyAdmin/stargazers" target="_black">
|
||||
<img
|
||||
src="https://gitee.com/hzy6/HzyAdmin/widgets/widget_card.svg?colors=eae9d7,2e2f29,272822,484a45,eae9d7,747571"
|
||||
style="width: 100%; height: 320px"/>
|
||||
</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 :xs="24" :sm="24" :md="12" :lg="16" :xl="12">
|
||||
<UserSignStatistics />
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="24" :md="12" :lg="16" :xl="12">
|
||||
<PlayGameTimeStatistics />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- PlayGameTimeStatistics -->
|
||||
</div>
|
||||
<!-- 抽屉 -->
|
||||
<a-drawer v-model:open="visible" title="更多" placement="right" width="90%">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -2,76 +2,115 @@
|
|||
import { ref, onBeforeUnmount } from "vue";
|
||||
import AppIcon from "@/core/components/AppIcon.vue";
|
||||
|
||||
let value1 = ref(12);
|
||||
let value2 = ref(26);
|
||||
let value3 = ref(107);
|
||||
let value4 = ref(5);
|
||||
let iconSize = ref(60);
|
||||
let timer = ref<NodeJS.Timer | null>(null);
|
||||
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);
|
||||
interface CardData {
|
||||
title: string;
|
||||
unit: string;
|
||||
value: number;
|
||||
icon: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
});
|
||||
const iconSize = ref(60);
|
||||
const timer = ref<NodeJS.Timer | null>(null);
|
||||
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-card :bordered="false" hoverable :style="{ background: '#5b8ff9' }" :bodyStyle="{ padding: 0 }">
|
||||
<a-col
|
||||
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">
|
||||
<AppIcon name="DashboardOutlined" :size="iconSize" style="color: #fff" />
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" class="icon">
|
||||
<AppIcon :name="card.icon" :size="iconSize" style="color: #fff" />
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
|
||||
<h3 style="color: #fff">CPU占用率</h3>
|
||||
<h2 style="color: #fff">{{ value1 }}%</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 :xs="24" :sm="24" :md="24" :lg="24" :xl="14">
|
||||
<h3 style="color: #fff">{{ card.title }}</h3>
|
||||
<h2 style="color: #fff">{{ card.value }}{{ card.unit }}</h2>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
{
|
||||
type: "1月",
|
||||
sales: 38,
|
||||
},
|
||||
{
|
||||
type: "2月",
|
||||
sales: 52,
|
||||
},
|
||||
{
|
||||
type: "3月",
|
||||
sales: 61,
|
||||
},
|
||||
{
|
||||
type: "4月",
|
||||
sales: 145,
|
||||
},
|
||||
{
|
||||
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 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("WorkOrderStatisticsContainer")!.innerHTML = "";
|
||||
const columnPlot = new Column("WorkOrderStatisticsContainer", {
|
||||
const line = new Line("WorkOrderStatisticsContainer", {
|
||||
data,
|
||||
xField: "type",
|
||||
yField: "sales",
|
||||
height: 250,
|
||||
label: {
|
||||
// 可手动配置 label 数据标签位置
|
||||
position: "middle", // 'top', 'bottom', 'middle',
|
||||
// 配置样式
|
||||
style: {
|
||||
fill: "#FFFFFF",
|
||||
opacity: 0.6,
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
seriesField: "category",
|
||||
yAxis: {
|
||||
label: {
|
||||
autoHide: true,
|
||||
autoRotate: false,
|
||||
},
|
||||
},
|
||||
meta: {
|
||||
type: {
|
||||
alias: "月份",
|
||||
},
|
||||
sales: {
|
||||
alias: "处理工单量",
|
||||
// 数值格式化为千分位
|
||||
formatter: (v) =>
|
||||
`${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
|
||||
},
|
||||
},
|
||||
color: ["#1979C9", "#D62A0D", "#FAA219"],
|
||||
});
|
||||
|
||||
columnPlot.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);
|
||||
line.render();
|
||||
});
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user