From ac45194a5ff830a0f355a76a202e1d4f1d15a35b Mon Sep 17 00:00:00 2001
From: Junjie <540245094@qq.com>
Date: 星期四, 26 九月 2024 13:07:15 +0800
Subject: [PATCH] #
---
zy-asrs-admin/src/views/HomeView.vue | 126 ++++++++++++++++++++++++++++++++++++++++-
1 files changed, 121 insertions(+), 5 deletions(-)
diff --git a/zy-asrs-admin/src/views/HomeView.vue b/zy-asrs-admin/src/views/HomeView.vue
index 42278e5..db2e818 100644
--- a/zy-asrs-admin/src/views/HomeView.vue
+++ b/zy-asrs-admin/src/views/HomeView.vue
@@ -1,5 +1,5 @@
<script setup>
-import { getCurrentInstance, ref, onMounted } from 'vue';
+import { getCurrentInstance, ref, onMounted, reactive } from 'vue';
import { get, post } from '@/utils/request.js'
import * as echarts from "echarts";
const context = getCurrentInstance()?.appContext.config.globalProperties;
@@ -107,8 +107,6 @@
]
}
- console.log(lineOptions);
-
chartLine.setOption(lineOptions);
}
@@ -129,10 +127,46 @@
})
}
+const information = reactive({
+ inCount: 0,
+ outCount: 0,
+ totalCount: 0,
+ matCount: 0,
+});
+function getInformation() {
+ post('/api/charts/information', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let data = result.data;
+ information.inCount = data.inCount;
+ information.outCount = data.outCount;
+ information.totalCount = data.totalCount;
+ information.matCount = data.matCount;
+ }
+ })
+}
+
+const informationTop = reactive({
+ topIn: [],
+ topOut: [],
+});
+function getInformationTop() {
+ post('/api/charts/information/top', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let data = result.data;
+ informationTop.topIn = data.topIn;
+ informationTop.topOut = data.topOut;
+ }
+ })
+}
+
onMounted(() => {
initChart()
getPieOptions()
getLineOptions()
+ getInformation()
+ getInformationTop()
})
</script>
@@ -145,8 +179,90 @@
<template>
<div style="display: flex;">
- <div ref="chartPieContainer" style="width: 49%;height: 400px;"></div>
- <div ref="chartLineContainer" style="width: 49%;height: 400px;"></div>
+ <div style="width: 24%;margin-right: 20px;">
+ <a-card>
+ <a-statistic title="浠婃棩鍏ュ嚭搴�" :value="information.totalCount" :value-style="{ color: '#3f8600' }"
+ style="margin-right: 50px">
+ <template #prefix>
+ <!-- <arrow-up-outlined /> -->
+ </template>
+ </a-statistic>
+ </a-card>
+ </div>
+ <div style="width: 24%;margin-right: 20px;">
+ <a-card>
+ <a-statistic title="浠婃棩鍏ュ簱" :value="information.inCount" :value-style="{ color: '#3f8600' }"
+ style="margin-right: 50px">
+ <template #prefix>
+ <!-- <arrow-up-outlined /> -->
+ </template>
+ </a-statistic>
+ </a-card>
+ </div>
+ <div style="width: 24%;margin-right: 20px;">
+ <a-card>
+ <a-statistic title="浠婃棩鍑哄簱" :value="information.outCount" :value-style="{ color: '#3f8600' }"
+ style="margin-right: 50px">
+ <template #prefix>
+ <!-- <arrow-up-outlined /> -->
+ </template>
+ </a-statistic>
+ </a-card>
+ </div>
+ <div style="width: 24%;margin-right: 20px;">
+ <a-card>
+ <a-statistic title="鍟嗗搧鎬绘暟" :value="information.matCount" :value-style="{ color: '#3f8600' }"
+ style="margin-right: 50px">
+ <template #prefix>
+ <!-- <arrow-up-outlined /> -->
+ </template>
+ </a-statistic>
+ </a-card>
+ </div>
+ </div>
+ <div style="display: flex;margin-top: 20px;">
+ <div style="width: 49%;margin-right: 20px;">
+ <a-card title="浠婃棩鍏ュ簱Top10">
+ <div v-if="informationTop.topIn.length == 0">
+ <a-empty />
+ </div>
+ <div v-else v-for="(item, index) in informationTop.topIn" :key="index"
+ style="display: flex;justify-content: space-between;margin-top: 10px;">
+ <div>{{ item.matnr }} - {{ item.maktx }}</div>
+ <div>
+ <a-tag v-if="index == 0" color="#87d068">{{ item.count }}</a-tag>
+ <a-tag v-else color="#2db7f5">{{ item.count }}</a-tag>
+ </div>
+ </div>
+ </a-card>
+ </div>
+ <div style="width: 49%;margin-right: 20px;">
+ <a-card title="浠婃棩鍑哄簱Top10">
+ <div v-if="informationTop.topOut.length == 0">
+ <a-empty />
+ </div>
+ <div v-else v-for="(item, index) in informationTop.topOut" :key="index"
+ style="display: flex;justify-content: space-between;margin-top: 10px;">
+ <div>{{ item.matnr }} - {{ item.maktx }}</div>
+ <div>
+ <a-tag v-if="index == 0" color="#87d068">{{ item.count }}</a-tag>
+ <a-tag v-else color="#2db7f5">{{ item.count }}</a-tag>
+ </div>
+ </div>
+ </a-card>
+ </div>
+ </div>
+ <div style="display: flex;margin-top: 20px;">
+ <div style="width: 49%;margin-right: 20px;">
+ <a-card>
+ <div ref="chartPieContainer" style="width: 100%;height: 400px;"></div>
+ </a-card>
+ </div>
+ <div style="width: 49%;">
+ <a-card>
+ <div ref="chartLineContainer" style="width: 90%;height: 400px;"></div>
+ </a-card>
+ </div>
<!-- <EChartView ref="chartChild2" /> -->
</div>
</template>
--
Gitblit v1.9.1