DS7/DSWeb/Areas/MvcShipping/Viewsjs/MsOpSeae/MsOpSeaeYZEdit.js

Ext.namespace('Shipping');

Shipping.MsOpSeaeYZEdit = function (config) {
    Ext.applyIf(this, config);
    this.initUIComponents();
    window.Shipping.MsOpSeaeYZEdit.superclass.constructor.call(this);
};
Ext.extend(Shipping.MsOpSeaeYZEdit, Ext.Panel, {
    OpStatus: 'add',
    titile: "COVER",
    initUIComponents: function () {
        this.serialNo = 0;
        this.bsno = '';
        this.mblno = '';

        this.storeBodyList = Ext.create('Ext.data.Store', {
            fields: [
                { name: 'MBLNO', type: 'string' },
                { name: 'YARD', type: 'string' },
                { name: 'CNTRNO', type: 'string' },
                { name: 'SEALNO', type: 'string' },
                { name: 'CTNALL', type: 'string' },
                { name: 'TXSJ', type: 'string' },
                { name: 'FCSJ', type: 'string' },
                { name: 'JGSJ', type: 'string' },
                { name: 'TRUCKNO', type: 'string' },
                { name: 'HZSJ', type: 'string' },
                { name: 'HGFX', type: 'string' },
                { name: 'ZCCY', type: 'string' },
                { name: 'DGSJ', type: 'string' },
                { name: 'THSJ', type: 'string' },
                { name: 'PKGS', type: 'string' },
                { name: 'KGS', type: 'string' },
                { name: 'CBM', type: 'string' }

            ],
            remoteSort: true,
            proxy: {
                type: 'ajax',
                url: '/MvcShipping/MsOpBill/GetCtnStatus2',
                reader: {
                    id: '',
                    root: 'data',
                    totalProperty: 'totalCount'
                }
            }
        });


        //#region 集装箱明细-表格
        this.gridList = new Ext.grid.GridPanel({
            store: this.storeBodyList,
            enableHdMenu: false,
            height: 200,
            region: 'north',
            loadMask: { msg: "数据加载中，请稍等..." },
            trackMouseOver: true,
            disableSelection: false,
            selType: 'cellmodel',
            columns: [ {
                dataIndex: "CTNALL",
                header: "箱型",
                width: 48
            }, {
                    dataIndex: 'CNTRNO',
                header: '箱号',
                width: 95
            }, {
                    dataIndex: "SEALNO",
                    header: "封号",
                width: 80
            }, {
                    dataIndex: "TXSJ",
                header: "提箱时间",
                    width: 130,
                    renderer: function (value, meta, record) {
                        return "<b style=\"color:#008000\">" + value +"</b>";
                    }
            }, {
                    dataIndex: "FCSJ",
                header: "返场时间",
                    width: 130,
                    renderer: function (value, meta, record) {
                        return "<b style=\"color:#008000\">" + value + "</b>";
                    }
                }, {
                    dataIndex: "TRUCKNO",
                    header: "车号",
                    width: 80
                }, {
                    dataIndex: "PKGS",
                    header: "件数",
                    width: 50
                }, {
                    dataIndex: "KGS",
                    header: "重量",
                    width: 80
                }, {
                    dataIndex: "CBM",
                    header: "尺码",
                    width: 50
                }]
        });
        //#endregion

        //this.panelTop = new Ext.Panel({
        //    layout: "border",
        //    region: "north",
        //    height: 40,
        //    items: [this.formHeadYZ]
        //});
        //#region 流程图

        this.mapPanel = new Ext.Panel({
            layout: "border",
            title: '海关码头信息',
            region: 'center',
            animate: true,
            frame: false
            ,
            html: "<canvas id=\"myCanvas\"  style=\"background-color:white;border:0px solid #000000;\" ></canvas>"
        });
        //#endregion
        this.panelBody = new Ext.Panel({
            title: '集装箱信息',
            layout: "border",
            height:1000,
            bodyPadding: 5,
            region: 'center',
            items: [this.gridList, this.mapPanel]
        });


        //#region 按钮Toolbar
        _thisYZ = this;
//        this.panelBtn = new Ext.Panel({
//            region: "north",
//            tbar: [{
//                text: '关闭',
//                tooltip: '关闭',
//  //              id: 'btnSend',
//                scope: this,
//                handler: function (menu, event) {
//                    window.close();
//                }
//            }, {
//                    text: '刷新',
//                    tooltip: '刷新',
////                    id: 'btnRefresh',
//                    scope: this,
//                    handler: function (menu, event) {
//                        //
//                        _thisYZ.InitData('', '');
//                    }
//                }]
//        }); //end 按钮Toolbar
        //#endregion

       

        //#region 框架结构

        //this.panelSeae = new Ext.Panel({
        //    layout: "border",
        //    region: 'center',
        //    animate: true,
        //    //           bodyStyle: 'overflow-x:hidden; overflow-y:scroll',
        //    frame: false,
        //    items: [this.panelBtn, this.panelTop, this.panelBody ]
        //});
        Ext.apply(this, {
            items: [this.panelBody]
        });

        this.LoadInit();
        //#endregion

        //#region 其他
 

        //#endregion
    }, //end initUIComponents

    //#region 加载事件


    LoadData: function (MBLNO, BSNO) {
        if (MBLNO == '' || BSNO == '') {
            return;
        }
        _thisYZ.bsno = BSNO;
        _thisYZ.mblno = MBLNO;

        Ext.Ajax.request({
            waitMsg: '正在查询主表数据...',
            url: '/MvcShipping/MsOpBill/GetOpStatusData',
            params: {
                bsno: _thisYZ.bsno
            },
            callback: function (options, success, response) {
                if (success) {
                    var result = Ext.JSON.decode(response.responseText);
                    if (!result.Success) {
                        Ext.Msg.show({
                            title: '提示',
                            msg: result.Message,
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                        return;
                    }

                    data = result.data;
                    _thisYZ.onDraw(data);
                } else {
                    Ext.MessageBox.alert('请求出现错误,请重试', response.responseText);
                }

            },
            scope: this
        });
        this.serialNo = 0;
        this.storeBodyList.load({
            params: { start: 0, limit: this.PageSize, mblno: MBLNO, bsno: BSNO },
            waitMsg: "正在查询数据...",
            scope: this
        });

    }, // end LoadDate
    //#endregion
    LoadInit: function () {

    },
    onDraw: function (data) {

        var c = document.getElementById("myCanvas");
        c.width = window.innerWidth;
        c.height = 160;
        var ctx = c.getContext("2d");

        var colorOK = "#008000";
        var colorNO = "#999999";
        var colorTIME = "#000000";
        var font = "9pt Calibri";
        var pYPCDX = 10;
        var pYPCDY = 40;
        var paddingY = 45;
        var paddingX = 160+40-50-50;
        var lineLength = 40;
        var lineY = 70;
        if (data.CangDanShiJian != undefined&&data.CangDanShiJian != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("舱单", pYPCDX, pYPCDY);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.CangDanShiJian, pYPCDX-10, pYPCDY+15);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("舱单", pYPCDX, pYPCDY);
        }

        if (data.YunDiShiJian != undefined &&data.YunDiShiJian != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("运抵", pYPCDX, pYPCDY + 20 + paddingY);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.YunDiShiJian, pYPCDX - 10, pYPCDY + 15 + paddingY+20);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("运抵", pYPCDX, pYPCDY + 20 + paddingY);
        }
        
        if (data.BaoGuanFangXing != undefined &&data.BaoGuanFangXing != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("报关放行", pYPCDX + paddingX, pYPCDY + paddingY / 2 + 10);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.BaoGuanFangXing, pYPCDX - 30 + paddingX+10, pYPCDY + 15 + paddingY/2+10);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("报关放行", pYPCDX + paddingX, pYPCDY + paddingY / 2 + 10);
        }

        if (data.ZhuangZaiFangXing != undefined &&data.ZhuangZaiFangXing != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("装载放行", pYPCDX + paddingX * 2, pYPCDY + paddingY / 2 + 10);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.ZhuangZaiFangXing, pYPCDX - 30 + paddingX * 2, pYPCDY + 15 + paddingY / 2 + 10);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("装载放行", pYPCDX + paddingX * 2, pYPCDY + paddingY / 2 + 10);
        }

        if (data.MaTouFangXing != undefined &&data.MaTouFangXing != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("码头放行", pYPCDX + paddingX * 3, pYPCDY + paddingY / 2 + 10);
            ctx.fillStyle = colorTIME;
           // ctx.fillText(data.MaTouFangXing, pYPCDX - 30 + paddingX * 3, pYPCDY + 15 + paddingY / 2 + 10);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("码头放行", pYPCDX + paddingX * 3, pYPCDY + paddingY / 2 + 10);
        }

        if (data.KaiChuanShiJian != undefined &&data.KaiChuanShiJian != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("开船", pYPCDX + paddingX * 4+10, pYPCDY + paddingY / 2 + 10);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.KaiChuanShiJian, pYPCDX - 30 + paddingX * 4, pYPCDY + 15 + paddingY / 2 + 10);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("开船", pYPCDX + paddingX * 4+10, pYPCDY + paddingY / 2 + 10);
        }

        if (data.ATA != undefined &&data.ATA != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("抵港", pYPCDX + paddingX * 5+10, pYPCDY + paddingY / 2 + 10);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.ATA, pYPCDX - 30 + paddingX * 5, pYPCDY + 15 + paddingY / 2 + 10);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("抵港", pYPCDX + paddingX * 5, pYPCDY + paddingY / 2 + 10);
        }

        if (data.MuDiGangTiXiang != undefined && data.MuDiGangTiXiang != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("目的港提箱", pYPCDX + paddingX * 6, pYPCDY + paddingY / 2 + 10);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.MuDiGangTiXiang, pYPCDX - 30 + paddingX * 6, pYPCDY + 15 + paddingY / 2 + 10);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("目的港提箱", pYPCDX + paddingX * 6-10, pYPCDY + paddingY / 2 + 10);
        }
        if (data.MuDiGangFanKong != undefined && data.MuDiGangFanKong != "") {
            ctx.fillStyle = colorOK;
            ctx.font = font;
            ctx.fillText("目的港返空", pYPCDX + paddingX * 7 + 10, pYPCDY + paddingY / 2 + 10);
            ctx.fillStyle = colorTIME;
            ctx.fillText(data.MuDiGangFanKong, pYPCDX - 30 + paddingX * 7, pYPCDY + 15 + paddingY / 2 + 10);
        } else {
            ctx.fillStyle = colorNO;
            ctx.font = font;
            ctx.fillText("目的港返空", pYPCDX + paddingX * 7, pYPCDY + paddingY / 2 + 10);
        }

        //连线
        //第一组斜线
        //取得线段的A点
        //第一根
        var a1x = pYPCDX  + 30;
        var a1y = lineY / 2;
        //取得线段的B点
        var b1x = a1x + lineLength-15;
        var b1y = lineY/2;
        ctx.setLineDash([3, 6]);
        ctx.beginPath();
        ctx.moveTo(a1x, a1y);
        ctx.lineTo(b1x, b1y);
        ctx.stroke();
        ctx.closePath();

        //第二根
        //取得线段的A点
        var a2x = a1x;
        var a2y = lineY / 2+65;

        //取得线段的B点
        var b2x = b1x;
        var b2y = a2y;

        ctx.beginPath();
        ctx.moveTo(a2x, a2y);
        ctx.lineTo(b2x, b2y);
        ctx.stroke();
        ctx.closePath();

        //第三根
        //取得线段的A点
        var a3x = b1x;
        var a3y = b1y;
        //取得线段的B点
        var b3x = b2x;
        var b3y = b2y;
        ctx.beginPath();
        ctx.moveTo(a3x, a3y);
        ctx.lineTo(b3x, b3y);
        ctx.stroke();
        ctx.closePath();

        //第四根
        var a4x = b1x;
        var a4y = (b2y - b1y) / 2 + b1y;
        //取得线段的B点
        var b4x = b1x+42;
        var b4y = a4y;
        ctx.beginPath();
        ctx.moveTo(a4x, a4y);
        ctx.lineTo(b4x, b4y);
        ctx.stroke();
        ctx.closePath();

        //剩下的直线
        for (var i = 0; i < 7; i++) {
            var ax = 0;
            var ay = 0;
            var bx = 0;
            var by = 0;
            if (i == 0) {
                continue;
            } else {
                //取得线段的A点
                 ax = pYPCDX + paddingX * i + 50;

                 ay = lineY;

                //取得线段的B点
                 bx = ax + lineLength;

                 by = ay;
            }
           

            ctx.beginPath();

            ctx.moveTo(ax, ay);

            ctx.lineTo(bx, by);

            ctx.stroke();

            ctx.closePath();

        }
    }
});


///获取QuertString

///绘制圆角矩形
///x,y,w,h =>x、y、宽、长
///r=>圆角半径
///bdwidth=>边框粗细
///bdcolor=>边框颜色
///bgcolor=>背景颜色
function drawRoundedRect(ctx,x, y, w, h, r, bdWidth, bdColor, bgcolor) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineWidth = bdWidth;
    ctx.strokeStyle = bdColor;
    ctx.fillStyle = bgcolor;
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
}