|
|
var Dictionary = function () {
|
|
|
this.elements = new Array();
|
|
|
//Length of Dictionary
|
|
|
this.length = function () {
|
|
|
return this.elements.length;
|
|
|
};
|
|
|
//Check whether the Dictionary is empty
|
|
|
this.isEmpty = function () {
|
|
|
return (this.length() < 1);
|
|
|
};
|
|
|
//remove all elements from the Dictionary
|
|
|
this.removeAll = function () {
|
|
|
this.elements = new Array();
|
|
|
};
|
|
|
//get specify element of the dictionary
|
|
|
this.element = function (index) {
|
|
|
var rlt = null;
|
|
|
if (index >= 0 && index < this.elements.length) {
|
|
|
rlt = this.elements[index];
|
|
|
}
|
|
|
return rlt;
|
|
|
}
|
|
|
//check whether the Dictionary contains this key
|
|
|
this.Exists = function (key) {
|
|
|
var rlt = false;
|
|
|
try {
|
|
|
for (var i = 0, iLen = this.length(); i < iLen; i++) {
|
|
|
if (this.elements[i].key == key) {
|
|
|
rlt = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
catch (ex) {
|
|
|
}
|
|
|
return rlt;
|
|
|
};
|
|
|
//check whether the Dictionary contains this value
|
|
|
this.containsValue = function (value) {
|
|
|
var rlt = false;
|
|
|
try {
|
|
|
for (var i = 0, iLen = this.length(); i < iLen; i++) {
|
|
|
if (this.elements[i].value == value) {
|
|
|
rlt = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
catch (ex) {
|
|
|
}
|
|
|
return rlt;
|
|
|
};
|
|
|
//remove this key from the Dictionary
|
|
|
this.remove = function (key) {
|
|
|
var rlt = false;
|
|
|
try {
|
|
|
for (var i = 0, iLen = this.length(); i < iLen; i++) {
|
|
|
if (this.elements[i].key == key) {
|
|
|
this.elements.splice(i, 1);
|
|
|
rlt = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
catch (ex) {
|
|
|
}
|
|
|
return rlt;
|
|
|
};
|
|
|
//add this key/value to the Dictionary,if key is exists,replace the value
|
|
|
this.add = function (key, value) {
|
|
|
this.remove(key);
|
|
|
this.elements.push({
|
|
|
key: key,
|
|
|
value: value
|
|
|
});
|
|
|
};
|
|
|
//add this key/value to the Dictionary,if key is exists,append value
|
|
|
this.set = function (key, value) {
|
|
|
var arr = this.getItem(key);
|
|
|
if (arr != null) {
|
|
|
if (typeof (arr) == "object") {
|
|
|
arr.unshift.apply(arr, value);
|
|
|
value = arr;
|
|
|
}
|
|
|
else {
|
|
|
var array = [];
|
|
|
array.push(arr);
|
|
|
array.unshift.apply(array, value);
|
|
|
value = array;
|
|
|
}
|
|
|
this.remove(key);
|
|
|
}
|
|
|
this.elements.push({
|
|
|
key: key,
|
|
|
value: value
|
|
|
});
|
|
|
}
|
|
|
//get value of the key
|
|
|
this.getItem = function (key) {
|
|
|
var rlt = null;
|
|
|
try {
|
|
|
for (var i = 0, iLen = this.length(); i < iLen; i++) {
|
|
|
if (this.elements[i].key == key) {
|
|
|
rlt = this.elements[i].value;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
catch (ex) {
|
|
|
}
|
|
|
return rlt;
|
|
|
};
|
|
|
//get all keys of the dictionary
|
|
|
this.keys = function () {
|
|
|
var arr = [];
|
|
|
for (var i = 0, iLen = this.length(); i < iLen; i++) {
|
|
|
arr.push(this.elements[i].key);
|
|
|
}
|
|
|
return arr;
|
|
|
}
|
|
|
//get all values of the dictionary
|
|
|
this.values = function () {
|
|
|
var arr = [];
|
|
|
for (var i = 0, iLen = this.length(); i < iLen; i++) {
|
|
|
arr.push(this.elements[i].value);
|
|
|
}
|
|
|
return arr;
|
|
|
}
|
|
|
}
|
|
|
var dicStatus = new Dictionary();
|
|
|
var dicPointValue = new Dictionary();
|
|
|
var dicPointKey = new Dictionary();
|
|
|
|
|
|
var stepLay = function () {
|
|
|
var _this = this;
|
|
|
var _stepCount = 0;
|
|
|
var _widthMainFlow = 0;
|
|
|
var _imgAreaWidth = 0;
|
|
|
var _widthFlow = 0;
|
|
|
|
|
|
// javascript没有内置的类选择方法，可以编写扩展方法
|
|
|
document.getElementsByClassName = function (className) {
|
|
|
var el = [],
|
|
|
_el = document.getElementsByTagName("*"); // 获取所有的元素
|
|
|
for (var i = 0; i < _el.length; i++) { // 遍历元素集合
|
|
|
if (_el[i].className == className) { // 获取相同类名的元素
|
|
|
el[el.length] = _el[i];
|
|
|
}
|
|
|
}
|
|
|
return el;
|
|
|
}
|
|
|
//建立节点
|
|
|
var _create = function (_symbol, _position, _length, _height, _count, _text, _date) {
|
|
|
var _div = document.getElementById("mainFlowPointContain"); //得到父节点
|
|
|
|
|
|
//节点内容容器
|
|
|
var newNodeDiv = document.createElement("div");
|
|
|
newNodeDiv.id = "mainFlowNode" + _count;
|
|
|
newNodeDiv.style.cssText = "margin:0;padding:0;width:149px;height:40px;border:none;background-size:149px 40px;background:url(../../../../images/node.png) no-repeat;position:absolute;top:" + _position + "px;left:" + (_length - 74) + "px;z-index:" + (65000 + _count) + ";clear:both;";
|
|
|
newNodeDiv.setAttribute("class", "nodeTitle");
|
|
|
newNodeDiv.setAttribute("className", "nodeTitle");
|
|
|
_div.appendChild(newNodeDiv);
|
|
|
|
|
|
//节点内容
|
|
|
var _childDiv = document.getElementById("mainFlowNode1");
|
|
|
var newNodeTitleDiv = document.createElement("div");
|
|
|
newNodeTitleDiv.id = "mainFlowNodeTitle" + _count;
|
|
|
newNodeTitleDiv.setAttribute("class", "mainFlowNodeTitle");
|
|
|
newNodeTitleDiv.setAttribute("className", "mainFlowNodeTitle");
|
|
|
newNodeTitleDiv.innerText = _text;
|
|
|
newNodeDiv.appendChild(newNodeTitleDiv);
|
|
|
|
|
|
//内容日期
|
|
|
var newNodeContentDiv = document.createElement("div");
|
|
|
newNodeContentDiv.id = "mainFlowNodeContent" + _count;
|
|
|
newNodeContentDiv.setAttribute("class", "mainFlowNodeContent");
|
|
|
newNodeContentDiv.setAttribute("className", "mainFlowNodeContent");
|
|
|
newNodeContentDiv.innerText = _date;
|
|
|
newNodeDiv.appendChild(newNodeContentDiv);
|
|
|
|
|
|
//节点标线
|
|
|
var newLineHr = document.createElement("hr");
|
|
|
newLineHr.id = "mainFlowLine" + _count;
|
|
|
if (_symbol == 0) {
|
|
|
//节点在上方
|
|
|
newLineHr.style.cssText = "margin:0;padding:0;width:1px;height:" + _height + "%;color:#999;border:0px;border-left:1px #81ab00 solid;position:absolute;top:" + (_position + 40) + "px;left:" + _length + "px;z-index:" + (61400 + _count);
|
|
|
}
|
|
|
else if (_symbol == 1) {
|
|
|
//节点在下方
|
|
|
newLineHr.style.cssText = "margin:0;padding:0;width:1px;height:" + _height + "%;color:#999;border:0px;border-left:1px #81ab00 solid;position:absolute;top:10px;left:" + _length + "px;z-index:" + (61400 + _count);
|
|
|
}
|
|
|
newLineHr.setAttribute("class", "nodePointLine");
|
|
|
newLineHr.setAttribute("className", "nodePointLine");
|
|
|
newLineHr.setAttribute("align", "center");
|
|
|
_div.appendChild(newLineHr);
|
|
|
|
|
|
//节点
|
|
|
var newPointDiv = document.createElement("div");
|
|
|
newPointDiv.id = "mainFlowPointHover" + _count;
|
|
|
newPointDiv.style.cssText = "margin:0;padding:0;width:15px;height:15px;background-color:#81ab00;position:absolute;top:-2px;left:" + (_length - 7) + "px;z-index:" + (62600 + _count) + ";-moz-border-radius-topleft:7px;-moz-border-radius-bottomleft:7px;-moz-border-radius-topright:7px;-moz-border-radius-bottomright:7px;-webkit-border-top-left-radius:7px;-webkit-border-bottom-left-radius:7px;-webkit-border-top-right-radius:7px;-webkit-border-bottom-right-radius:7px;border-top-right-radius:7px;border-bottom-right-radius:7px;border-top-left-radius:7px;border-bottom-left-radius:7px;";
|
|
|
newPointDiv.innerHTML = " ";
|
|
|
newPointDiv.setAttribute("class", "nodePointHover"); //firefox
|
|
|
newPointDiv.setAttribute("className", "nodePointHover"); //ie
|
|
|
_div.appendChild(newPointDiv);
|
|
|
}
|
|
|
|
|
|
//图形和查询都复位清空
|
|
|
var _initialize = function () {
|
|
|
_widthMainFlow = document.documentElement.clientWidth;
|
|
|
var _heightMainFlow = document.documentElement.clientHeight;
|
|
|
|
|
|
document.getElementById("mask").style.width = _widthMainFlow + "px";
|
|
|
document.getElementById("mask").style.height = _heightMainFlow + "px";
|
|
|
document.getElementById("mask").style.display = "none";
|
|
|
document.getElementById("layBg").style.display = "none";
|
|
|
document.getElementById("layBg").style.left = _widthMainFlow * 0.25 / 2 + "px";
|
|
|
document.getElementById("layBg").style.top = _heightMainFlow * 0.2 / 2 + "px";
|
|
|
|
|
|
document.getElementById("mainFlowHover").style.display = "none";
|
|
|
|
|
|
//加载所有状态
|
|
|
var _store = Ext.create('DsExt.ux.RefTableStore', {
|
|
|
fields: [
|
|
|
{ name: 'STATUS', type: 'string' }
|
|
|
],
|
|
|
proxy: { url: '/MvcShipping/MsOpSeae/GetOpStatusStandard' },
|
|
|
scope: this
|
|
|
});
|
|
|
_store.load(); //{ params: { mblno: _mblno} }
|
|
|
|
|
|
_store.on("load", function (_store) {
|
|
|
for (var i = 0; i < _store.getCount(); i++) {
|
|
|
dicStatus.add(_store.getAt(i).get("STATUS"), _store.getAt(i).get("STATUS"));
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//加载数据，显示层
|
|
|
var _load = function (_mblno, _bsno) {
|
|
|
_widthMainFlow = document.documentElement.clientWidth;
|
|
|
_imgAreaWidth = _widthMainFlow * 0.8 * 0.8; // * 0.88 0.9 //图片区域宽度
|
|
|
|
|
|
dicPointKey.removeAll();
|
|
|
dicPointValue.removeAll();
|
|
|
|
|
|
document.getElementById("secTitle").innerText = _mblno;
|
|
|
document.getElementById("mainFlowPointContain").innerHTML = "";
|
|
|
document.getElementById("mainFlowHover").style.display = "none";
|
|
|
var _store = Ext.create('DsExt.ux.RefTableStore', {
|
|
|
fields: [
|
|
|
{ name: 'ST_ID', type: 'string' },
|
|
|
{ name: 'STATUS', type: 'string' },
|
|
|
{ name: 'COMPTIME', type: 'string' }
|
|
|
],
|
|
|
proxy: { url: '/MvcShipping/MsOpSeae/GetOpStatus' },
|
|
|
scope: this
|
|
|
});
|
|
|
_store.load({ params: { bsno: _bsno} });
|
|
|
|
|
|
_store.on("load", function (_store) {
|
|
|
//得到总节点数，用于直线分段
|
|
|
_stepCount = _store.getCount();
|
|
|
_widthFlow = 0;
|
|
|
if (_stepCount > 1) {
|
|
|
_widthFlow = parseInt(_imgAreaWidth / (_stepCount - 1)); //节点之间距离 _stepCount - 节点数
|
|
|
}
|
|
|
else {
|
|
|
//只有一个节点，显示在中央位置
|
|
|
_widthFlow = parseInt(_imgAreaWidth / 2) - 7;
|
|
|
}
|
|
|
|
|
|
//建立节点，首先判断弹出层的宽度是否能够容纳下整个节点容器平铺宽度，如果不能容纳，则为不同的节点设
|
|
|
//置不同的节点线高度，(如果只有一个节点，则不显示进程条，将节点显示在中央 √)
|
|
|
|
|
|
if (_stepCount == 1) {
|
|
|
//+/-, _position, _length, _height, _count, _text, _date
|
|
|
_create(0, -120, _widthFlow, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
|
|
|
dicPointKey.add("0", _store.getAt(0).get("STATUS"));
|
|
|
dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
|
|
|
}
|
|
|
else if (_stepCount == 2) {
|
|
|
document.getElementById("mainFlowHover").style.display = "block";
|
|
|
_create(0, -120, 0, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
|
|
|
_create(0, -120, _widthFlow, 800, 1, _store.getAt(1).get("STATUS"), _store.getAt(1).get("COMPTIME"));
|
|
|
dicPointKey.add("0", _store.getAt(0).get("STATUS"));
|
|
|
dicPointKey.add("1", _store.getAt(1).get("STATUS"));
|
|
|
dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
|
|
|
dicPointValue.add("1", _store.getAt(1).get("COMPTIME"));
|
|
|
}
|
|
|
else if (_stepCount > 2) {
|
|
|
document.getElementById("mainFlowHover").style.display = "block";
|
|
|
if (_imgAreaWidth >= (_stepCount / 2 * 149)) {
|
|
|
for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
|
|
|
if (iProcess % 2 == 0) {
|
|
|
//节点在上方
|
|
|
_create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 2 == 1) {
|
|
|
//节点在下方
|
|
|
_create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
else if (_imgAreaWidth < (_stepCount / 2 * 149)) {
|
|
|
for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
|
|
|
if (iProcess % 2 == 0) {
|
|
|
//节点在上方
|
|
|
if (iProcess % 3 == 0) {
|
|
|
_create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 1) {
|
|
|
_create(0, -80, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 2) {
|
|
|
_create(0, -160, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
}
|
|
|
else if (iProcess % 2 == 1) {
|
|
|
//节点在下方
|
|
|
if (iProcess % 3 == 0) {
|
|
|
_create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 1) {
|
|
|
_create(1, 50, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 2) {
|
|
|
_create(1, 130, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
document.getElementById("mask").style.display = "block";
|
|
|
document.getElementById("layBg").style.display = "block";
|
|
|
}
|
|
|
|
|
|
//清空显示
|
|
|
var _clear = function () {
|
|
|
_widthMainFlow = document.documentElement.clientWidth;
|
|
|
var _heightMainFlow = document.documentElement.clientHeight;
|
|
|
|
|
|
document.getElementById("mask").style.width = _widthMainFlow + "px";
|
|
|
document.getElementById("mask").style.height = _heightMainFlow + "px";
|
|
|
document.getElementById("mask").style.display = "block";
|
|
|
document.getElementById("layBg").style.display = "block";
|
|
|
|
|
|
document.getElementById("mainFlowPointContain").innerHTML = "";
|
|
|
document.getElementById("mainFlowHover").style.display = "none";
|
|
|
}
|
|
|
|
|
|
//查询提单号
|
|
|
var _search = function () {
|
|
|
var _mblno = document.getElementById("txtSearch").value;
|
|
|
|
|
|
if (_mblno != "(--请输入提单号--)") {
|
|
|
_clear();
|
|
|
|
|
|
_widthMainFlow = document.documentElement.clientWidth;
|
|
|
_imgAreaWidth = _widthMainFlow * 0.8 * 0.8; // * 0.88 0.9 //图片区域宽度
|
|
|
|
|
|
dicPointKey.removeAll();
|
|
|
dicPointValue.removeAll();
|
|
|
|
|
|
document.getElementById("secTitle").innerText = _mblno;
|
|
|
|
|
|
document.getElementById("mainFlowPointContain").innerHTML = "";
|
|
|
document.getElementById("mainFlowHover").style.display = "none";
|
|
|
var _store = Ext.create('DsExt.ux.RefTableStore', {
|
|
|
fields: [
|
|
|
{ name: 'ST_ID', type: 'string' },
|
|
|
{ name: 'STATUS', type: 'string' },
|
|
|
{ name: 'COMPTIME', type: 'string' }
|
|
|
],
|
|
|
proxy: { url: '/MvcShipping/MsOpSeae/SearchOpStatus' },
|
|
|
scope: this
|
|
|
});
|
|
|
_store.load({ params: { mblno: _mblno} });
|
|
|
|
|
|
_store.on("load", function (_store) {
|
|
|
//得到总节点数，用于直线分段
|
|
|
_stepCount = _store.getCount();
|
|
|
_widthFlow = 0;
|
|
|
if (_stepCount > 1) {
|
|
|
_widthFlow = parseInt(_imgAreaWidth / (_stepCount - 1)); //节点之间距离 _stepCount - 节点数
|
|
|
}
|
|
|
else {
|
|
|
//只有一个节点，显示在中央位置
|
|
|
_widthFlow = parseInt(_imgAreaWidth / 2) - 7;
|
|
|
}
|
|
|
|
|
|
if (_stepCount == 0) {
|
|
|
document.getElementById("mainFlowPointContain").innerHTML = "没有记录";
|
|
|
}
|
|
|
else if (_stepCount == 1) {
|
|
|
_create(0, -120, _widthFlow, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
|
|
|
dicPointKey.add("0", _store.getAt(0).get("STATUS"));
|
|
|
dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
|
|
|
}
|
|
|
else if (_stepCount == 2) {
|
|
|
document.getElementById("mainFlowHover").style.display = "block";
|
|
|
_create(0, -120, 0, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
|
|
|
_create(0, -120, _widthFlow, 800, 1, _store.getAt(1).get("STATUS"), _store.getAt(1).get("COMPTIME"));
|
|
|
dicPointKey.add("0", _store.getAt(0).get("STATUS"));
|
|
|
dicPointKey.add("1", _store.getAt(1).get("STATUS"));
|
|
|
dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
|
|
|
dicPointValue.add("1", _store.getAt(1).get("COMPTIME"));
|
|
|
}
|
|
|
else if (_stepCount > 2) {
|
|
|
document.getElementById("mainFlowHover").style.display = "block";
|
|
|
if (_imgAreaWidth >= (_stepCount / 2 * 149)) {
|
|
|
for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
|
|
|
if (iProcess % 2 == 0) {
|
|
|
//节点在上方
|
|
|
_create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 2 == 1) {
|
|
|
//节点在下方
|
|
|
_create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
else if (_imgAreaWidth < (_stepCount / 2 * 149)) {
|
|
|
for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
|
|
|
if (iProcess % 2 == 0) {
|
|
|
//节点在上方
|
|
|
if (iProcess % 3 == 0) {
|
|
|
_create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 1) {
|
|
|
_create(0, -80, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 2) {
|
|
|
_create(0, -160, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
}
|
|
|
else if (iProcess % 2 == 1) {
|
|
|
//节点在下方
|
|
|
if (iProcess % 3 == 0) {
|
|
|
_create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 1) {
|
|
|
_create(1, 50, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
else if (iProcess % 3 == 2) {
|
|
|
_create(1, 130, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
|
|
|
dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
document.getElementById("txtSearch").value = "(--请输入提单号--)";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//清空搜索框
|
|
|
var _clearText = function () {
|
|
|
document.getElementById("txtSearch").value = "";
|
|
|
}
|
|
|
|
|
|
//初始化搜索框
|
|
|
var _blurText = function () {
|
|
|
if (document.getElementById("txtSearch").value == "") {
|
|
|
document.getElementById("txtSearch").value = "(--请输入提单号--)";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//关闭层
|
|
|
var _close = function () {
|
|
|
document.getElementById("mask").style.display = "none";
|
|
|
document.getElementById("layBg").style.display = "none";
|
|
|
}
|
|
|
|
|
|
//调整窗口大小时运行
|
|
|
var _resize = function () {
|
|
|
_widthMainFlow = document.documentElement.clientWidth;
|
|
|
var _heightMainFlow = document.documentElement.clientHeight;
|
|
|
_imgAreaWidth = _widthMainFlow * 0.8 * 0.8; // * 0.88 0.9 //图片区域宽度
|
|
|
|
|
|
document.getElementById("mask").style.width = _widthMainFlow + "px";
|
|
|
document.getElementById("mask").style.height = _heightMainFlow + "px";
|
|
|
document.getElementById("layBg").style.left = _widthMainFlow * 0.25 / 2 + "px";
|
|
|
document.getElementById("layBg").style.top = _heightMainFlow * 0.2 / 2 + "px";
|
|
|
|
|
|
document.getElementById("mainFlowPointContain").innerHTML = "";
|
|
|
document.getElementById("mainFlowHover").style.display = "none";
|
|
|
|
|
|
_widthFlow = 0;
|
|
|
if (_stepCount > 1) {
|
|
|
_widthFlow = parseInt(_imgAreaWidth / (_stepCount - 1)); //节点之间距离 _stepCount - 节点数
|
|
|
}
|
|
|
else {
|
|
|
//只有一个节点，显示在中央位置
|
|
|
_widthFlow = parseInt(_imgAreaWidth / 2) - 7;
|
|
|
}
|
|
|
if (_stepCount == 1) {
|
|
|
_create(0, -120, _widthFlow, 800, 1, dicPointKey.getItem("0"), dicPointValue.getItem("0"));
|
|
|
}
|
|
|
else if (_stepCount == 2) {
|
|
|
document.getElementById("mainFlowHover").style.display = "block";
|
|
|
_create(0, -120, 0, 800, 1, dicPointKey.getItem("0"), dicPointValue.getItem("0"));
|
|
|
_create(0, -120, _widthFlow, 800, 1, dicPointKey.getItem("1"), dicPointValue.getItem("1"));
|
|
|
}
|
|
|
else {
|
|
|
document.getElementById("mainFlowHover").style.display = "block";
|
|
|
for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
|
|
|
if (_imgAreaWidth >= (_stepCount / 2 * 149)) {
|
|
|
for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
|
|
|
if (iProcess % 2 == 0) {
|
|
|
//节点在上方
|
|
|
_create(0, -120, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
else if (iProcess % 2 == 1) {
|
|
|
//节点在下方
|
|
|
_create(1, 90, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
else if (_imgAreaWidth < (_stepCount / 2 * 149)) {
|
|
|
for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
|
|
|
if (iProcess % 2 == 0) {
|
|
|
//节点在上方
|
|
|
if (iProcess % 3 == 0) {
|
|
|
_create(0, -120, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
else if (iProcess % 3 == 1) {
|
|
|
_create(0, -80, _widthFlow * iProcess, 400, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
else if (iProcess % 3 == 2) {
|
|
|
_create(0, -160, _widthFlow * iProcess, 1200, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
}
|
|
|
else if (iProcess % 2 == 1) {
|
|
|
//节点在下方
|
|
|
if (iProcess % 3 == 0) {
|
|
|
_create(1, 90, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
else if (iProcess % 3 == 1) {
|
|
|
_create(1, 50, _widthFlow * iProcess, 400, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
else if (iProcess % 3 == 2) {
|
|
|
_create(1, 130, _widthFlow * iProcess, 1200, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return { fnInitialize: _initialize, fnResize: _resize, fnLoad: _load, fnSearch: _search, fnClose: _close, fnClearText: _clearText, fnBlur: _blurText }
|
|
|
}
|
|
|
|
|
|
var steplay = new stepLay();
|
|
|
|
|
|
Ext.onReady(function () {
|
|
|
steplay.fnInitialize();
|
|
|
|
|
|
window.onresize = function () {
|
|
|
steplay.fnResize();
|
|
|
}
|
|
|
|
|
|
});
|