twin2025-mod/src/pages/stock/stock_trend.vue

<template>
    <div class="content" style="height: 724px;">
        <div id="echartTrend">
            <div class="trend-title">出入库趋势-最近1月</div>
            <div style="width: 100%;height:80%;" ref="echartTrendLast"></div>
        </div>
        <div style="height: 53%;position: relative;margin-top: 4%;background: #ffffff3d;">
            <div style="position: absolute;" id="totalStock"><b>{{ stockData.curr }}</b><div style="line-height: 0px;font-size: 12px;">当前库存</div></div>
            <div id="inlist">
                <div class="trend-title" style="height: 18%"><span>当日入库明细</span><div style="line-height: 18px;    text-align: left;font-size: 16px;">当日总入库库存：<b>{{ stockData['d-in'] }}</b></div></div>
                <div style="width: 100%;height:79%;overflow-y: auto;">
                    <table style="width: 100%;">
                        <thead>
                            <tr style="text-align: center;font-weight: bold;">
                                <td width="30%">物料类型</td>
                                <td width="40%">单据类型</td>
                                <td width="30%">数量 ({{unit}})</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in stockData['in']">
                                <td width="30%">{{item.clas}}</td>
                                <td width="40%">{{item.type}}</td>
                                <td width="30%">{{item.total}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="outlist">
                <div class="trend-title" style="height: 18%"><span>当日出库明细</span><div style="line-height: 18px;    text-align: right;font-size: 16px;">当日总出库库存：<b>{{stockData['d-out']}}</b></div></div>
                <div style="width: 100%;height:79%;overflow-y: auto;">
                    <table style="width: 100%;">
                        <thead>
                            <tr style="text-align: center;font-weight: bold;">
                                <td width="30%">物料类型</td>
                                <td width="40%">单据类型</td>
                                <td width="30%">数量 ({{unit}})</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in stockData['out']">
                                <td width="30%">{{item.clas}}</td>
                                <td width="40%">{{item.type}}</td>
                                <td width="30%">{{item.total}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
@import '../../styles/main.css';
</style>
<style>
    body{
        overflow: hidden;
    }
        .content>div{
            float: left;
            width: 100%;
            color: #fff;
        }
        #echartTrend{            
            height: 40%;
        }
        #inlist,#outlist{
            width: 48%;
            height: 98%;
            margin: 1%;
            float: left;
        }
        .trend-title{
            width: 100%;height:20%;text-align: center;line-height: 40px;font-weight: bold;font-size: 20px;
        }
        #totalStock{
            position: absolute;
            left: 50%;
            top: -13%;
            width: 100px;
            height: 100px;
            line-height: 70px;
            font-size:16px;
            text-align: center;
            border: 2px solid rgb(39, 230, 255);
            border-radius: 50%;
            background: #154360 ;
            margin-left: -50px;
            color:rgb(39, 230, 255);
        }
</style>
<script>
    import { ref,onMounted,watch } from 'vue';
    import api from "@/api/system";
    import * as echarts from 'echarts';
    import { ElMessage } from 'element-plus';
    export default {
        props:{

        },
        setup(props,{emit}) {
            const echartTrendLast = ref(null);
            let stockData = ref({trend:[],"in":[],"out":[],"curr":0,"d-in":0,"d-out":0});
            let unit = ref('')
            function showTrend(data){
                    var inNum = [],outNum=[];
                    var times = [];
                    var v_series = [];
                    for (var i = 0; i < data.length; i++) {                
                        var tv = data[i]['date'].split("-")
                        times.push(tv[1] + "-" + tv[2])
                        inNum.push(data[i]['inNum']);
                        outNum.push(data[i]['outNum']);
                    }            
                    if (times.length == 0) {
                        //t.parent().hide();
                    } else {
                        v_series.push({
                            name: "入库",
                            type: 'line',
                            smooth: true,
                            //symbol: 'none',
                            data: inNum,
                            itemStyle: {
                                normal: {
                                    color: 'yellow', // 这里设置折线的颜色
                                    lineStyle: {
                                        color: 'yellow' // 这里同时设置线头的颜色
                                    }
                                }
                            },
                        });
                        v_series.push({
                            name: "出库",
                            type: 'line',
                            smooth: true,
                            //symbol: 'none',
                            data: outNum,
                            itemStyle: {
                                normal: {
                                    color: 'red', // 这里设置折线的颜色
                                    lineStyle: {
                                        color: 'red' // 这里同时设置线头的颜色
                                    }
                                }
                            },
                        });
                        var opt = {
                            title: {
                                show: false, //不显示标题
                                text: '',
                                textStyle: {
                                    color: "rgb(89, 151, 229)",
                                    fontWeight: "bold"
                                },
                                top: "0px",
                                left: "30px"
                            },
                            tooltip: {
                                trigger: 'axis',
                                backgroundColor:'rgba(41,85,137,0.7)',
                                textStyle: {
                                    // 设置字体颜色
                                    color: '#fff'
                                },
                                formatter: function (params) {
                                    let xv='';
                                    let result = '';
                                    params.forEach(function (item) {
                                        xv=`${item.name}<br/>`;
                                        result += ` ${item.marker} ${item.value}（`+unit.value+`）<br/>`;
                                    });
                                    return xv+result;
                                }
                            },
                            legend: {
                                show: true, //不显示图例
                                inactiveColor: "#04417A",
                                data: ["入库","出库"],
                                textStyle: {color: "#fff"},
                                top: "-5px"
                            },
                            grid: {
                                left: '1%',
                                right: '1%',
                                bottom: '5%',
                                top: '10%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    rotate: 45,
                                    color: "#fff"
                                },
                                data: times
                            },
                            yAxis: {
                                type: 'value',
                                nameTextStyle: {
                                    color: "#fff"
                                },
                                axisLabel: {
                                    color: "rgb(203,215,235)"
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "#7DA7CD",
                                        type: "dashed",
                                        width: 1
                                    }
                                }
                            },
                            series: v_series
                        };
                        var echartsEle = echarts.init(echartTrendLast.value);
                        echartsEle.setOption(opt);
                    }
            }
            onMounted(()=>{
                let typecode = window.location.hash.replace("#","");
                unit.value = StockTypeUnit[typecode]
                let msg = ElMessage({
                    message:"正在加载数据",
                    type:"info",
                    duration:0,
                })
                api.GetFacData().then((res)=>{       
                    msg.close();             
                    if (res == null || res[typecode]==null) {
                        return
                    }
                    stockData.value = res[typecode];
                    var datalist = res[typecode]['trend'];
                    if(datalist!=null) showTrend(datalist);
                    //var indatalst = res[typecode]['in'];
                    //var outdatalst = res[typecode]['out'];
                }).catch(()=>{
                    ElMessage({
                        message:"数据获取失败！",
                        type:"error",
                    });
                });
            });
            return{
                echartTrendLast,
                stockData,
                unit,
            }
        }
    }
</script>