热力图
2020-06-12 本文已影响0人
糖醋里脊120625
<html>
<head>
<meta charset="utf-8"/>
<title>热力图</title>
<link rel="stylesheet" href="../css/ele-index.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.3&key=f34393f79dd691084b6e847785f5ec04"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>-->
<script src="../js/ele-index.js"></script>
</head>
<style>
#app {
width: 90%;
margin: 20px auto;
}
#maindata {
margin: 20px auto;
width: 100%;
height: 800px;
}
.changeColor {
background: #67C23A !important;
color: white !important;
}
</style>
<body>
<div id="app">
<div class="block">
<span class="demonstration">时间：</span>
<el-button @click="todaydata" v-bind:class="{changeColor:todayclaa}">今天</el-button>
<el-button @click="yestdaydata" v-bind:class="{changeColor:yestdayclaa}">昨日</el-button>
<el-button @click="weekenddata" v-bind:class="{changeColor:weekclaa}">最近7天</el-button>
<el-button @click="monthdata" v-bind:class="{changeColor:monthclaa}">最近30天</el-button>
<el-date-picker v-model="value1" type="date" placeholder="开始时间" style="margin-left: 10px;" format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
<el-date-picker v-model="value2" type="date" placeholder="结束时间" @change="changetime" format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
<div class="el-date-editor el-input el-input--prefix el-input--suffix el-date-editor--date">
<div>
<el-select v-model="depotId" placeholder="所有仓库" id="slct" style="height:38px;" @change="changeDepot">
<el-option
v-for="item in depotList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
<div id="maindata"></div>
</div>
<script type="text/javascript">
/*$.ajax({
url:'../api/v3/statistic/getShop',
type:'post',
dataType:'json',
success:function(data){
var obj = eval(data);
console.log(obj);
}
})*/
</script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
todayclaa: true,
yestdayclaa: false,
weekclaa: false,
monthclaa: false,
currentdate: "",
begindata: "",
builddata: [],
LINK: "http://127.0.0.1:8080",
// LINK:"http://pic.tongchengxianggou.com:9011",
heatmapOverlay: "",
value1: "",
value2: "",
map: {},
depotId: 0,
depotList: [
{
value: 0,
label: "全部"
},
{
value: 1,
label: "综合云仓"
},
{
value: 2,
label: "同城云仓二号库"
},
{
value: 3,
label: "同城云仓三号库"
},
{
value: 4,
label: "同城云仓（中天华庭）"
},
{
value: 7,
label: "同城云仓（小康城）"
},
{
value: 8,
label: "同城云仓（世袭雅园）"
},
{
value: 9,
label: "同城云仓（学林雅苑）"
},
{
value: 10,
label: "同城云仓（梧桐公馆）"
}
],
},
mounted() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
this.currentdate = year + seperator1 + month + seperator1 + strDate + " " + "01:00:00";
this.begindata = year + seperator1 + month + seperator1 + strDate + " " + "23:59:59";
var map = new AMap.Map("maindata", {
resizeEnable: true,
center: [119.024449, 33.598818],
zoom: 11,
viewMode: '2D',
pitch: 50,
showZoomBar: true,
});
this.getHeatmap(this.currentdate, this.begindata)
},
methods: {
//今天数据
todaydata() {
this.value1 = "";
this.value2 = "";
this.todayclaa = true;
this.yestdayclaa = false;
this.weekclaa = false;
this.monthclaa = false;
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
this.currentdate = year + seperator1 + month + seperator1 + strDate + " " + "01:00:00";
this.begindata = year + seperator1 + month + seperator1 + strDate + " " + "23:59:59";
this.getHeatmap(this.currentdate, this.begindata)
},
//昨天
yestdaydata() {
this.value1 = "";
this.value2 = "";
this.todayclaa = false;
this.yestdayclaa = true;
this.weekclaa = false;
this.monthclaa = false;
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate() - 1;
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
this.currentdate = year + seperator1 + month + seperator1 + strDate + " " + "01:00:00";
this.begindata = year + seperator1 + month + seperator1 + strDate + " " + "23:59:59";
this.getHeatmap(this.currentdate, this.begindata)
},
//最近七天
weekenddata() {
this.value1 = "";
this.value2 = "";
this.todayclaa = false;
this.yestdayclaa = false;
this.weekclaa = true;
this.monthclaa = false;
let time1 = new Date()
time1.setTime(time1.getTime() - (24 * 60 * 60 * 1000))
let Y1 = time1.getFullYear()
let M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
let D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate())
let timer1 = Y1 + '-' + M1 + '-' + D1 // 当前时间
let time2 = new Date()
time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * 7))
let Y2 = time2.getFullYear()
let M2 = ((time2.getMonth() + 1) > 9 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
let D2 = (time2.getDate() > 9 ? time2.getDate() : '0' + time2.getDate())
this.currentdate = Y2 + '-' + M2 + '-' + D2 + ' 01:00:00';
this.begindata = Y1 + '-' + M1 + '-' + D1 + ' 23:59:59'
this.getHeatmap(this.currentdate, this.begindata)
},
//最近30天
monthdata() {
this.value1 = "";
this.value2 = "";
this.todayclaa = false;
this.yestdayclaa = false;
this.weekclaa = false;
this.monthclaa = true;
let time1 = new Date()
time1.setTime(time1.getTime() - (24 * 60 * 60 * 1000))
let Y1 = time1.getFullYear()
let M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
let D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate())
let timer1 = Y1 + '-' + M1 + '-' + D1 // 当前时间
let time2 = new Date()
time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * 30))
let Y2 = time2.getFullYear()
let M2 = ((time2.getMonth() + 1) > 9 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
let D2 = (time2.getDate() > 9 ? time2.getDate() : '0' + time2.getDate())
this.currentdate = Y2 + '-' + M2 + '-' + D2 + ' 01:00:00';
this.begindata = Y1 + '-' + M1 + '-' + D1 + ' 23:59:59'
this.getHeatmap(this.currentdate, this.begindata)
},
changetime() {
this.todayclaa = false;
this.yestdayclaa = false;
this.weekclaa = false;
this.monthclaa = false;
if (this.value1 == "") {
this.$message({
showClose: true,
message: '请输入开始时间',
type: 'error'
});
return;
}
if (this.value1 > this.value2) {
this.$message({
showClose: true,
message: '请输入正确时间',
type: 'error'
});
this.value2 = "";
return;
}
this.currentdate = this.value1 + ' 01:00:00';
this.begindata = this.value2 + ' 23:59:59';
this.getHeatmap(this.currentdate, this.begindata)
},
changeDepot() {
if (this.todayclaa) {
this.todaydata();
} else if (this.yestdayclaa) {
this.yestdaydata();
} else if (this.weekclaa) {
this.weekenddata();
} else if (this.monthclaa) {
this.monthdata();
} else {
this.changetime();
}
},
getHeatmap(a, b) {
var map = new AMap.Map("maindata", {
resizeEnable: true,
center: [119.024449, 33.598818],
zoom: 11,
viewMode: '2D',
pitch: 50,
showZoomBar: true,
});
var that = this;
var heatmap;
var heatmapData = [];
var param = new FormData(); //创建form对象
param.append('startTime', a)
param.append('endTime', b)
param.append('depotId', this.depotId)
axios({
method: 'POST',
url: "../api/v3/statistic/picStatistic",
data: param,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
that.builddata = [];
if (res.data.code === 200) {
res.data.data.forEach(item => {
let obj = {
lat: item.la,
lng: item.lo,
count: item.valueInfo,
}
heatmapData.push(obj);
})
map.plugin(["AMap.Heatmap"], function () {
//初始化heatmap对象
heatmap = new AMap.Heatmap(map, {
radius: 40, //给定半径
opacity: [0, 1]
});
//设置数据集
console.log(heatmapData)
heatmap.setDataSet({
data: heatmapData,
max: 5
});
});
console.log(heatmap)
} else {
}
})
},
},
});
</script>
</body>
</html>
