wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

补充漏提代码

This commit is contained in:
gounaikang@hisense.com 2022-08-23 10:38:32 +08:00
parent 9e4e0eedc9
commit e75347843e
3 changed files with 368 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
src/views/pages/area/components/HorizonTimeLine.vue Normal file
View File

@ -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>

195
src/views/pages/area/index.vue
View File

@ -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;

22
src/views/pages/roadGovernance/components/RoadMain.vue
View File

@ -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)