266 lines
12 KiB
PHP
266 lines
12 KiB
PHP
<?php
|
|
|
|
/**
|
|
* @author Any
|
|
* @description KISS
|
|
* @date 2020-11-4
|
|
* @version 1.0.0
|
|
*
|
|
* _____LOG_____
|
|
*
|
|
*/
|
|
$this->title = 'UCaddy Rental Management Center';
|
|
$this->params['breadcrumbs'][] = $this->title;
|
|
?>
|
|
<style>
|
|
#container {
|
|
width: 100%;
|
|
height: 60%;
|
|
top:0px;
|
|
}
|
|
</style>
|
|
|
|
<div >
|
|
<div class="layui-card">
|
|
<div class="layui-bg-gray" style="padding: 10px;">
|
|
<div class="layui-row layui-col-space15">
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space15">
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">场地管理员后台地址</div>
|
|
<div class="layui-card-body">
|
|
<div id="cd_location_body">
|
|
<div><span id="cd_location"></span>/store</div>
|
|
<div style="font-size: 8px">如果本机浏览器访问不了，则在本机中换个浏览器进行访问，或开启浏览器无痕模式进行访问</div>
|
|
<div style="font-size: 8px">本地址访问人员：场地管理员、场地财务</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">已完成订单数</div>
|
|
<div class="layui-card-body">
|
|
<div id="order_success"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">全部车辆</div>
|
|
<div class="layui-card-body">
|
|
<div id="ball_cart_all"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">可租赁数</div>
|
|
<div class="layui-card-body">
|
|
<div id="ball_cart_0"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">已租赁数</div>
|
|
<div class="layui-card-body">
|
|
<div id="ball_cart_1"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">不可租赁数</div>
|
|
<div class="layui-card-body">
|
|
<div id="ball_cart_3"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">停用车辆数</div>
|
|
<div class="layui-card-body">
|
|
<div id="ball_cart_2"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="container"></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') ?>
|
|
$('#cd_location_body').hide();
|
|
layui.config({
|
|
base: '/statics/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index', //主入口模块
|
|
}).use(['index','echarts'],function(){
|
|
var map = null;
|
|
var markerLayer = null;
|
|
var polygon = null;
|
|
$.ajax({
|
|
url:"<?=\Yii::$app->urlManager->createUrl(['admin/default/get-data'])?>",
|
|
type:'get',
|
|
success:function(res){
|
|
$.each(res.data,function(key,val){
|
|
$('#'+key).html(val)
|
|
})
|
|
|
|
},error:function(){
|
|
|
|
}
|
|
})
|
|
|
|
|
|
$('#cd_location').html(window.location.origin);
|
|
$('#cd_location_body').show();
|
|
|
|
$.ajax({
|
|
url:"<?=\Yii::$app->urlManager->createUrl(['admin/default/get-dt-data'])?>",
|
|
type:'get',
|
|
success:function(res){
|
|
var default_ = {lat:0,lng:0}
|
|
var geometries = []
|
|
var label_arr = []
|
|
$.each(res.data.store_data,function(key,val){
|
|
var path = []
|
|
$.each(val.store,function(k,v){
|
|
// path.push(new TMap.LatLng(40.03970460886076, 116.27483769345417))
|
|
path.push(v)
|
|
default_ = v
|
|
if(k == 0){
|
|
label_arr.push({
|
|
id: 'label', // 点图形数据的标志信息
|
|
styleId: 'label', // 样式id
|
|
position: v, // 标注点位置
|
|
content: val.name, // 标注文本
|
|
properties: {
|
|
// 标注点的属性数据
|
|
title: 'label',
|
|
},
|
|
})
|
|
}
|
|
})
|
|
geometries.push({
|
|
'id': 'store_'+val.id, //该多边形在图层中的唯一标识（删除、更新数据时需要）
|
|
'styleId': 'polygon', //绑定样式名
|
|
'paths': path, //多边形轮廓
|
|
})
|
|
})
|
|
var MultiMarker = []
|
|
var MultiMarker_labels_arr = []
|
|
$.each(res.data.ball_data,function(key,val){
|
|
var path = []
|
|
// 标记位置(纬度，经度，高度)
|
|
MultiMarker.push({
|
|
position: new TMap.LatLng(val.latlng[0], val.latlng[1]),
|
|
id: 'ball_'+val.id,
|
|
})
|
|
MultiMarker_labels_arr.push({
|
|
id: 'label', // 点图形数据的标志信息
|
|
styleId: 'label', // 样式id
|
|
position: new TMap.LatLng(val.latlng[0], val.latlng[1]), // 标注点位置
|
|
content: val.name, // 标注文本
|
|
properties: {
|
|
// 标注点的属性数据
|
|
title: 'label',
|
|
},
|
|
})
|
|
})
|
|
initMap(geometries,default_,label_arr,MultiMarker,MultiMarker_labels_arr);
|
|
},error:function(){
|
|
|
|
}
|
|
})
|
|
function initMap(geometries,default_,label_arr,MultiMarker,MultiMarker_labels_arr) {
|
|
var center = new TMap.LatLng(default_.lat,default_.lng);
|
|
//初始化地图
|
|
map = new TMap.Map("container", {
|
|
zoom: 15,//设置地图缩放级别
|
|
center: center//设置地图中心点坐标
|
|
});
|
|
|
|
// 初始化polygon
|
|
polygon = new TMap.MultiPolygon({
|
|
id: 'polygon-layer', // 图层id
|
|
map: map, // 显示多边形图层的底图
|
|
styles: {
|
|
// 多边形的相关样式
|
|
polygon: new TMap.PolygonStyle({
|
|
color: 'rgba(41,91,255,0.36)', // 面填充色
|
|
showBorder: true, // 是否显示拔起面的边线
|
|
borderColor: '#3777FF', // 边线颜色
|
|
}),
|
|
},
|
|
geometries: geometries
|
|
});
|
|
// 初始化label
|
|
var label = new TMap.MultiLabel({
|
|
id: 'label-layer',
|
|
map: map,
|
|
styles: {
|
|
label: new TMap.LabelStyle({
|
|
color: '#3777FF', // 颜色属性
|
|
size: 18, // 文字大小属性
|
|
offset: { x: 20, y: -35 }, // 文字偏移属性单位为像素
|
|
angle: 0, // 文字旋转属性
|
|
alignment: 'center', // 文字水平对齐属性
|
|
verticalAlignment: 'middle', // 文字垂直对齐属性
|
|
}),
|
|
},
|
|
geometries: label_arr
|
|
});
|
|
|
|
var marker = new TMap.MultiMarker({
|
|
map: map,
|
|
styles: {
|
|
// 点标记样式
|
|
marker: new TMap.MarkerStyle({
|
|
width: 20, // 样式宽
|
|
height: 30, // 样式高
|
|
anchor: { x: 10, y: 30 }, // 描点位置
|
|
}),
|
|
},
|
|
geometries: MultiMarker
|
|
});
|
|
|
|
// 初始化label
|
|
new TMap.MultiLabel({
|
|
id: 'label-layers',
|
|
map: map,
|
|
styles: {
|
|
label: new TMap.LabelStyle({
|
|
color: '#3777FF', // 颜色属性
|
|
size: 15, // 文字大小属性
|
|
offset: { x: 0, y: -55 }, // 文字偏移属性单位为像素
|
|
angle: 0, // 文字旋转属性
|
|
alignment: 'center', // 文字水平对齐属性
|
|
verticalAlignment: 'middle', // 文字垂直对齐属性
|
|
}),
|
|
},
|
|
geometries: MultiMarker_labels_arr
|
|
});
|
|
};
|
|
|
|
});
|
|
|
|
<?php $this->endBlock(); ?>
|
|
</script>
|
|
<?php $this->registerJs($this->blocks['js_script_wrap'],\yii\web\View::POS_END); ?>
|