wukai
/
twin-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <style type="text/css">
        .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;
        }
    </style>
</head>
<body onclick="clearEle();" style="background-color: rgba(41,85,137,0.7);height: 724px;">
<div class="content" style="height: 100%;">
    <div id="echartTrend">
        <div class="trend-title">出入库趋势-最近1月</div>
        <div style="width: 100%;height:80%;"></div>
    </div>
    <div style="height: 60%;">
        <div id="inlist">
            <div class="trend-title" style="height: 15%">当日入库明细</div>
            <div style="width: 100%;height:85%;overflow-y: auto;"></div>
        </div>
        <div id="outlist">
            <div class="trend-title" style="height: 15%">当日出库明细</div>
            <div style="width: 100%;height:85%;overflow-y: auto;"></div>
        </div>
    </div>
</div>
<script type="text/html" id="detail_tpl">
    <table style="width: 100%;">
        <thead>
            <tr style="text-align: center;font-weight: bold;">
                <td width="30%">物料类型</td>
                <td width="40%">单据类型</td>
                <td width="30%">数量 ({{unitname}})</td>
            </tr>
        </thead>
        <tbody>
            {{each data}}
            <tr>
                <td width="30%">{{$value.clas}}</td>
                <td width="40%">{{$value.type}}</td>
                <td width="30%">{{$value.total}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>
</body>
</html>
<!-- 引入qwebchannel.js、Player.js、PlayerUtils.js -->
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script src="global.js"></script>
<script type="text/javascript" src="template.js"></script>

<script>
    var type = window.location.hash.replace('#','');
    var unit = parent.StockTypeUnit[type];
    $(document).ready(function () {
        var datalist = (parent.FacStockData[type]['trend']);
        showTrend(datalist);
        var indatalst = parent.FacStockData[type]['in'];
        var outdatalst = parent.FacStockData[type]['out'];
        var inhtml = template('detail_tpl',{data:indatalst,unitname:unit});
        var outhtml = template('detail_tpl',{data:outdatalst,unitname:unit});
        $("#inlist>div:last").html(inhtml);
        $("#outlist>div:last").html(outhtml);
    });
    function showTrend(data){
            var t = $("#echartTrend>div:last");
            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: '#F0F275', // 这里设置折线的颜色
                            lineStyle: {
                                color: '#F0F27580' // 这里同时设置线头的颜色
                            }
                        }
                    },
                });
                v_series.push({
                    name: "出库",
                    type: 'line',
                    smooth: true,
                    //symbol: 'none',
                    data: outNum,
                    itemStyle: {
                        normal: {
                            color: '#FFFFFF', // 这里设置折线的颜色
                            lineStyle: {
                                color: '#FFFFFF80' // 这里同时设置线头的颜色
                            }
                        }
                    },
                });
                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+`）<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(t[0]);
                echartsEle.setOption(opt);
            }
    }
    function clearEle(){
        
    }

</script>