WEBUI/WMS.BZWeb/Areas/KLHCManager/Views/QueryCell/Index.js

var Frm;
var F_CONTRGRPNO = "";
var F_NOS = "";
var leftorright = 0;
var bootstrap = function ($, learun) {
    Frm = learun;
    function httpHeaders() {
        var headers = {
            token: top.$.lcoreUser.token
        }
        return headers;
    }
    var page = {
        init: function () {
            page.bind();

            //page.getChartData();
        },
        bind: function () {
            //// 仓库与区域多选
            //$('#locWareHouse').lrselect({
            //    url: top.$.rootUrl + '/BaseManager/BaseWarehouse/GetCheckWWTreeByLocation',
            //    maxHeight: 180,
            //    allowSearch: true
            //});
            //$('#locWareHouse').lrselectSet("WTP");
            ////仓库选择事件，改变行数据（最大值和最小值)
            //$("#locWareHouse").change(function () {

            //    var houseCode = $(this).lrselectGet();
            //    page.getLine(houseCode);
            //});
            // 加载 
            $('#SRMName').lrselect({
                url: top.$.rootUrl + '/FJManager/QueryCell/GetSelectSRMNameList',

                maxHeight: 180,
                allowSearch: false
            });
            $("#SRMName").change(function () {
                var srmname = $(this).lrselectGet();
                page.getChartData(srmname);
            });
            $('#lr_refresh').on('click', function () {
                var srmname = $("#SRMName").lrselectGet();
                page.getChartData(srmname);
            });

            $('#lr_left').on('click', function () {
                leftorright = 0;
                $(this).addClass('active');
                $('#lr_right').removeClass('active');
                var srmname = $("#SRMName").lrselectGet();
                page.getChartData(srmname);
            });

            $('#lr_right').on('click', function () {
                leftorright = 1;
                $(this).addClass('active');
                $('#lr_left').removeClass('active');
                var srmname = $("#SRMName").lrselectGet();
                page.getChartData(srmname);
            });


            //弹框关闭事件
            $("#closeModal").click(function () {
                for (let i = 2; i < 4; i++) {
                    $("#loc" + i).css("display", "none");
                }
                // 关闭时将选中的托盘号清空
                F_CONTRGRPNO = "";
                F_NOS = "";
                $("#myModal").hide();
            });

        },

        getChartData: function (srmname) {
            if (!srmname || srmname == '') {
                learun.alert.error('请选择堆垛机！');
                return false;
            }
            $.ajax({
                type: 'post',
                headers: httpHeaders(),
                data: { query: JSON.stringify({ SCRel: srmname }) },
                dataType: 'json',
                url: top.$.rootUrl + '/FJManager/QueryCell/GetLocViewList',
                //url: top.$.rootUrl + '/FJManager/QueryCell/GetLocList?houserNo=' + houseNo + "&line=" + line,               

                success: function (response) {
                    var res = response;
                    //page.showChart(eval(res.data.json), res.data.y + 1, res.data.x + 1); //加载储位展示图(坐标加1，显示需要)
                    if (leftorright == 0) {
                        page.showChart(res.data.LeftJson, res.data.Y + 1, res.data.X + 1); //加载储位展示图(坐标加1，显示需要)
                    }
                    else {
                        page.showChart(res.data.RightJson, res.data.Y + 1, res.data.X + 1); //加载储位展示图(坐标加1，显示需要)

                    }


                }
            });

            //$.post("GetLocList", { houserNo: houseNo, line: line }, function (response) {
            //    var res = eval("(" + response + ")");
            //    showChart(eval("(" + res.data.json + ")"), res.data.y + 1, res.data.x + 1); //加载储位展示图(坐标加1，显示需要)
            //})
        },

        showChart: function (data, layerList, slotCnt) {
            var chart = echarts.init(document.getElementById("echart"));
            if (layerList > 1 && slotCnt > 1) {
                page.setChart(data, layerList, slotCnt);//Echart所需要的设置
                chart.setOption(option);//Echart所需要的设置
                chart.off('click');//点击事件之前，要释放之前的点击事件
                chart.on('click', function (params) {//点击事件

                    if (params.data.LocationStateName == "有货") {
                        Frm.layerForm({
                            id: 'form',
                            title: '货位明细',
                            url: top.$.rootUrl + '/FJManager/QueryCell/Form?keyValue=' + params.data.ContGrpId,
                            width: 1100,
                            height: 500,
                            btn: ['关闭'],
                            //callBack: function (id) {
                            //    return top[id].acceptClick(refreshGirdData);
                            //}
                        });
                    }
                });
            }
            else {
                //没有图标数据的时候，默认展示一个空的表格
                var dataHide = [
                    {
                        name: "b1",
                        id: 31,
                        hashMode: "设备",
                        value: [0, 0, 0, 0],
                        itemStyle: { normal: { color: "#715881" } }
                    }];
                page.setChart(dataHide, 0, 0);
                chart.setOption(option);
            }
        },
        setChart: function (data, layerList, slotCnt) {
            function renderItem(params, api) {  
                
                var start = api.coord([api.value(2), api.value(1)]);
                if (params.dataIndex != 0 && data[params.dataIndex].Depth == 2)
                {
                    start[1] = start[1] + 20;
                }
                //if (params.dataIndex != 0 && data[params.dataIndex].Depth == 3)
                //{
                //    start[1] = start[1]- 120;
                //}

                //if (params.dataIndex!=0 && params.dataIndex % 2 == 0) {
                //    start[1] = api.coord([api.value(1), api.value(1)]) ;
                //}           
                //if (params.dataIndex != 0 && params.dataIndex % 3 == 0) {
                //    start[1] = api.coord([api.value(2), api.value(2)]);
                //}

                var rectShape = echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: start[1],                    
                    width: api.size([100, 1])[0] * ((api.value(3) - api.value(2)) / 100),
                    height: api.size([100, 1])[1] * ((api.value(1) - api.value(0))/2 )
                } , {
                    x: params.coordSys.x,
                    y: params.coordSys.y,                    
                    width: params.coordSys.width,
                    height: params.coordSys.height
                });
         
                return (
                    rectShape && {
                        type: "rect",
                        //transition: ['shape'],
                        shape: rectShape,
                        style: api.style({
                            //text: `${data[params.dataIndex].name}`
                        })
                    }
                );
            }
            option = {
                tooltip: {
                    formatter: function (params) {
                        return (
                            //params.marker  +
                            // params.name +
                            //  ": " +
                            //  params.value[2] +
                            // "~" +
                            // params.value[3] + '<br/>' + params.marker + `hashMode:${params.data.hashMode}`
                            // params.marker + params.data.STATE + "<br/>"
                            //  + params.marker + params.data.LocationStateName + "<br/>"
                            //  + params.marker + params.data.F_COL + "行" + params.data.F_LAYER + "列" + params.data.F_DEPTH + "层" //光标悬浮显示内容
                            params.marker + params.data.LocationStateName + '<br/>' + params.marker + params.data.Name
                        );
                    }
                },
                title: {
                    //   text: "Profile",
                    left: "center"
                },
                grid: {
                    y:20,
                   height: 600
                },

                xAxis: {
                    min: 0,
                    splitNumber: slotCnt,
                    max: slotCnt
                },
                yAxis: [{
                    position: "left",
                    max: layerList,
                    min: 0,
                    splitNumber: layerList
                }
                    //,
                    //{
                    //    position: "left",
                    //    data: layerList
                    //}
                ],
                series: [{
                    type: "custom",
                    itemStyle: {
                        //normal: {
                        //    opacity: 1
                        //},
                        //borderColor: 'red',
                        //borderWidth: 3
                    },

                    renderItem: renderItem,
                    //encode: {
                    //    x: [1, 2],
                    //    y: 0
                    //},
                    data: data,
                }
               ]
            };

        }
    };
    page.init();
};