补充漏提代码
This commit is contained in:
gounaikang@hisense.com
parent
9e4e0eedc9
commit
e75347843e
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div class="m-timeline-wrap">
|
||||
<div class="m-time-dot">
|
||||
<div
|
||||
:class="['m-dot-box', { active: active == item.year }]"
|
||||
@click="onClickYear(item)"
|
||||
v-for="(item, index) in timelineData"
|
||||
:key="index"
|
||||
>
|
||||
<p class="u-year">{{ item.year }}</p>
|
||||
<div class="m-dot">
|
||||
<div class="u-dot"></div>
|
||||
</div>
|
||||
<!-- 演示按钮 -->
|
||||
</div>
|
||||
<!-- <el-button
|
||||
class="shoWToday"
|
||||
@click="shoWTodayClick"
|
||||
icon="el-icon-video-play"
|
||||
>播放</el-button> -->
|
||||
<div class="shoWToday" @click="shoWTodayClick"><div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "HorizonTimeLine",
|
||||
props: {
|
||||
timelineData: {
|
||||
// 时间轴数据
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
// activeYear: {
|
||||
// // 初始选中年份
|
||||
// type: String,
|
||||
// default: "12:00",
|
||||
// },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: this.activeYear,
|
||||
gettime: "",
|
||||
index: 0,
|
||||
time: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClickYear(item) {
|
||||
console.log("onClickYear==========》", item);
|
||||
if (this.active !== item.year) {
|
||||
this.active = item.year;
|
||||
// console.log("hello", item.year);
|
||||
}
|
||||
this.$emit("timeId", item.timeId);
|
||||
},
|
||||
shoWTodayClick() {
|
||||
this.$emit("hotName", "人流热力");
|
||||
// debugger;
|
||||
console.log("点击==========》", this.timelineData[this.index]);
|
||||
this.onClickYear(this.timelineData[this.index]);
|
||||
this.index++;
|
||||
this.time = setInterval(() => {
|
||||
console.log("时间轴数据===========》", this.timelineData, this.index);
|
||||
if (this.index == this.timelineData.length) {
|
||||
console.log("清空定时器");
|
||||
this.onClickYear("");
|
||||
this.$emit("hot");
|
||||
this.index = 0;
|
||||
clearInterval(this.time);
|
||||
} else {
|
||||
console.log("点击==========》", this.timelineData[this.index]);
|
||||
this.onClickYear(this.timelineData[this.index]);
|
||||
this.index++;
|
||||
}
|
||||
}, 200);
|
||||
console.log(this.timelineData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$themecolor: #3c657c;
|
||||
.m-timeline-wrap {
|
||||
// min-width: 120px;
|
||||
width: 520px;
|
||||
min-width: 520px;
|
||||
height: 3px;
|
||||
background: #3c657c;
|
||||
.shoWToday {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: #3c657c;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: 10px;
|
||||
div {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 6px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 8px solid;
|
||||
border-color: transparent transparent transparent #fff;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
div:hover{
|
||||
border-color: transparent transparent transparent #66FFFF;
|
||||
}
|
||||
}
|
||||
.m-time-dot {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.m-dot-box {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transform: translateY(-39px);
|
||||
.u-year {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #3c657c;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.m-dot {
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #3c657c;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
.u-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #3c657c;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-dot-box:hover {
|
||||
.u-year {
|
||||
color: $themecolor;
|
||||
}
|
||||
.m-dot {
|
||||
.u-dot {
|
||||
background: $themecolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
.u-year {
|
||||
transform: scale(1) translateY(-18px); // 同时设置多个transform属性只需用空格间隔，执行时从后往前执行！
|
||||
color: $themecolor;
|
||||
}
|
||||
.m-dot {
|
||||
transform: scale(2);
|
||||
.u-dot {
|
||||
transform: scale(0.67);
|
||||
background: $themecolor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -55,7 +55,19 @@
|
|||
<div class="siteList">
|
||||
<site-list></site-list>
|
||||
</div>
|
||||
<!-- 热力图图例 -->
|
||||
<div class="legend"></div>
|
||||
|
||||
<!-- 时间轴 -->
|
||||
<div class="timerShaft">
|
||||
<HorizonTimeLine
|
||||
:timelineData="timelineData"
|
||||
@timeId="timeIdData"
|
||||
@hot="thermodynamic"
|
||||
@hotName="hotName"
|
||||
/>
|
||||
<span>时</span>
|
||||
</div>
|
||||
<div class="changeLayer">
|
||||
<div class="title">地图显示</div>
|
||||
<div class="change-btn-box">
|
||||
|
|
@ -69,7 +81,9 @@
|
|||
<el-checkbox v-for="item in changeLayerBtnListArea" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="title">人流热力</div>
|
||||
<div class="title">
|
||||
<span class="special-title" @click="clearThermodynamic"> 人流热力 </span>
|
||||
</div>
|
||||
<div class="change-btn-box">
|
||||
<!-- <el-checkbox-group v-model="changeLayerBtnGroup">
|
||||
<el-checkbox v-for="item in changeLayerBtnListHot" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox>
|
||||
|
|
@ -100,9 +114,10 @@ import VideoList from "./components/VideoList";
|
|||
import SiteList from "./components/SiteList";
|
||||
import { selectByJdWd } from "@/api/construction/index";
|
||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup";
|
||||
import { listPassengerFlow, selectByTime, } from "@/api/civilizedCity.js";
|
||||
import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js";
|
||||
import { selectByAreaEvent, selectKeyArea } from "@/api/area";
|
||||
|
||||
// 时间轴
|
||||
import HorizonTimeLine from './components/HorizonTimeLine'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -111,7 +126,7 @@ export default {
|
|||
|
||||
state: "",
|
||||
constructionSiteData: [],
|
||||
changeLayerBtnList: ['AI事件','视频监控'],
|
||||
changeLayerBtnList: ['AI事件','视频监控', '聚集区'],
|
||||
changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
|
||||
changeLayerBtnListHot: ['全市','本市','外地',],
|
||||
changeLayerBtnGroup: [],
|
||||
|
|
@ -123,6 +138,11 @@ export default {
|
|||
allListDataNum: '',
|
||||
openVideo: false,
|
||||
channelCode: [],
|
||||
hotDataNum: [],
|
||||
// 时间轴
|
||||
timelineData: [],
|
||||
// 热力图当日数据
|
||||
hotDataAll: {}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -130,7 +150,8 @@ export default {
|
|||
complaintEvent,
|
||||
VideoList,
|
||||
SiteList,
|
||||
VideoPlay
|
||||
VideoPlay,
|
||||
HorizonTimeLine
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
|
|
@ -184,8 +205,101 @@ export default {
|
|||
})
|
||||
|
||||
this.thermodynamic()
|
||||
this.personToday()
|
||||
this.getCurrentTime()
|
||||
// 获取当日全部数据
|
||||
for (let i = 0; i < this.timelineData.length; i++) {
|
||||
this.todayAllData(this.timelineData[i].timeId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取年月日
|
||||
getCurrentTime () {
|
||||
const yy = new Date().getFullYear()
|
||||
const m = new Date().getMonth() + 1
|
||||
const mm = m < 10 ? '0' + m : m
|
||||
const dd =
|
||||
new Date().getDate() < 10
|
||||
? '0' + new Date().getDate()
|
||||
: new Date().getDate()
|
||||
|
||||
this.gettime = yy + mm + dd
|
||||
// console.log(this.gettime);
|
||||
|
||||
for (let i = 8; i <= 20; i++) {
|
||||
if (i < 10) {
|
||||
this.timelineData.push({
|
||||
timeId: this.gettime + '0' + i + '00',
|
||||
year: i
|
||||
})
|
||||
} else {
|
||||
this.timelineData.push({
|
||||
timeId: this.gettime + i + '00',
|
||||
year: i
|
||||
})
|
||||
}
|
||||
}
|
||||
// console.log(this.timelineData);
|
||||
},
|
||||
// 全部
|
||||
todayAllData (val) {
|
||||
const params = {
|
||||
timeId: val
|
||||
}
|
||||
this.hotDataAll[val] = []
|
||||
listPassengerFlow(params).then((res) => {
|
||||
// console.log(res.data);
|
||||
// this.hotDataAll.params = res.data;
|
||||
this.hotDataAll[val] = res.data
|
||||
})
|
||||
// console.log(this.hotDataAll);
|
||||
},
|
||||
// 热力图点击事件
|
||||
timeIdData (val) {
|
||||
// 清除实时热力图
|
||||
this.hiMapFun.removeLayerByLayerName('thermodynamic')
|
||||
this.hiMapFun.removeLayerByLayerName('types')
|
||||
const dataA = []
|
||||
const dataNumber = []
|
||||
const dataMax = []
|
||||
|
||||
const listB = this.hotDataAll[val]
|
||||
console.log(listB)
|
||||
// 最大值
|
||||
for (let num = 0; num < listB.length; num++) {
|
||||
dataNumber.push(listB[num].allNums)
|
||||
}
|
||||
const max = Math.max.apply(null, dataNumber)
|
||||
console.log(max) // 16617
|
||||
listB.forEach((item) => {
|
||||
const arr = [0, 0.0, '', '0', '0.0']
|
||||
if (arr.indexOf(item.latitude) == -1) {
|
||||
dataA.push([
|
||||
Number(item.latitude),
|
||||
Number(item.longitude),
|
||||
Number((item.allNums / max).toFixed(1))
|
||||
])
|
||||
}
|
||||
})
|
||||
// 筛选
|
||||
dataA.forEach((item) => {
|
||||
if (item[2] > 0.1) {
|
||||
dataMax.push(item)
|
||||
}
|
||||
})
|
||||
|
||||
this.hiMapFun.thermodynamic(dataMax, 25, 'types')
|
||||
// });
|
||||
},
|
||||
// 获取热力图的按钮
|
||||
hotName (item) {
|
||||
// console.log(item);
|
||||
if (this.checkList.indexOf(item) == -1) {
|
||||
this.checkList.push(item)
|
||||
this.bottomTabList[3].img = this.bottomTabList[3].imgActive
|
||||
}
|
||||
console.log(this.checkList)
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
if (queryString.length > 0) {
|
||||
searchCamera(queryString).then((res) => {
|
||||
|
|
@ -193,6 +307,12 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
// 人口聚集今日事件大于5000
|
||||
personToday () {
|
||||
listPassengerFlowByAllNums().then((res) => {
|
||||
this.hotDataNum = res.data
|
||||
})
|
||||
},
|
||||
handleSelect(item) {
|
||||
this.hiMapFun.clearAllLayers();
|
||||
const arr = item.detail.location.split(",");
|
||||
|
|
@ -286,7 +406,6 @@ export default {
|
|||
},
|
||||
|
||||
layerHandleChange(item) {
|
||||
console.log('this.changeLayerBtnGroup---', this.changeLayerBtnGroup)
|
||||
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||
switch (item) {
|
||||
case "AI事件":
|
||||
|
|
@ -308,6 +427,22 @@ export default {
|
|||
case "视频监控":
|
||||
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
|
||||
break;
|
||||
case "聚集区":
|
||||
this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
|
||||
const hotEventListDetail = []
|
||||
this.hotDataNum.forEach((item) => {
|
||||
hotEventListDetail.push({
|
||||
latLng: { lat: item.latitude, lng: item.longitude },
|
||||
data: item,
|
||||
type: 'personHot'
|
||||
})
|
||||
})
|
||||
this.hiMapFun.addPointsToMap(
|
||||
hotEventListDetail,
|
||||
'poi-blue.png',
|
||||
'PersonHotDetail'
|
||||
)
|
||||
break;
|
||||
case "公园广场":
|
||||
case "商业街区":
|
||||
case "景区景点":
|
||||
|
|
@ -316,7 +451,6 @@ export default {
|
|||
this.hiMapFun.removeLayerByLayerName(item)
|
||||
selectKeyArea({ type: item}).then((res) => {
|
||||
const dataEvent = [];
|
||||
console.log('res.data.data----', res.data.data)
|
||||
res.data.data.forEach((item) => {
|
||||
dataEvent.push(
|
||||
{
|
||||
|
|
@ -352,6 +486,9 @@ export default {
|
|||
case "视频监控":
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
break;
|
||||
case "聚集区":
|
||||
this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -429,8 +566,14 @@ export default {
|
|||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 清除热力图
|
||||
clearThermodynamic() {
|
||||
this.hiMapFun.removeLayerByLayerName("types");
|
||||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||
this.thermodynamicPeopleType = ''
|
||||
},
|
||||
changeThermodynamicPeopleType(value) {
|
||||
this.hiMapFun.removeLayerByLayerName("types");
|
||||
switch (value) {
|
||||
case 'all':
|
||||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||
|
|
@ -444,13 +587,15 @@ export default {
|
|||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||
this.hiMapFun.thermodynamic(this.thermodynamicPeopleNoLocal, 25, "thermodynamic");
|
||||
break;
|
||||
|
||||
}
|
||||
},
|
||||
removeRoadCauseAnalysis () {
|
||||
this.hiMapFun.removerPolygon()
|
||||
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||
this.hiMapFun.removeLayerByLayerName('PersonHotDetail')
|
||||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||
this.hiMapFun.removeLayerByLayerName("types");
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
this.hiMapFun.removeLayerByLayerName('公园广场')
|
||||
this.hiMapFun.removeLayerByLayerName('商业街区')
|
||||
|
|
@ -609,7 +754,31 @@ export default {
|
|||
height:500px;
|
||||
background: rgba($color: #05213b, $alpha: .85);
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 120px;
|
||||
z-index: 1005;
|
||||
width: 555px;
|
||||
height: 80px;
|
||||
background: url("~@/assets/civilizedCity/legend.png") no-repeat;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.timerShaft {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 220px;
|
||||
z-index: 1000;
|
||||
span {
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
top: -39px;
|
||||
font-size: 14px;
|
||||
color: #3c657c;
|
||||
}
|
||||
}
|
||||
.changeLayer {
|
||||
// width: 332px;
|
||||
// height: 67px;
|
||||
|
|
@ -627,6 +796,12 @@ export default {
|
|||
color: rgba(255,255,255,.6);
|
||||
text-align: center;
|
||||
line-height: 99px;
|
||||
.special-title {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #477fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.change-btn-box {
|
||||
height: 92px;
|
||||
|
|
|
|||
|
|
@ -340,8 +340,10 @@ export default {
|
|||
},
|
||||
async getRoadDataWeek () {
|
||||
const res = await getRoadDataByTimeRegion({
|
||||
start: this.weekTime,
|
||||
end: this.preTime
|
||||
// start: this.weekTime,
|
||||
// end: this.preTime
|
||||
begin: this.weekTime,
|
||||
over: this.preTime
|
||||
})
|
||||
// 道路事件 pm>200
|
||||
const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
|
||||
|
|
@ -352,8 +354,10 @@ export default {
|
|||
},
|
||||
async getRoadDataMonth () {
|
||||
const res = await getRoadDataByTimeRegion({
|
||||
start: this.monthTime,
|
||||
end: this.preTime
|
||||
// start: this.monthTime,
|
||||
// end: this.preTime
|
||||
begin: this.monthTime,
|
||||
over: this.preTime
|
||||
})
|
||||
// 道路事件 pm>200
|
||||
const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
|
||||
|
|
@ -365,7 +369,7 @@ export default {
|
|||
const param = {
|
||||
longitude: data.lng,
|
||||
latitude: data.lat,
|
||||
radius: 3000
|
||||
radius: 1000
|
||||
// start: '2021-05-17 00:00:00',
|
||||
// end: '2022-05-18 00:00:00'
|
||||
}
|
||||
|
|
@ -409,7 +413,7 @@ export default {
|
|||
const param = {
|
||||
longitude: data.latLng.lng,
|
||||
latitude: data.latLng.lat,
|
||||
radius: 3000,
|
||||
radius: 1000,
|
||||
start: newStartTime,
|
||||
end: newEndTime
|
||||
}
|
||||
|
|
@ -458,7 +462,7 @@ export default {
|
|||
const param = {
|
||||
longitude: data.latLng.lng,
|
||||
latitude: data.latLng.lat,
|
||||
radius: 3000,
|
||||
radius: 1000,
|
||||
start: newStartTime,
|
||||
end: newEndTime
|
||||
}
|
||||
|
|
@ -487,7 +491,7 @@ export default {
|
|||
const param = {
|
||||
gpsX: data.lng,
|
||||
gpsY: data.lat,
|
||||
radius: 3000
|
||||
radius: 1000
|
||||
}
|
||||
|
||||
const res = await selectAllByGps(param)
|
||||
|
|
@ -548,7 +552,7 @@ export default {
|
|||
|
||||
// 圈选查询
|
||||
circle (latlng) {
|
||||
this.hiMapFun.addCircleToMap(latlng, 3800)
|
||||
this.hiMapFun.addCircleToMap(latlng, 1200)
|
||||
},
|
||||
removeLayer (data) {
|
||||
this.hiMapFun.removeLayerByLayerName(data.layerName)
|
||||
|
|
|
|||
Loading…
Reference in New Issue