<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>
|
