389 lines
16 KiB
PHP
389 lines
16 KiB
PHP
<?php
|
||
|
||
use app\models\Store;
|
||
|
||
/**
|
||
* @author Any
|
||
* @description KISS
|
||
* @date 2021年6月30日
|
||
* @version 1.0.0
|
||
*
|
||
* _____LOG_____
|
||
*
|
||
*/
|
||
$this->title = '球车详情';
|
||
$this->params['breadcrumbs'][] = $this->title;
|
||
|
||
?>
|
||
<style type="text/css">
|
||
.layui-table-cell {
|
||
height: auto;
|
||
}
|
||
|
||
#container {
|
||
width: 100%;
|
||
height: 300px;
|
||
top:0px;
|
||
}
|
||
</style>
|
||
<div class="layui-fluid">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
<?= $this->title ?>
|
||
</div>
|
||
<div class="layui-card-header layuiadmin-card-header-auto">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<!--<a class=" layui-btn" href="<?= \Yii::$app->urlManager->createUrl(["admin/feedback/edit"]) ?>">添加反馈</a>-->
|
||
<select class="layui-select" id="ball_number">
|
||
<option value="">选择球车编号</option>
|
||
</select>
|
||
|
||
</div>
|
||
<div class="layui-inline layui-float-right">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card-body">
|
||
<div>
|
||
<select id="OPERATION_ENABLE_select" class="layui-select">
|
||
<option value="0">禁止使用</option>
|
||
<option value="1">允许使用</option>
|
||
</select>
|
||
<select id="OPERATION_LEVEL_select" class="layui-select">
|
||
<option value="0">助力模式</option>
|
||
<option value="1">遥杆模式</option>
|
||
<option value="2">跟随模式</option>
|
||
</select>
|
||
<button class="layui-btn layui-btn-sm layui-btn-primary" id="handle_qc">操作车辆</button>
|
||
<div style="font-size: 10px">
|
||
行为选择，模式选择，均为下拉选项<br>
|
||
点击操作车辆,等待车辆刷新数据，预计10秒左右更新最新数据<br>
|
||
此操作会直接影响已在租赁的车辆，如不在调试阶段，请勿操作，会造成用户在使用中突然关闭车辆或者切换模式等情况，造成用户体验不好的情况<br>
|
||
(请求mqtt - 等待mqtt订阅数据 - 等待页面数据刷新)
|
||
</div>
|
||
<button class="layui-btn layui-btn-sm layui-btn-primary handle_query" data="1">查询车辆详细</button>
|
||
<button class="layui-btn layui-btn-sm layui-btn-primary handle_query" data="4">查询告警信息</button>
|
||
<button class="layui-btn layui-btn-sm layui-btn-primary handle_query" data="2">查询车辆GPS</button>
|
||
<div style="font-size: 10px">
|
||
三种查询只是请求mqtt，需要等待数据发布后才能更新
|
||
</div>
|
||
|
||
</div>
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="150">
|
||
<col>
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>事件</th>
|
||
<th>详情</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>IMEI</td>
|
||
<td><div class="body-data" id="IMEI"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>SIMID</td>
|
||
<td><div class="body-data" id="SIMID"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>信号</td>
|
||
<td><div class="body-data" id="CSQ"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>电量</td>
|
||
<td>
|
||
<div style="width: 300px" class="layui-progress" lay-filter="number_per" lay-showpercent="true">
|
||
<div class="layui-progress-bar" id="ELEC_PERCENT" lay-percent=""></div>
|
||
</div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>操作许可</td>
|
||
<td> <div id="OPERATION_ENABLE" class="body-data">
|
||
<span class="layui-badge layui-bg-cyan">禁止使用</span>
|
||
</div> </td>
|
||
</tr>
|
||
<tr>
|
||
<td>操作级别</td>
|
||
<td><div id="OPERATION_LEVEL" class="body-data"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>运行模式</td>
|
||
<td><div id="MODE" class="body-data"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>行驶总里程</td>
|
||
<td><span id="RANGE" class="body-data"></span>米</td>
|
||
</tr>
|
||
<tr>
|
||
<td>行驶里程</td>
|
||
<td><span id="RANGE_CURRENT" class="body-data"></span>米</td>
|
||
</tr>
|
||
<tr>
|
||
<td>运行总时长</td>
|
||
<td><span id="RUNTIME" class="body-data"></span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>运行时长</td>
|
||
<td><div id="RUNTIME_CURRENT" class="body-data"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>告警信息</td>
|
||
<td><div id="error_info_body" class="body-data"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>纬度</td>
|
||
<td><div id="LAT" class="body-data"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>经度</td>
|
||
<td><div id="LON" class="body-data"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>数据更新时间</td>
|
||
<td><div id="time" class="body-data"></div></td>
|
||
</tr>
|
||
<tr>
|
||
<td>页面更新时间</td>
|
||
<td><div id="time_page" class="body-data"></div></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div id="container"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=<?=\Yii::$app->params['mapKey']['qqmap']?>"></script>
|
||
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=<?=\Yii::$app->params['mapKey']['qqmap']?>"></script>
|
||
<script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
|
||
|
||
<script>
|
||
<?php $this->beginBlock('js_script_wrap') ?>
|
||
var map = null
|
||
var markerLayer = null
|
||
|
||
var initMap = function () {
|
||
var center = new TMap.LatLng(24.476404,118.129105);
|
||
//初始化地图
|
||
map = new TMap.Map("container", {
|
||
zoom: 18,//设置地图缩放级别
|
||
center: center//设置地图中心点坐标
|
||
});
|
||
//创建并初始化MultiMarker
|
||
markerLayer = new TMap.MultiMarker({
|
||
map: map, //指定地图容器
|
||
//样式定义
|
||
styles: {
|
||
//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
|
||
"myStyle": new TMap.MarkerStyle({
|
||
"width": 25, // 点标记样式宽度（像素）
|
||
"height": 35, // 点标记样式高度（像素）
|
||
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
|
||
"anchor": { x: 16, y: 32 }
|
||
})
|
||
},
|
||
//点标记数据数组
|
||
geometries: [
|
||
]
|
||
});
|
||
|
||
};
|
||
|
||
$('.body-data').html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>');
|
||
layui.config({
|
||
base: '/statics/layuiadmin/' //静态资源所在路径
|
||
}).extend({
|
||
index: 'lib/index' //主入口模块
|
||
}).use(['index', 'user', 'table', 'form','element'], function () {
|
||
var $ = layui.$
|
||
, form = layui.form
|
||
, table = layui.table
|
||
, admin = layui.admin
|
||
,element = layui.element;
|
||
$.ajax({
|
||
url:"<?=\Yii::$app->urlManager->createUrl(['admin/ball/index'])?>",
|
||
data:{page:1,limit:9999},
|
||
success:function(res){
|
||
if(res.code != 0){
|
||
return layer.msg('没有球车数据')
|
||
}
|
||
var html = "";
|
||
$.each(res.data,function(key,val){
|
||
html += "<option value='"+val.ball_number+"'>车辆编号："+val.ball_number+"</option>";
|
||
})
|
||
$('#ball_number').html(html)
|
||
if(GetQueryString('qr_number')){
|
||
$('#ball_number').val(GetQueryString('qr_number'))
|
||
$('#ball_number').change()
|
||
}else{
|
||
getData()
|
||
}
|
||
initMap();
|
||
}
|
||
})
|
||
|
||
$('#ball_number').change(function(){
|
||
var data = $('#ball_number').val()
|
||
$('.body-data').html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>');
|
||
getData()
|
||
})
|
||
|
||
function getData(){
|
||
var number = $('#ball_number').val()
|
||
$.ajax({
|
||
url:"<?=\Yii::$app->urlManager->createUrl(['admin/ball/qc-data'])?>",
|
||
data:{ball_number:number},
|
||
success:function(res){
|
||
if(res.code !=0){
|
||
element.progress('number_per', '0%')
|
||
return $('.body-data').html('未连接mqtt');
|
||
}
|
||
var OPERATION_ENABLE = {
|
||
0: '<span class="layui-badge layui-bg-black">禁止使用</span>',
|
||
1: '<span class="layui-badge layui-bg-blue">允许使用</span>',
|
||
}
|
||
var OPERATION_LEVEL = {
|
||
0: '助力模式',
|
||
1: '遥杆模式',
|
||
2: '跟随模式',
|
||
}
|
||
var MODE = {
|
||
0: '非 助力/遥控/跟随 模式',
|
||
1: '助力模式',
|
||
2: '摇杆模式',
|
||
3: '跟随模式',
|
||
}
|
||
var lon = 0
|
||
var lat = 0
|
||
$.each(res.data,function(key,val){
|
||
if(key == 'OPERATION_ENABLE'){
|
||
$('#'+key).html(OPERATION_ENABLE[val]);
|
||
return true
|
||
}
|
||
if(key == 'OPERATION_LEVEL'){
|
||
$('#'+key).html(OPERATION_LEVEL[val]);
|
||
return true
|
||
}
|
||
if(key == 'MODE'){
|
||
$('#'+key).html(MODE[val]);
|
||
return true
|
||
}
|
||
if(key == 'ELEC_PERCENT'){
|
||
element.progress('number_per', val+'%')
|
||
return true
|
||
}
|
||
if(key == 'error_info'){
|
||
var error_info = "";
|
||
$.each(val,function(k,v){
|
||
error_info += '<span style="margin-right: 5px" class="layui-badge">'+v.msg+' - '+v.time+'</span>';
|
||
})
|
||
$('#error_info_body').html(error_info);
|
||
return true
|
||
}
|
||
$('#'+key).html(val);
|
||
if(key == 'LAT'){
|
||
lat = val
|
||
}
|
||
if(key == 'LON'){
|
||
lon = val
|
||
}
|
||
})
|
||
markerLayer.updateGeometries([
|
||
{
|
||
"styleId":"marker",
|
||
"id": "1",
|
||
"position": new TMap.LatLng(lat,lon),
|
||
}
|
||
])
|
||
map.setCenter(new TMap.LatLng(lat,lon));
|
||
|
||
setTimeout(function(){
|
||
getData()
|
||
},10000)
|
||
},error:function(a,b,c){
|
||
element.progress('number_per', '0%')
|
||
$('.body-data').html('数据获取失败，数据接口网络错误');
|
||
setTimeout(function(){
|
||
getData()
|
||
},10000)
|
||
}
|
||
})
|
||
}
|
||
|
||
$('#handle_qc').click(function(){
|
||
var ball_number = $('#ball_number').val()
|
||
var OPERATION_ENABLE_select = $('#OPERATION_ENABLE_select').find("option:selected").text()
|
||
var OPERATION_LEVEL_select = $('#OPERATION_LEVEL_select').find("option:selected").text()
|
||
var OPERATION_ENABLE_res = $('#OPERATION_ENABLE_select').val()
|
||
var OPERATION_LEVEL_res = $('#OPERATION_LEVEL_select').val()
|
||
layer.alert("车辆编号："+ball_number+"<br>操作："+OPERATION_ENABLE_select+"<br>模式："+OPERATION_LEVEL_select,{
|
||
title:'操作车辆',
|
||
btn:['操作','取消'],
|
||
yes:function(){
|
||
layer.closeAll();
|
||
layer.msg('请求中', {
|
||
icon: 16
|
||
,shade: 0.01,
|
||
time:0
|
||
});
|
||
$.ajax({
|
||
url: "<?=\Yii::$app->urlManager->createUrl(['admin/ball/qc-send-mqtt'])?>",
|
||
data: {
|
||
ball_number: ball_number,
|
||
OPERATION_ENABLE:OPERATION_ENABLE_res,
|
||
OPERATION_LEVEL:OPERATION_LEVEL_res,
|
||
},
|
||
success: function (res) {
|
||
layer.closeAll();
|
||
},error:function(){
|
||
layer.closeAll();
|
||
}
|
||
})
|
||
}
|
||
})
|
||
})
|
||
$('.handle_query').click(function(){
|
||
var type = $(this).attr('data')
|
||
var ball_number = $('#ball_number').val()
|
||
layer.msg('请求中', {
|
||
icon: 16
|
||
,shade: 0.01,
|
||
time:0
|
||
});
|
||
$.ajax({
|
||
url: "<?=\Yii::$app->urlManager->createUrl(['admin/ball/qc-get-info'])?>",
|
||
data: {
|
||
ball_number: ball_number,
|
||
type:type,
|
||
},
|
||
success: function (res) {
|
||
layer.closeAll();
|
||
},error:function(){
|
||
layer.closeAll();
|
||
}
|
||
})
|
||
})
|
||
});
|
||
function GetQueryString(name)
|
||
{
|
||
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if(r!=null)return unescape(r[2]); return null;
|
||
}
|
||
|
||
|
||
|
||
|
||
<?php $this->endBlock(); ?>
|
||
</script>
|
||
<?php $this->registerJs($this->blocks['js_script_wrap'], \yii\web\View::POS_END); ?>
|
||
|