|
|
|
|
|
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',
|
|
|
|
|
|
height:800,
|
|
|
|
|
|
animate: true,
|
|
|
|
|
|
frame: false,
|
|
|
|
|
|
html: ""
|
|
|
|
|
|
});
|
|
|
|
|
|
////#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.mapPanel]
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.LoadInit();
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
|
|
|
|
|
|
//#region 其他
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//#endregion
|
|
|
|
|
|
}, //end initUIComponents
|
|
|
|
|
|
|
|
|
|
|
|
//#region 加载事件
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
LoadData: function (MBLNO, BSNO) {
|
|
|
|
|
|
if (MBLNO == '' || BSNO == '') {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
var url = "http://60.209.125.238:35101/ServiceItems?USER_KEY=0aabffa55f3945b7a011b6beeaf23587&USER_SECRET=55b3b74b7291da681201b0342b1dec5af570acf015a3e03b66a7a5d2a43d842958647ddec213ea5f&businessId=" + BSNO;
|
|
|
|
|
|
_thisYZ.bsno = BSNO;
|
|
|
|
|
|
_thisYZ.mblno = MBLNO;
|
|
|
|
|
|
// _thisYZ.mapPanel.html = "<iframe id='mains' name='mains' frameborder='0' width='100%' height='100%' src='" + url + "'></iframe>";
|
|
|
|
|
|
_thisYZ.mapPanel.update('<iframe src="' + url + '" frameborder="0" width="100%" height="100%"></iframe>');
|
|
|
|
|
|
|
|
|
|
|
|
//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();
|
|
|
|
|
|
}
|
