首页

liuying

2024-12-10 fd067b408ae97f16c13b0e25b9c870d23f4d0ba3

首页

 LA24030_LuLiPackageLine_Web/src/views/home/index.vue

@@ -86,15 +86,38 @@
import { wmsStockPassMap, wmsHomePageQuery, wmsHomePlaceQuery, wmsTransitionDiagramQuery } from '/@/api/main/inventoryWarning/inventoryWarning';
import type { TabsPaneContext } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { getStorageView } from '/@/api/main/ReportCenter/storageView';
const router = useRouter();
// 接口数据
const loadingwms = ref(false);
const pieChartRef = ref(null);
let myChart = null;
let countList = ref([
    {
        type: 0,
        name: '总库位',
        value: 0,
    },
    {
        type: 1,
        name: '有货库位',
        value: 0,
    },
    {
        type: 2,
        name: '无货库位',
        value: 0,
    },
    {
        type: 3,
        name: '锁定库位',
        value: 0,
    },
]);
const optionPie = {
    title: {
        text: '缓存岛统计',
        left: 'center',
        text: '缓存岛库存',
        // left: 'center',
        textStyle: {
            color: '#333',
        },
@@ -104,19 +127,20 @@
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        left: 'right',
    },
    series: [
        {
            name: '库位状态',
            type: 'pie',
            radius: ['50%', '70%'],
            data: [
                { name: '总库位360', value: 120 },
                { name: '有货库位', value: 90 },
                { name: '无货库位', value: 60 },
                { name: '锁定库位', value: 30 },
            ],
            radius: ['35%', '55%'],
            data: [],
            // data: [
            //     { name: '总库位360', value: 120 },
            //     { name: '有货库位', value: 90 },
            //     { name: '无货库位', value: 60 },
            //     { name: '锁定库位', value: 30 },
            // ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
@@ -125,22 +149,53 @@
                },
            },
            label: {
                formatter: '{b}: {c} ({d}%)',
                // formatter: '{b}: {c} ({d}%)',
                formatter: '{b}: {c}',
            },
        },
    ],
};

onMounted(() => {
    nextTick(() => {
    nextTick(async () => {


        var res = await getStorageView();
        debugger
        if (res.data.code == 200) {
            const { data } = res;
            const result = data.result;
            // 统计
            var hasMaterialCount = result.filter((item: any) => item.stockStatus == 1).length || 0;
            var noMaterialCount = result.length - hasMaterialCount;
            countList.value = [
                {
                    type: '',
                    name: '总库位',
                    value: result.length || 0,
                },
                {
                    type: 1,
                    name: '有货库位',
                    value: hasMaterialCount || 0,
                },
                {
                    type: 18,
                    name: '无货库位',
                    value: noMaterialCount || 0,
                },
                {
                    type: 2,
                    name: '锁定库位',
                    value: result.filter((item: any) => item.stockStatus == 2).length || 0,
                },
            ];
        optionPie.series[0].data = countList.value;
        myChart = echarts.init(document.getElementById('homePieChart') as HTMLDivElement);
        const data = [
            { name: '总库位360', value: 120 },
            { name: '有货库位', value: 90 },
            { name: '无货库位', value: 60 },
            { name: '锁定库位', value: 30 },
        ];
        myChart.setOption(optionPie);

	
        }
    });
});

@@ -678,30 +733,30 @@
        initEchartsResizeFun();
    }
);
// 监听 pinia 中是否开启深色主题
watch(
    () => themeConfig.value.isIsDark,
    (isIsDark) => {
        nextTick(() => {
            state.charts.theme = isIsDark ? 'dark' : '';
            state.charts.bgColor = isIsDark ? 'transparent' : '';
            state.charts.color = isIsDark ? '#dadada' : '#303133';
            setTimeout(() => {
                initLineChart(null, null, null);
            }, 500);
            setTimeout(() => {
                initPieChart(null);
            }, 700);
            // setTimeout(() => {
            //     initBarChart(null,null,null,null);
            // }, 1000);
        });
    },
    {
        deep: true,
        immediate: true,
    }
);
// // 监听 pinia 中是否开启深色主题
// watch(
//     () => themeConfig.value.isIsDark,
//     (isIsDark) => {
//         nextTick(() => {
//             state.charts.theme = isIsDark ? 'dark' : '';
//             state.charts.bgColor = isIsDark ? 'transparent' : '';
//             state.charts.color = isIsDark ? '#dadada' : '#303133';
//             setTimeout(() => {
//                 initLineChart(null, null, null);
//             }, 500);
//             setTimeout(() => {
//                 initPieChart(null);
//             }, 700);
//             // setTimeout(() => {
//             //     initBarChart(null,null,null,null);
//             // }, 1000);
//         });
//     },
//     {
//         deep: true,
//         immediate: true,
//     }
// );
</script>

<style scoped lang="scss">