|
<template>
|
<el-card style="border-radius: 0" :body-style="{ padding: '1rem 2rem' }" v-loading="loading">
|
<template #header>
|
<div style="display: flex;align-items: center;">
|
<div style="font-weight: bold; font-size: 1.2rem">物料来源统计</div>
|
<div style="flex: 1;display: flex;justify-content: space-around;margin-left: 3rem;">
|
<template v-for="i in goodsSourceList" :key="i.value">
|
<div @click="handleSelect(i.value)" :class="i.value == id ? 'selected' : ''" class="no-select">{{ i.label }}
|
</div>
|
</template>
|
</div>
|
</div>
|
</template>
|
<div style="height: 4rem;background-color: #f5f5f5;display: flex;box-sizing: border-box;padding: 0.6rem;">
|
<div
|
style="border-right: 1px solid #ccc;flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
|
<div style="color: black;font-weight: bold;text-align: center;">{{ info.sumCount }}</div>
|
<div style="color: black;text-align: center;">数据总量</div>
|
</div>
|
<div style="border-right: 1px solid #ccc;flex: 1;">
|
<div style="color: black;font-weight: bold;text-align: center;">{{ info.monthAddCount }}</div>
|
<div style="color: black;text-align: center;">新增量</div>
|
</div>
|
<div style="flex: 1;">
|
<div style="color: black;font-weight: bold;text-align: center;">{{ info.printCount }}</div>
|
<div style="color: black;text-align: center;">打印总量</div>
|
</div>
|
</div>
|
<div ref="chartDom" style="height: 21rem; width: 100%"></div>
|
</el-card>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
import { goodsSourceList } from "../../utils";
|
// 引入echarts
|
import * as echarts from "echarts";
|
import { GetGoodsSourceDistApi } from "../../api/dashboard";
|
import { ElLoading } from 'element-plus'
|
const loading=ref(true)
|
const id = ref(1)
|
const xData = ref([])
|
const monthAddCountData = ref([])
|
const monthSumCountData= ref([])
|
const printSumCountData = ref([])
|
const info = ref({
|
monthAddCount: 0,
|
printCount: 0,
|
sourceName: "0",
|
sumCount: 0
|
})
|
|
|
|
const handleSelect = (data) => {
|
id.value = data
|
GetGoodsSourceDistApi(id.value).then(res => {
|
info.value = res.data.sourceObj[0]
|
xData.value = res.data.monthGoodsObj.map(i=>i.monthNow)
|
monthAddCountData.value = res.data.monthGoodsObj.map(i=>i.monthAddCount)
|
monthSumCountData.value = res.data.monthGoodsObj.map(i=>i.monthSumCount)
|
printSumCountData.value = res.data.monthGoodsObj.map(i=>i.printSumCount)
|
initChart()
|
})
|
}
|
|
// 创建一个响应式引用来保存DOM元素
|
const chartDom = ref(null);
|
let chartInstance = null;
|
|
|
|
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
|
onMounted(async () => {
|
await GetGoodsSourceDistApi(id.value).then(res => {
|
info.value = res.data.sourceObj[0]
|
xData.value = res.data.monthGoodsObj.map(i=>i.monthNow)
|
monthAddCountData.value = res.data.monthGoodsObj.map(i=>i.monthAddCount)
|
monthSumCountData.value = res.data.monthGoodsObj.map(i=>i.monthSumCount)
|
printSumCountData.value = res.data.monthGoodsObj.map(i=>i.printSumCount)
|
})
|
await nextTick(); // 确保DOM已经渲染完成
|
initChart();
|
});
|
|
const initChart = () => {
|
chartInstance = echarts.init(chartDom.value);
|
const option = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: ['数据总量', '新增量', '打印总量'],
|
// right: "0%",
|
top: "2%",
|
center: "center",
|
},
|
grid: {
|
left: '0%',
|
right: '4%',
|
bottom: '0%',
|
top: "15%",
|
containLabel: true
|
},
|
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: xData.value
|
},
|
yAxis: {
|
type: 'value',
|
minInterval:1,
|
},
|
series: [
|
{
|
name: '数据总量',
|
type: 'line',
|
stack: 'Total',
|
smooth: true,
|
color: "#0099ff",
|
data: monthSumCountData.value
|
},
|
{
|
name: '新增量',
|
type: 'line',
|
smooth: true,
|
color: "#009966",
|
data: monthAddCountData.value
|
},
|
{
|
name: '打印总量',
|
type: 'line',
|
smooth: true,
|
color: "#ff9900",
|
data: printSumCountData.value
|
}
|
]
|
};
|
chartInstance.setOption(option);
|
nextTick(() => {
|
loading.value = false
|
})
|
}
|
|
// 销毁ECharts实例
|
onUnmounted(() => {
|
if (chartInstance != null && chartInstance.dispose) {
|
chartInstance.dispose();
|
}
|
});
|
|
//窗口大小变化重绘echart
|
window.onresize = function () {
|
if (chartInstance != null && chartInstance.resize) {
|
chartInstance.resize();
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.no-select {
|
text-align: center;
|
color: black;
|
font-size: 1.1rem;
|
cursor: pointer;
|
flex: 1;
|
padding: 0.1rem 0;
|
transition: all 0.3s;
|
}
|
|
.selected {
|
background-color: #105b84;
|
color: white;
|
}
|
</style>
|
