销售发货看板

duhe

2024-08-09 dd21cb2e28e5450a5a6309cabc055c29fbababb4

销售发货看板

 WebTM/Properties/PublishProfiles/JFTM.pubxml.user

@@ -18,10 +18,10 @@
      <publishTime>01/28/2016 14:22:24</publishTime>
    </File>
    <File Include="bin/WebTM.dll">
      <publishTime>08/08/2024 16:00:53</publishTime>
      <publishTime>08/09/2024 14:12:34</publishTime>
    </File>
    <File Include="bin/WebTM.pdb">
      <publishTime>08/08/2024 16:00:53</publishTime>
      <publishTime>08/09/2024 14:12:34</publishTime>
    </File>
    <File Include="HtmlPage1.html">
      <publishTime>04/11/2023 16:34:42</publishTime>
@@ -4875,7 +4875,7 @@
      <publishTime>08/01/2024 11:12:03</publishTime>
    </File>
    <File Include="views/看板/销售发货/KB_XSFH.html">
      <publishTime>08/07/2024 16:11:14</publishTime>
      <publishTime>08/09/2024 15:37:09</publishTime>
    </File>
    <File Include="views/系统管理/会计期间/Xt_AccountPeriodAdd.html">
      <publishTime>06/13/2024 14:47:29</publishTime>

 WebTM/views/¿´°å/ÏúÊÛ·¢»õ/KB_XSFH.html

@@ -95,7 +95,7 @@
            min-height: 1px;
            padding-right: 0px;
            padding-left: 0px;
            height:45vh;
            height:30vh;
            width:100%;
        }
        .col-sm-8 {
@@ -111,10 +111,11 @@
        }

        #mychart1,
        #mychart2{
        #mychart2,
        #mychart3 {
            width: 100%;
            border: none;
            height: 40vh;
            height: 25vh;
        }

        #cList {
@@ -202,25 +203,29 @@
            background: black;
            background-color: black;
        }
        


        /*设置表头字体样式*/
        th .layui-table-cell {
            height: 48px;
            line-height: 48px;
            height: 60px;
            line-height: 20px;
            text-align: center;
            font-family: é»‘体;
            color: #09d1ea;
            font-size: 20px;
            font-size: 16px;
        }
        /*设置表体字体样式*/
        td .layui-table-cell {
            height: 32px;
            line-height: 32px;
            height: 60px;
            line-height: 20px;
            text-align: center;
            font-family: Arial;
            color: #a6a8ae;
            font-size: 14px;
            font-size: 12px;
        }

        .layui-table-box tbody tr {
            height: 60px; /* è®¾ç½®ä½ æƒ³è¦çš„行高 */
        }
        
         /*隐藏table滚动条，但仍可滚动*/ 
@@ -286,6 +291,9 @@
                    </div>
                    <!--图表-->
                    <div class="col-sm-4 right">
                        <div class="col-sm-6">
                            <div id="mychart3"></div>
                        </div>
                        <div class="col-sm-6">
                            <div id="mychart1"></div>
                        </div>
@@ -447,50 +455,75 @@
                    //, limit: 50
                    , limit: Number.MAX_VALUE // æ•°æ®è¡¨æ ¼é»˜è®¤å…¨éƒ¨æ˜¾ç¤º
                    //, limits: [50, 500, 5000, 20000]
                    , done: function (res, curr, count) {                                   //res为表格的所有数据，curr为当前页码，count为数据总条数
                        //遍历表格所有行
                        res.data.forEach(function (item, index) {                           //这里item和index分别对应每行的数据和data-index索引值
                            if (item.进度 == "未发货") {
                                //获取第i行元素
                                var tr = $(".layui-table tr[data-index=" + index + "]");
                                //tr.css("background", "rgb(249,116,116,0.8)");
                    //, done: function (res, curr, count) {                                   //res为表格的所有数据，curr为当前页码，count为数据总条数
                    //    //遍历表格所有行
                    //    res.data.forEach(function (item, index) {                           //这里item和index分别对应每行的数据和data-index索引值
                    //        if (item.进度 == "未发货") {
                    //            //获取第i行元素
                    //            var tr = $(".layui-table tr[data-index=" + index + "]");
                    //            //tr.css("background", "rgb(249,116,116,0.8)");

                                //获取第i行元素中的单元格元素列表，遍历单元格元素并设置单元格边框宽度为0
                                var td = tr.children('td'); //获取tr下所有的td
                                for (var i = 0; i < td.length; i++) {
                                    var td_temp = td.eq(i);
                                    var div = td_temp.children("div");
                                    div.eq(0).css("color", "red");
                                }
                            } else if (item.进度 == "待发货") {
                                //获取第i行元素
                                var tr = $(".layui-table tr[data-index=" + index + "]");
                                //tr.css("background", "rgb(249,116,116,0.8)");
                    //            //获取第i行元素中的单元格元素列表，遍历单元格元素并设置单元格边框宽度为0
                    //            var td = tr.children('td'); //获取tr下所有的td
                    //            for (var i = 0; i < td.length; i++) {
                    //                var td_temp = td.eq(i);
                    //                var div = td_temp.children("div");
                    //                div.eq(0).css("color", "red");
                    //            }
                    //        } else if (item.进度 == "待发货") {
                    //            //获取第i行元素
                    //            var tr = $(".layui-table tr[data-index=" + index + "]");
                    //            //tr.css("background", "rgb(249,116,116,0.8)");

                                //获取第i行元素中的单元格元素列表，遍历单元格元素并设置单元格边框宽度为0
                                var td = tr.children('td'); //获取tr下所有的td
                                for (var i = 0; i < td.length; i++) {
                                    var td_temp = td.eq(i);
                                    var div = td_temp.children("div");
                                    div.eq(0).css("color", "yellow");
                                }
                            } else if (item.进度 == "已发货") {
                                //获取第i行元素
                                var tr = $(".layui-table tr[data-index=" + index + "]");
                                //tr.css("background", "rgb(249,116,116,0.8)");
                    //            //获取第i行元素中的单元格元素列表，遍历单元格元素并设置单元格边框宽度为0
                    //            var td = tr.children('td'); //获取tr下所有的td
                    //            for (var i = 0; i < td.length; i++) {
                    //                var td_temp = td.eq(i);
                    //                var div = td_temp.children("div");
                    //                div.eq(0).css("color", "yellow");
                    //            }
                    //        } else if (item.进度 == "已发货") {
                    //            //获取第i行元素
                    //            var tr = $(".layui-table tr[data-index=" + index + "]");
                    //            //tr.css("background", "rgb(249,116,116,0.8)");

                                //获取第i行元素中的单元格元素列表，遍历单元格元素并设置单元格边框宽度为0
                                var td = tr.children('td'); //获取tr下所有的td
                                for (var i = 0; i < td.length; i++) {
                                    var td_temp = td.eq(i);
                                    var div = td_temp.children("div");
                                    div.eq(0).css("color", "green");
                                }
                            }
                    //            //获取第i行元素中的单元格元素列表，遍历单元格元素并设置单元格边框宽度为0
                    //            var td = tr.children('td'); //获取tr下所有的td
                    //            for (var i = 0; i < td.length; i++) {
                    //                var td_temp = td.eq(i);
                    //                var div = td_temp.children("div");
                    //                div.eq(0).css("color", "green");
                    //            }
                    //        }

                        })
                    }
                    //    })
                    //}
                }

                var col = [
                    {
                        field: "发货日期", title: "发货日期", width: 95, align: 'center', totalRow: true,
                        templet: function (d) {
                            return '<div style="height:60px;line-height:20px;white-space: normal;overflow-warp:normal;vertical-align: middle;">' + d.发货日期 == null ? "" : layui.util.toDateString(d.发货日期, 'yyyy-MM-dd') + '</div>';
                        }
                    },
                    { field: "发货单号", title: "发货单号", align: 'center', totalRow: true, width: 110 },
                    { field: "物料代码", title: "物料代码", align: 'center', totalRow: true, width: 110 },
                    {
                        field: '物料名称', title: '物料名称', width: 190,
                        templet: function (d) {
                            return '<div style="height:60px;line-height:12px;font-size:10;white-space: normal;overflow-warp:normal;vertical-align: middle;">' + d.物料名称 + '</div>';
                        }
                    },
                    { field: "库存", title: "库存", align: 'center', totalRow: true, width: 70 },
                    { field: "应发数量", title: "应发", align: 'center', totalRow: true, width: 70 },
                    { field: "实发数量", title: "实发", align: 'center', totalRow: true, width: 70 },
                    { field: "收货仓库", title: "收货仓库", align: 'center', totalRow: true, width: 120 },
                    { field: "进度", title: "进度", align: 'center', totalRow: true, width: 100 },
                ]

                option.cols = [col];
                option1.cols = [col];
            }
            //#endregion

@@ -551,10 +584,10 @@
                            }

                            //为表格渲染参数设置列数据、行数据
                            option.cols = [col];
                            //option.cols = [col];
                            option.data = data_1;

                            option1.cols = [col];
                            //option1.cols = [col];
                            option1.data = data_2;

                            //渲染表格
@@ -672,6 +705,9 @@

                var data2 = dataList[3];
                set_Graphics_mychart2(data2);

                var data3 = dataList[4];
                set_Graphics_mychart3(data3);
            }
            //#endregion

@@ -1048,6 +1084,224 @@
            }
            ////#endregion
            //#endregion

            //#region åŠ è½½å›¾è¡¨3
            function set_Graphics_mychart3(data) {
                //#region ã€æŸ±çŠ¶å›¾ã€‘
                var app = {};
                var chartDom = document.getElementById('mychart3');
                var myChart = echarts.init(chartDom);
                var option_mychart;

                //#region [柱状图布局样式]
                const posList = [
                    'left',
                    'right',
                    'top',
                    'bottom',
                    'inside',
                    'insideTop',
                    'insideLeft',
                    'insideRight',
                    'insideBottom',
                    'insideTopLeft',
                    'insideTopRight',
                    'insideBottomLeft',
                    'insideBottomRight'
                ];
                app.configParameters = {
                    rotate: {
                        min: -90,
                        max: 90
                    },
                    align: {
                        options: {
                            left: 'left',
                            center: 'center',
                            right: 'right'
                        }
                    },
                    verticalAlign: {
                        options: {
                            top: 'top',
                            middle: 'middle',
                            bottom: 'bottom'
                        }
                    },
                    position: {
                        options: posList.reduce(function (map, pos) {
                            map[pos] = pos;
                            return map;
                        }, {})
                    },
                    distance: {
                        min: 0,
                        max: 100
                    }
                };
                app.config = {
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle',
                    position: 'insideBottom',
                    distance: 15,
                    onChange: function () {
                        const labelOption = {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        };
                        myChart.setOption({
                            series: [
                                {
                                    label: labelOption
                                },
                                {
                                    label: labelOption
                                },
                                {
                                    label: labelOption
                                },
                                {
                                    label: labelOption
                                }
                            ]
                        });
                    }
                };
                const labelOption = {
                    show: true,
                    position: 'top',
                    textStyle: {
                        //color: '#333', // æ ‡ç­¾å­—体颜色
                        fontSize: 8, // æ ‡ç­¾å­—体大小
                        //fontWeight: 'bold', // æ ‡ç­¾å­—体加粗
                        //fontStyle: 'italic', // æ ‡ç­¾å­—体斜体
                        //fontFamily: 'Arial' // æ ‡ç­¾å­—体
                    }
                };
                const labelOption1 = {
                    show: true,
                    position: 'right',
                    textStyle: {
                        //color: '#333', // æ ‡ç­¾å­—体颜色
                        fontSize: 8, // æ ‡ç­¾å­—体大小
                        //fontWeight: 'bold', // æ ‡ç­¾å­—体加粗
                        //fontStyle: 'italic', // æ ‡ç­¾å­—体斜体
                        //fontFamily: 'Arial' // æ ‡ç­¾å­—体
                    }
                }
                //#endregion

                //柱状图绑定数据
                var HMaterNameList = [];//x轴：物料列表
                var HQtyList = [];      //y轴：数量列表
                var HQtyList1 = [];      //y轴：数量列表
                for (let i = 0; i < data.length; i++) {
                    HMaterNameList.push(data[i].日期);
                    HQtyList.push(data[i].发货单数);
                    HQtyList1.push(data[i].出库单数);
                }

                option_mychart = {
                    title: {
                        text: '近七天发货通知单与销售出库单对比',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ["单数"]
                        , show: false
                    },
                    //toolbox: {                            //工具栏
                    //    show: true,
                    //    orient: 'vertical',
                    //    left: 'right',
                    //    top: 'center',
                    //    feature: {
                    //        mark: { show: true },
                    //        dataView: { show: true, readOnly: false },
                    //        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                    //        restore: { show: true },
                    //        saveAsImage: { show: true }
                    //    }
                    //},
                    grid:
                    {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        //top: '10%',
                        containLabel: true
                    },
                    xAxis: [                                //设置x轴坐标
                        {
                            type: 'category',
                            axisTick: { show: true },
                            data: HMaterNameList,
                            axisLabel: {
                                formatter: function (value) {
                                    var temp = "";
                                    var temp_len = 5;
                                    for (var i = 0; i < value.length; i = i + temp_len) {
                                        if (i + temp_len <= value.length) {
                                            temp += '\n' + value.slice(i, i + temp_len)
                                        } else {
                                            temp += '\n' + value.slice(i);
                                        }
                                    }

                                    return temp;

                                    // ä½¿ç”¨ '\n' å®žçŽ°æ¢è¡Œ
                                    //return value.length > 5 ? value.slice(0, 5) + '\n' + value.slice(5) : value;
                                },
                                width: 30 // è®¾ç½®åˆ»åº¦æ ‡ç­¾çš„宽度，超过这个宽度会自动换行
                            }
                        }
                    ],
                    yAxis: [                                //设置y轴数据类型
                        {
                            type: 'value'
                        }
                    ],
                    series: [                               //设置y轴数据
                        {
                            name: '发货单数',
                            type: 'bar',
                            barWidth: 10,
                            barGap: 0,
                            label: labelOption,
                            emphasis: {
                                focus: 'series'
                            },
                            data: HQtyList
                        },
                        {
                            name: '出库单数',
                            type: 'bar',
                            barWidth: 10,
                            barGap: 0,
                            label: labelOption1,
                            emphasis: {
                                focus: 'series'
                            },
                            data: HQtyList1
                        }
                    ]
                };
                option_mychart && myChart.setOption(option_mychart);
                //#endregion
            }
            ////#endregion
            //#endregion
        });
    </script>
</body>