From c635d78b479510ebe2556a420948effcd30a0731 Mon Sep 17 00:00:00 2001
From: skyouc
Date: 星期六, 21 十二月 2024 18:40:43 +0800
Subject: [PATCH] 新建德森项目分支
---
zy-asrs-admin/src/views/HomeView.vue | 536 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 268 insertions(+), 268 deletions(-)
diff --git a/zy-asrs-admin/src/views/HomeView.vue b/zy-asrs-admin/src/views/HomeView.vue
index db2e818..dfc37d1 100644
--- a/zy-asrs-admin/src/views/HomeView.vue
+++ b/zy-asrs-admin/src/views/HomeView.vue
@@ -1,268 +1,268 @@
-<script setup>
-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;
-
-let chartPie = null;
-const chartPieContainer = ref(null);
-let chartLine = null;
-const chartLineContainer = ref(null);
-
-function getPieOptions() {
- post('/api/charts/loc/use', {}).then(resp => {
- let result = resp.data;
- if (result.code == 200) {
- let data = result.data;
-
- let pieOptions = {
- title: {
- text: '搴撲綅浣跨敤姣斾緥',
- left: 'center',
- top: '0%'
- },
- tooltip: {
- trigger: 'item',
- top: '0%'
- },
- grid: {
- top: '0%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- // legend: {
- // orient: 'vertical',
- // left: 'left'
- // },
- series: [
- {
- type: 'pie',
- radius: '70%',
- data: data,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- }
-
- chartPie.setOption(pieOptions);
-
- }
- })
-}
-
-function getLineOptions() {
- post('/api/charts/loc/line', {}).then(resp => {
- let result = resp.data;
- if (result.code == 200) {
- let data = result.data;
-
- let lineOptions = {
- title: {
- text: '鏃ュ嚭鍏ュ簱鏁伴噺',
- left: 'center',
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['鍏ュ簱鏁伴噺', '鍑哄簱鏁伴噺'],
- top: '10%'
- },
- grid: {
- top: '20%',
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: data.days
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '鍏ュ簱鏁伴噺',
- type: 'line',
- data: data.in.value,
- smooth: true
- },
- {
- name: '鍑哄簱鏁伴噺',
- type: 'line',
- data: data.out.value,
- smooth: true
- }
- ]
- }
-
- chartLine.setOption(lineOptions);
-
- }
- })
-}
-
-function initChart() {
- chartPie = echarts.init(chartPieContainer.value);
- chartPie.setOption({
- type: Object,
- required: true
- })
-
- chartLine = echarts.init(chartLineContainer.value);
- chartLine.setOption({
- type: Object,
- required: true
- })
-}
-
-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>
-
-<script>
-export default {
- name: '涓婚〉'
-}
-</script>
-
-<template>
- <div style="display: flex;">
- <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>
+<script setup>
+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;
+
+let chartPie = null;
+const chartPieContainer = ref(null);
+let chartLine = null;
+const chartLineContainer = ref(null);
+
+function getPieOptions() {
+ post('/api/charts/loc/use', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let data = result.data;
+
+ let pieOptions = {
+ title: {
+ text: '搴撲綅浣跨敤姣斾緥',
+ left: 'center',
+ top: '0%'
+ },
+ tooltip: {
+ trigger: 'item',
+ top: '0%'
+ },
+ grid: {
+ top: '0%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ // legend: {
+ // orient: 'vertical',
+ // left: 'left'
+ // },
+ series: [
+ {
+ type: 'pie',
+ radius: '70%',
+ data: data,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+ }
+
+ chartPie.setOption(pieOptions);
+
+ }
+ })
+}
+
+function getLineOptions() {
+ post('/api/charts/loc/line', {}).then(resp => {
+ let result = resp.data;
+ if (result.code == 200) {
+ let data = result.data;
+
+ let lineOptions = {
+ title: {
+ text: '鏃ュ嚭鍏ュ簱鏁伴噺',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['鍏ュ簱鏁伴噺', '鍑哄簱鏁伴噺'],
+ top: '10%'
+ },
+ grid: {
+ top: '20%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: data.days
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: '鍏ュ簱鏁伴噺',
+ type: 'line',
+ data: data.in.value,
+ smooth: true
+ },
+ {
+ name: '鍑哄簱鏁伴噺',
+ type: 'line',
+ data: data.out.value,
+ smooth: true
+ }
+ ]
+ }
+
+ chartLine.setOption(lineOptions);
+
+ }
+ })
+}
+
+function initChart() {
+ chartPie = echarts.init(chartPieContainer.value);
+ chartPie.setOption({
+ type: Object,
+ required: true
+ })
+
+ chartLine = echarts.init(chartLineContainer.value);
+ chartLine.setOption({
+ type: Object,
+ required: true
+ })
+}
+
+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>
+
+<script>
+export default {
+ name: '涓婚〉'
+}
+</script>
+
+<template>
+ <div style="display: flex;">
+ <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