343 lines
11 KiB
HTML
343 lines
11 KiB
HTML
<style>
|
||
.sm-st {
|
||
background: #fff;
|
||
padding: 20px;
|
||
-webkit-border-radius: 3px;
|
||
-moz-border-radius: 3px;
|
||
border-radius: 3px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.sm-st-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
display: inline-block;
|
||
line-height: 60px;
|
||
text-align: center;
|
||
font-size: 30px;
|
||
background: #eee;
|
||
-webkit-border-radius: 5px;
|
||
-moz-border-radius: 5px;
|
||
border-radius: 5px;
|
||
float: left;
|
||
margin-right: 10px;
|
||
color: #fff;
|
||
}
|
||
.sm-st-info {
|
||
padding-top: 2px;
|
||
}
|
||
|
||
.sm-st-info span {
|
||
display: block;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.orange {
|
||
background: #fa8564 !important;
|
||
}
|
||
|
||
.tar {
|
||
background: #45cf95 !important;
|
||
}
|
||
|
||
.sm-st .green {
|
||
background: #86ba41 !important;
|
||
}
|
||
|
||
.pink {
|
||
background: #AC75F0 !important;
|
||
}
|
||
|
||
.yellow-b {
|
||
background: #fdd752 !important;
|
||
}
|
||
|
||
.stat-elem {
|
||
|
||
background-color: #fff;
|
||
padding: 18px;
|
||
border-radius: 40px;
|
||
|
||
}
|
||
|
||
.stat-info {
|
||
text-align: center;
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
margin-top: -5px;
|
||
padding: 8px;
|
||
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
|
||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
|
||
font-style: italic;
|
||
}
|
||
|
||
.stat-icon {
|
||
text-align: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.st-red {
|
||
background-color: #F05050;
|
||
}
|
||
|
||
.st-green {
|
||
background-color: #27C24C;
|
||
}
|
||
|
||
.st-violet {
|
||
background-color: #7266ba;
|
||
}
|
||
|
||
.st-blue {
|
||
background-color: #23b7e5;
|
||
}
|
||
|
||
.stats .stat-icon {
|
||
color: #28bb9c;
|
||
display: inline-block;
|
||
font-size: 26px;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
width: 50px;
|
||
float: left;
|
||
}
|
||
|
||
.stat {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: inline-block;
|
||
}
|
||
|
||
.stat .value {
|
||
font-size: 20px;
|
||
line-height: 24px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stat .name {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.stat.lg .value {
|
||
font-size: 26px;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.stat-col {
|
||
margin:0 0 10px 0;
|
||
}
|
||
.stat.lg .name {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.stat-col .progress {
|
||
height: 2px;
|
||
}
|
||
|
||
.stat-col .progress-bar {
|
||
line-height: 2px;
|
||
height: 2px;
|
||
}
|
||
|
||
.item {
|
||
padding: 30px 0;
|
||
}
|
||
|
||
|
||
#statistics .panel {
|
||
min-height: 150px;
|
||
}
|
||
|
||
#statistics .panel h5 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
</style>
|
||
|
||
<div class="panel panel-default panel-intro">
|
||
<div class="panel-heading">
|
||
<!--<div class="panel-lead"><em>多表格（Multitable）</em>用于展示在一个页面展示多个表格数据,并且每次切换时刷新</div>-->
|
||
<ul class="nav nav-tabs">
|
||
<li class="active"><a data-val="first" href="#first" data-toggle="tab">统计图表</a></li>
|
||
<li><a href="#second" data-val="second" data-toggle="tab">统计列表</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<div class="panel-body" style="height: 100%">
|
||
<div id="myTabContent" class="tab-content" style="height: 100%">
|
||
<div class="tab-pane fade active in" style="height: 100%" id="first">
|
||
<section class="connectedSortable" style="height: 100%">
|
||
|
||
<div class="nav-tabs-custom charts-custom">
|
||
<!-- Tabs within a box -->
|
||
<ul class="nav nav-tabs pull-right">
|
||
<li class="active"><a href="#bar-chart" data-toggle="tab">地图分布</a></li>
|
||
<!-- <li><a href="#pie-chart" data-toggle="tab">饼图</a></li>-->
|
||
|
||
<li class="pull-left header"><i class="fa fa-inbox"></i> 师傅统计图</li>
|
||
</ul>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-3 col-xs-6">
|
||
<div class="sm-st clearfix">
|
||
<span class="sm-st-icon st-blue"><i class="fa fa-users"></i></span>
|
||
<div class="sm-st-info">
|
||
<span>{$count}/{$active_count}</span>
|
||
师傅总数/活跃数
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-3 col-xs-6">
|
||
<div class="sm-st clearfix">
|
||
<span class="sm-st-icon st-green"><i class="fa fa-users"></i></span>
|
||
<div class="sm-st-info">
|
||
<span>{$add_count_1}/{$add_count_7}</span>
|
||
今日新增/7天新增
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="tab-content no-padding" style="height: 100%">
|
||
<div class="chart tab-pane active" id="bar-chart" style="width: 100%; min-height:600px;height: 100%">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
</div>
|
||
<div class="tab-pane fade" id="second">
|
||
<table id="table2" class="table table-striped table-bordered table-hover" width="100%">
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 先加载 mapv -->
|
||
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>
|
||
|
||
<!-- 再加载 mapvgl -->
|
||
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
|
||
|
||
<!-- 最后加载百度地图并回调 -->
|
||
<!-- 加载百度地图 GL -->
|
||
<script>
|
||
|
||
const rawDataStr = '{$locationData}';
|
||
// 先解析成数组
|
||
const rawData = JSON.parse(rawDataStr);
|
||
window.initMap = function () {
|
||
const map = new BMapGL.Map("bar-chart");
|
||
map.centerAndZoom(new BMapGL.Point(104.0665, 30.5728), 6);
|
||
map.enableScrollWheelZoom(true);
|
||
|
||
map.addEventListener('tilesloaded', function () {
|
||
const view = new mapvgl.View({ map });
|
||
|
||
// ✅ 写死的点数据（10个城市）
|
||
/*const data = [
|
||
{ geometry: { type: 'Point', coordinates: [116.4074, 39.9042] } }, // 北京
|
||
{ geometry: { type: 'Point', coordinates: [121.4737, 31.2304] } }, // 上海
|
||
{ geometry: { type: 'Point', coordinates: [113.2644, 23.1291] } }, // 广州
|
||
{ geometry: { type: 'Point', coordinates: [114.0579, 22.5431] } }, // 深圳
|
||
{ geometry: { type: 'Point', coordinates: [117.2000, 39.1333] } }, // 天津
|
||
{ geometry: { type: 'Point', coordinates: [120.1551, 30.2741] } }, // 杭州
|
||
{ geometry: { type: 'Point', coordinates: [104.0665, 30.5728] } }, // 成都
|
||
{ geometry: { type: 'Point', coordinates: [106.5516, 29.5630] } }, // 重庆
|
||
{ geometry: { type: 'Point', coordinates: [108.9480, 34.2632] } }, // 西安
|
||
{ geometry: { type: 'Point', coordinates: [115.8582, 28.6829] } } // 南昌
|
||
];*/
|
||
|
||
const data = rawData.map(item => ({
|
||
geometry: {
|
||
type: 'Point',
|
||
coordinates: item
|
||
}
|
||
}));
|
||
|
||
// 根据聚合区域内的点数决定颜色（数量多，颜色深）
|
||
const gradient = {
|
||
0: 'rgba(162, 180, 73, 0.7)', // 浅绿
|
||
0.3: 'rgba(121, 153, 0, 0.8)', // 中绿
|
||
0.7: 'rgba(99, 121, 0, 0.9)', // 深绿
|
||
1.0: 'rgba(66, 77, 0, 1)' // 更深绿
|
||
};
|
||
|
||
// 定义聚合层
|
||
const clusterLayer = new mapvgl.ClusterLayer({
|
||
minSize: 30,
|
||
maxSize: 50,
|
||
clusterRadius: 150,
|
||
gradient: gradient, // 设置颜色渐变
|
||
showText: true,
|
||
textOptions: {
|
||
fontSize: 12,
|
||
color: 'white',
|
||
format: function (count) {
|
||
if (count === 0) return ''; // 数量为0时不展示
|
||
return count >= 1000 ? Math.round(count / 100) / 10 + 'k' : count; // 格式化数字
|
||
}
|
||
},
|
||
iconOptions: {
|
||
fillStyle: 'rgba(162, 180, 73, 0.7)', // 主色调：浅绿色
|
||
lineWidth: 1,
|
||
strokeStyle: 'rgba(121, 153, 0, 1)', // 边框：绿色
|
||
radius: 19, // 圆形点
|
||
shadowBlur: 5, // 阴影效果
|
||
shadowColor: 'rgba(244, 255, 204, 0.7)', // 阴影颜色
|
||
},
|
||
// 让每个点有自己的外观样式
|
||
icon: function (count) {
|
||
// 使用样式文本：点的数量越多，颜色越深
|
||
return {
|
||
backgroundColor: `rgba(121, 153, 0, 0.7)`, // 点背景颜色
|
||
height: '38px', // 高度
|
||
width: '38px', // 宽度
|
||
border: '1px solid rgb(121, 153, 0)', // 边框
|
||
borderRadius: '19px', // 边角半径（圆形）
|
||
boxShadow: 'rgb(244, 255, 204) 0px 0px 5px', // 阴影
|
||
lineHeight: '38px', // 行高
|
||
color: 'rgb(244, 255, 204)', // 字体颜色（淡黄）
|
||
fontSize: '14px', // 字体大小
|
||
textAlign: 'center', // 文本居中
|
||
cursor: 'pointer' // 鼠标样式为指针
|
||
};
|
||
}
|
||
});
|
||
|
||
// 添加数据并展示
|
||
view.addLayer(clusterLayer);
|
||
clusterLayer.setData(data);
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak={$mapkey}&callback=initMap"></script>
|
||
|
||
<!--
|
||
<script id="sourcetpl" type="text/html">
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<div class="form-inline" data-toggle="cxselect" data-selects="province,city,area">
|
||
<select style="width: 100px;" class="province form-control" name="province_id" data-url="ajax/area" ></select>
|
||
<input type="hidden" class="operate" data-name="province_id" value="=" />
|
||
<select style="width: 100px;" class="city form-control" name="city_id" data-url="ajax/area" data-query-name="province"></select>
|
||
<input type="hidden" class="operate" data-name="city_id" value="=" />
|
||
<!– <select class="area form-control" name="area_id" data-url="ajax/area" data-query-name="city"></select>
|
||
<input type="hidden" class="operate" data-name="area_id" value="=" />–>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</script>-->
|