NouYouLocationMonitor.js 24 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461
layui.config({
    base: "/js/"
}).use(['layer', 'jquery', 'form', 'table', 'Universal'], function () {
    var layer = layui.layer,
        $ = layui.jquery,
        table = layui.table,
        Universal = layui.Universal,
        form = layui.form;

    var x = 50;
    var y = 10;
    var width = 40;
    var height = 40;

    //初始加载
    $(document).ready(function () {
        form.render();
        Init();
        //setInterval(Speak, 10000);
    });

    function Init() {
        var xop = 300;
        var add = 100;
        xop += add;
        $('#canvas_op').drawText({
            layer: true,
            fillStyle: '#000',
            strokeWidth: 2,
            x: xop, y: 25,
            fontSize: '20pt',
            fontFamily: 'Verdana, sans-serif',
            text: '空仓位:'
        })
        xop += add - 20;
        $('#canvas_op').drawRect({
            layer: true,
            strokeStyle: '#000',
            strokeWidth: 1,
            x: xop, y: 25,
            width: 50,
            height: 50
        });
        $('#canvas_op').drawText({
            layer: true,
            fillStyle: "#000",
            x: xop, y: 25,
            fontSize: 30,
            text: "空"
        });
        xop += add + 20;
        $('#canvas_op').drawText({
            layer: true,
            fillStyle: '#4A4AFF',
            strokeWidth: 2,
            x: xop, y: 25,
            fontSize: '20pt',
            fontFamily: 'Verdana, sans-serif',
            text: '空托盘:'
        })
        xop += add - 20;
        $('#canvas_op').drawRect({
            layer: true,
            fillStyle: '#4A4AFF',
            x: xop, y: 25,
            width: 50,
            height: 50
        });
        xop += add + 20;
        $('#canvas_op').drawText({
            layer: true,
            fillStyle: '#00EC00',
            strokeWidth: 2,
            x: xop, y: 25,
            fontSize: '20pt',
            fontFamily: 'Verdana, sans-serif',
            text: '有货托盘:'
        })
        xop += add - 10;
        $('#canvas_op').drawRect({
            layer: true,
            fillStyle: '#00EC00',
            x: xop, y: 25,
            width: 50,
            height: 50
        });
        xop += add + 20;
        $('#canvas_op').drawText({
            layer: true,
            fillStyle: '#7E354D',
            strokeWidth: 2,
            x: xop, y: 25,
            fontSize: '20pt',
            fontFamily: 'Verdana, sans-serif',
            text: '任务中:'
        })
        xop += add - 20;
        $('#canvas_op').drawRect({
            layer: true,
            fillStyle: '#7E354D',
            x: xop, y: 25,
            width: 50,
            height: 50
        });
    }

    function GetRoadWay(stk, line) {
        $.ajax({
            async: false,
            url: "/monitor/NouYouLocationMonitor/GetLocData",
            type: "post",
            data: { roadway: stk, line: line },
            dataType: "json",
            success: function (data) {
                $('#canvas_num').drawText({
                    layer: true,
                    fillStyle: '#000',
                    strokeWidth: 2,
                    x: 800, y: 25,
                    fontSize: '20pt',
                    fontFamily: 'Verdana, sans-serif',
                    text: data.data
                })
            }
        });

        $.ajax({
            async: false,
            url: "/monitor/NouYouLocationMonitor/GetRoadway",
            type: "post",
            data: { roadway: stk, line: line },
            dataType: "json",
            success: function (data) {
                var arr = data.data;
                var ymax = (arr[0].Layer + 1) * height;
                arr.forEach(function (e) {
                    if (e.Row == 1) {
                        $('#canvas_location').drawText({
                            layer: true,
                            fillStyle: "#000",
                            x: x, y: ymax - (y + height * e.Layer),
                            fontSize: 20,
                            text: e.Layer
                        });
                    }

                    if (e.Layer == 1) {
                        $('#canvas_location').drawText({
                            layer: true,
                            fillStyle: "#000",
                            x: x + width * e.Row, y: ymax,
                            fontSize: 20,
                            text: e.Row
                        });
                    }

                    if (e.Status != "empty") {
                        var color = '#ffffff'
                        if (e.Status == "some") {
                            color = '#00EC00'
                        } else if (e.Status == "emptycontainer") {
                            color = '#4A4AFF'
                        } else if (e.Status == "lock") {
                            color = '#7E354D'
                        }

                        if ((stk == 5 || stk == 6)) {
                            if (e.Row % 2 == 1 || e.Row == 1) {
                                $('#canvas_location').drawRect({
                                    layer: true,
                                    strokeStyle: '#000',
                                    strokeWidth: 1,
                                    x: x + ((width * e.Row) + (width * (e.Row + 1))) / 2, y: ymax - (y + height * e.Layer),
                                    width: width * 2,
                                    height: height
                                });
                                if (e.Type == "s_2") {
                                    $('#canvas_location').drawRect({
                                        layer: true,
                                        name: e.Code,
                                        fillStyle: color,
                                        x: x + ((width * e.Row) + (width * (e.Row + 1))) / 2, y: ymax - (y + height * e.Layer),
                                        width: width + width / 2,
                                        height: height / 2,
                                        click: function (res) {
                                            layer.open({
                                                title: '物料信息',
                                                type: 1,
                                                skin: 'layui-layer-rim',
                                                area: ['1000px', '480px'],
                                                content: $('#inv'),
                                                btnAlign: 'c',
                                                maxmin: true,
                                                minStack: false, //最小化不堆叠在左下角
                                                id: 'page1', //定义 ID,防止重复弹出
                                                min: function (layero, index) {
                                                    layer.msg('阻止了默认的最小化');
                                                    layer.style(index, { top: 'auto', bottom: 0 });
                                                    return false;
                                                }, success: function (layero, index) {
                                                    table.reload('mainList', {
                                                        url: "/monitor/NouYouLocationMonitor/GetInve"
                                                        , where: { code: res.name }
                                                        , height: 400
                                                        , method: "post"
                                                        , page: true
                                                        , text: { none: "无数据" }
                                                    });
                                                },
                                                btn: ['确定', '关闭'],
                                                yes: function (index) {
                                                    var checkStatus = table.checkStatus('mainList');
                                                    console.log(checkStatus);
                                                    var count = checkStatus.data.length;//选中的行数
                                                    var data1 = checkStatus.data;
                                                    if (count < 1) {
                                                        layer.alert("请至少选择一条数据", { icon: 5, shade: 0.4, time: 1000 });
                                                        return;
                                                    }
                                                    $("#selectLoad").empty();
                                                    var list;
                                                    $.ajax({
                                                        async: true,
                                                        type: "post",
                                                        url: "/receipt/ReceiptHeader/LoadStation",
                                                        data: { list: data1 },
                                                        dataType: "json",
                                                        success: function (result) {
                                                            if (result.code == 200) {
                                                                list = result.data;
                                                                var html;
                                                                var IsExistence = 0;
                                                                for (var i = 0; i < list.length; i++) {
                                                                    var a = list[i].Code;
                                                                    if (a.indexOf("BufferStationD0") == 0 && IsExistence == 0) {
                                                                        IsExistence = 1;
                                                                        html += "<option class='select_Station' value='" + list[i].Code + "'>" + list[i].Name + "</option>";
                                                                    }
                                                                    else if (a.indexOf("BufferStationD0") == 0 && IsExistence == 1) {
                                                                        continue;
                                                                    } else if (a == "ProductStationC01" || a == "ProductStationC04" || a == "ProductStationC05" || a == "ProductStationC08" || a == "ExitStationD01") {
                                                                        continue;
                                                                    } else if (a == "ExitStationY01") {
                                                                        html += "<option class='select_Station' value='" + list[i].Code + "'>排版房</option>";
                                                                        continue;
                                                                    }
                                                                    else {
                                                                        html += "<option class='select_Station' value='" + list[i].Code + "'>" + list[i].Name + "</option>";
                                                                    }
                                                                }
                                                                $("#selectLoad").append(html);
                                                                layer.open({
                                                                    type: 1,
                                                                    //  skin: 'layui-layer-molv',
                                                                    btnAlign: 'c',
                                                                    moveType: 1, //拖拽模式,0或者1
                                                                    title: "选择站台并出库", //不显示标题
                                                                    area: ['600px', '400px'], //宽高
                                                                    content: $('#tanchuang'), //捕获的元素
                                                                    scrollbar: true,
                                                                    btn: ['出库', '关闭'],
                                                                    yes: function (index_1, layero) {
                                                                        $.ajax({
                                                                            url: "/inventory/inventory/GoodsOut",
                                                                            type: "POST",
                                                                            data: { Table_entitys: data1, Station: $("#selectLoad").val() },
                                                                            dataType: "json",
                                                                            success: function (result) {
                                                                                if (result.Code == 200) {
                                                                                    layer.msg("出库任务创建成功!", { icon: 6, shade: 0.4, time: 1000 });
                                                                                    layer.close(index_1);
                                                                                    mainList.mainList();
                                                                                } else {
                                                                                    layer.alert(result.Message, { icon: 5, shadeClose: true, title: "错误信息" });
                                                                                }
                                                                            },
                                                                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                                                                layer.alert(errorThrown, { icon: 2, title: '提示' });
                                                                            }
                                                                        });
                                                                    },
                                                                    cancel: function (index_1) {
                                                                        layer.close(index_1);
                                                                    }
                                                                });
                                                            } else {
                                                                layer.alert("请选择相同仓库类型的库存出库", { icon: 5, shadeClose: true, title: "错误信息" });
                                                            }
                                                        },
                                                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                                                            layer.alert(errorThrown, { icon: 2, title: '提示' });
                                                        }
                                                    });
                                                    //最后关闭弹出层
                                                    layer.close(index);
                                                },
                                                cancel: function () {
                                                    //右上角关闭回调
                                                }
                                            });
                                        }
                                    });
                                }
                            }

                            if (e.Type == "s_1") {
                                $('#canvas_location').drawRect({
                                    layer: true,
                                    name: e.Code,
                                    fillStyle: color,
                                    x: x + width * e.Row, y: ymax - (y + height * e.Layer),
                                    width: width / 2,
                                    height: height / 2,
                                    click: function (res) {
                                        layer.open({
                                            title: '物料信息',
                                            type: 1,
                                            skin: 'layui-layer-rim',
                                            area: ['1000px', '480px'],
                                            content: $('#inv'),
                                            btnAlign: 'c',
                                            maxmin: true,
                                            minStack: false, //最小化不堆叠在左下角
                                            id: 'page1', //定义 ID,防止重复弹出
                                            min: function (layero, index) {
                                                layer.msg('阻止了默认的最小化');
                                                layer.style(index, { top: 'auto', bottom: 0 });
                                                return false;
                                            }, success: function (layero, index) {
                                                table.reload('mainList', {
                                                    url: "/monitor/NouYouLocationMonitor/GetInve"
                                                    , where: { code: res.name }
                                                    , height: 400
                                                    , method: "post"
                                                    , page: true
                                                    , text: { none: "无数据" }
                                                });
                                            },
                                            btn: ['确定', '关闭'],
                                            yes: function (index) {

                                                //最后关闭弹出层
                                                layer.close(index);
                                            },
                                            cancel: function () {
                                                //右上角关闭回调
                                            }
                                        });
                                    }
                                });
                            }
                        } else {
                            $('#canvas_location').drawRect({
                                layer: true,
                                strokeStyle: '#000',
                                strokeWidth: 1,
                                x: x + width * e.Row, y: ymax - (y + height * e.Layer),
                                width: width,
                                height: height
                            });
                            $('#canvas_location').drawRect({
                                layer: true,
                                name: e.Code,
                                fillStyle: color,
                                x: x + width * e.Row, y: ymax - (y + height * e.Layer),
                                width: width / 2,
                                height: height / 2,
                                click: function (res) {
                                    layer.open({
                                        title: '物料信息',
                                        type: 1,
                                        skin: 'layui-layer-rim',
                                        area: ['1000px', '480px'],
                                        content: $('#inv'),
                                        btnAlign: 'c',
                                        maxmin: true,
                                        minStack: false, //最小化不堆叠在左下角
                                        id: 'page1', //定义 ID,防止重复弹出
                                        min: function (layero, index) {
                                            layer.msg('阻止了默认的最小化');
                                            layer.style(index, { top: 'auto', bottom: 0 });
                                            return false;
                                        }, success: function (layero, index) {
                                            table.reload('mainList', {
                                                url: "/monitor/NouYouLocationMonitor/GetInve"
                                                , where: { code: res.name }
                                                , height: 400
                                                , method: "post"
                                                , page: true
                                                , text: { none: "无数据" }
                                            });
                                        },
                                        btn: ['确定', '关闭'],
                                        yes: function (index) {

                                            //最后关闭弹出层
                                            layer.close(index);
                                        },
                                        cancel: function () {
                                            //右上角关闭回调
                                        }
                                    });
                                }
                            });
                        }
                    }
                    else {
                        $('#canvas_location').drawRect({
                            layer: true,
                            strokeStyle: '#000',
                            strokeWidth: 1,
                            x: x + width * e.Row, y: ymax - (y + height * e.Layer),
                            width: width,
                            height: height
                        });
                        $('#canvas_location').drawText({
                            layer: true,
                            fillStyle: "#000",
                            x: x + width * e.Row, y: ymax - (y + height * e.Layer),
                            fontSize: 20,
                            text: "空"
                        });
                    }
                });
            }
        });
    }

    form.on('select(roadway)', function (data) {
        //获取当前选中下拉项的 value值
        var value = data.value;
        $.ajax({
            async: false,
            url: "/monitor/NouYouLocationMonitor/GetLine",
            type: "post",
            data: { roadway: value },
            dataType: "json",
            success: function (res) {
                arr = res.data;
                var str;
                arr.forEach(function (e) {
                    str += "<option value=\"" + e.Key.Line + "\">" + e.Key.Line + "</option> ";
                });
                $("#line").html(str);
            }
        });
        form.render();
    });

    //监听提交
    form.on('submit(sv)', function (data) {
        $('#canvas_location').remove();
        $("#canvas_div").before("<canvas id=\"canvas_location\" width=\"3000\" height=\"800\"></canvas>");
        $('#canvas_num').remove();
        $("#canvas_num_div").before("<canvas id=\"canvas_num\" width=\"3000\" height=\"50\"></canvas>");
        GetRoadWay(data.field.roadway, data.field.line);
        return false;
    });
});