chainwaytsp

### 资源地址：
traceplay /js/jquery-1.8.3.min.js（第三方资源）
traceplay/TracePlayWidget.js
traceplay/API.js

### 演示包下载:
[点击下载](http://www.chainwaytsp.cn/api/openpage_v1_92.zip "点击下载")

展示效果如图
![](http://www.chainwaytsp.cn/api/Public/Uploads/2017-06-09/593a555ecceca.jpg)

### Demo示例：
- 1.引入资源（资源可以下载到本地）
```html
<script type="text/javascript" src=" traceplay /js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="traceplay/ MonitorWidget.js "></script>
<script type="text/javascript" src="traceplay/API.js"></script>
```

- 2.创建容器
```html
<div id="container">
</div>
```

- 3.渲染组件

```javascript
(function(){
	var widget=MonitorWidget.create("container",{
		merchantId:"100000",
		userName:"jasion_api",
		css:{
			/*carOLIcon:"http://127.0.0.1:8080/openPage/ui/traceplay/images/ico_car_on.png",//在线车辆图标*/
			/*carOFIcon:"http://127.0.0.1:8080/openPage/ui/traceplay/images/ico_car_on.png"//离线车辆图标*/
		},
		getDeptTreeParam:function(merchantId,userName,requestTime,deptName,excuteFn){
			//TODO 用户自己实现参数加密

},
		getVehicleListParam:function(merchantId,userName,requestTime,plateNo,deptId,pageNum,excuteFn){
			//TODO 用户自己显示参数加密
		}
	});
})();
```

getDeptTreeParam, getVehicleListParam这两个函数是需要用户自己实现的后台加密处理
例如：
```javascript
getDeptTreeParam:function(merchantId,userName,requestTime,plateNo,excute){
			//暴露出去的查询方法，用户要自己实现，因为查询的参数需要加密
			var param={
				merchantId:merchantId,
				userName:userName,
				requestTime:requestTime,
				deptName:deptName
			};
			$.ajax({
				type:"POST",
				url:"http://127.0.0.1:8087/SSO/md5/getVehicleListParamMD5",
				dataType:"json",
				data:param,
				success:function(result){
					var sign=result.sign;
					param.sign=sign;
					if(excute){
						excute(param);
					}
				},
				error:function(XMLHttpRequest, textStatus, errorThrown){ 
}
			});
		}
```

通过ajax经后台加密后，得到加密的请求参数后，再执行查询成为的业务数据
excute(param)
后台的加密方式实现及加密密钥，我们会通过邮件告知对方。

### 组件参数说明
|参数名称|类型|说明|备注|
|:---|:---|:---|:---|
|merchantId	|String	|商户Id	|必填|
|userName	|String	|请求用户名	|必填|
|css	|Json	|定制样式	|可选|
|css. carOLIcon	|String	|在线车辆图标，没有就是默认图标	|可选|
|css. carOFIcon	|String	|离线车辆图标，没有就是默认图标	|可选|

车辆监控开放页面