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

路网渣土车扎点以及弹窗数据

This commit is contained in:
851673013@qq.com 2022-08-23 14:33:16 +08:00
parent e75347843e
commit 9ae47a2e2f
3 changed files with 155 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/road.js
View File

@ -63,7 +63,14 @@ export function selectBuildSite (params) {
params
})
}
// 查询所有渣土车
export function selectAllSedimentTrail(params) {
return request({
url: '/api/project/selectAllSedimentTrail',
method: 'get',
params
})
}
export function selectAllTrailSanitation(params) {
return request({
url: '/api/project/selectAllTrailSanitation',

60
src/views/pages/roadGovernance/components/CauseAnalysis.vue
View File

@ -1,11 +1,16 @@
<template>
<div class="cause-analysis">
<el-button class="close-btn" @click="close" icon="el-icon-close"></el-button>
<el-button
class="close-btn"
@click="close"
icon="el-icon-close"
></el-button>
<h2>线索分析</h2>
<p class="range">统计范围：{{ timeRegion }} 00:00:00-24:00:00</p>
<main>
<div class="summary">
<div class="summary-content"
<div
class="summary-content"
v-for="item in summaryData"
:key="item.index"
>
@ -24,20 +29,15 @@
:cell-style="{ color: '#fff', 'text-align': 'center' }"
:header-cell-style="{ color: '#fff', 'text-align': 'center' }"
>
<el-table-column
width="60"
label="序号"
type="index">
<el-table-column width="60" label="序号" type="index">
</el-table-column>
<el-table-column
prop="gdmc"
label="项目名称"
show-overflow-tooltip>
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="sgwz"
label="位置"
show-overflow-tooltip>
<el-table-column prop="sgwz" label="位置" show-overflow-tooltip>
</el-table-column>
</el-table>
</el-tab-pane>
@ -49,18 +49,11 @@
:cell-style="{ color: '#fff', 'text-align': 'center' }"
:header-cell-style="{ color: '#fff', 'text-align': 'center' }"
>
<el-table-column
width="60"
label="序号"
type="index">
<el-table-column width="60" label="序号" type="index">
</el-table-column>
<el-table-column
prop="simCardNum"
label="车牌号">
<el-table-column prop="simCardNum" label="车牌号">
</el-table-column>
<el-table-column
prop="所属单位"
label="所属单位">
<el-table-column prop="status" label="所属单位">
</el-table-column>
</el-table>
</el-tab-pane>
@ -72,18 +65,10 @@
:cell-style="{ color: '#fff', 'text-align': 'center' }"
:header-cell-style="{ color: '#fff', 'text-align': 'center' }"
>
<el-table-column
width="60"
label="序号"
type="index">
<el-table-column width="60" label="序号" type="index">
</el-table-column>
<el-table-column
prop="cph"
label="车牌号">
</el-table-column>
<el-table-column
prop="作业类型"
label="作业类型">
<el-table-column prop="cph" label="车牌号"> </el-table-column>
<el-table-column prop="status" label="作业类型">
</el-table-column>
</el-table>
</el-tab-pane>
@ -257,8 +242,15 @@ export default {
},
sanitationTruckData () {
this.summaryData[3].num = this.sanitationTruckData.length
},
slagTruckData () {
this.summaryData[6].num = this.slagTruckData[0].coordinateX
this.summaryData[7].num = this.slagTruckData[0].coordinateY
this.summaryData[5].num = this.slagTruckData[0].speed
this.summaryData[4].num = this.slagTruckData[0].fuel
this.summaryData[1].num = this.slagTruckData[0].angle
this.summaryData[2].num = this.slagTruckData.length
}
},
computed: {},
methods: {
@ -298,7 +290,7 @@ export default {
color: #66ffff;
font-size: 20px;
margin-bottom: 30px;
background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px
background: url('~@/assets/img/roadGovernancetitlebg.png') no-repeat 97px
center;
}
.range {

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

@ -26,7 +26,7 @@
:key="item.index"
>
<p>{{ item.name }}</p>
<p>{{ item.dataNum || "0" }}</p>
<p>{{ item.dataNum || '0' }}</p>
</div>
</div>
<el-table
@ -36,18 +36,23 @@
:cell-style="{
color: '#fff',
'text-align': 'center',
cursor: 'pointer',
cursor: 'pointer'
}"
:header-cell-style="{
color: '#7ad9fe',
'background-color': 'rgba(40,153,199,.2)',
'text-align': 'center',
'text-align': 'center'
}"
style="width: 100%"
>
<el-table-column width="48" label="序号" type="index">
</el-table-column>
<el-table-column width="90" prop="roadName" label="道路" show-overflow-tooltip>
<el-table-column
width="90"
prop="roadName"
label="道路"
show-overflow-tooltip
>
</el-table-column>
<el-table-column width="72" prop="pm10" label="PM10">
</el-table-column>
@ -122,6 +127,7 @@ import {
listTrailSanitationByPoints,
selectAllByGps,
selectBuildSite,
selectAllSedimentTrail,
getRoadDataByTimeRegion,
selectAllTrailSanitation,
selectRoadData
@ -242,11 +248,41 @@ export default {
created () {
const currentDate = new Date()
currentDate.setTime(currentDate.getTime())
this.monthTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + '01' + ' ' + '00:00:00'
this.currentTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
this.monthTime =
currentDate.getFullYear() +
'-' +
(currentDate.getMonth() + 1 > 10
? currentDate.getMonth() + 1
: '0' + (currentDate.getMonth() + 1)) +
'-' +
'01' +
' ' +
'00:00:00'
this.currentTime =
currentDate.getFullYear() +
'-' +
(currentDate.getMonth() + 1 > 10
? currentDate.getMonth() + 1
: '0' + (currentDate.getMonth() + 1)) +
'-' +
yDate +
' ' +
'00:00:00'
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
this.preTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
const yDate =
currentDate.getDate() > 9
? currentDate.getDate()
: '0' + currentDate.getDate()
this.preTime =
currentDate.getFullYear() +
'-' +
(currentDate.getMonth() + 1 > 10
? currentDate.getMonth() + 1
: '0' + (currentDate.getMonth() + 1)) +
'-' +
yDate +
' ' +
'00:00:00'
currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)
// this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
this.weekTime = this.getWeekDate()
@ -308,21 +344,21 @@ export default {
methods: {
// 获取本周一日期
getWeekDate () {
let now = new Date()
let nowTime = now.getTime();
let day = now.getDay();
let oneDayTime = 1000 * 60 * 60 * 24;
let mondayTime = nowTime - (day - 1) * oneDayTime;
let lw = new Date(mondayTime);
let lastY = lw.getFullYear();
let lastM = lw.getMonth() + 1;
let lastD = lw.getDate();
let startData =
const now = new Date()
const nowTime = now.getTime()
const day = now.getDay()
const oneDayTime = 1000 * 60 * 60 * 24
const mondayTime = nowTime - (day - 1) * oneDayTime
const lw = new Date(mondayTime)
const lastY = lw.getFullYear()
const lastM = lw.getMonth() + 1
const lastD = lw.getDate()
const startData =
lastY +
"-" +
(lastM < 10 ? "0" + lastM : lastM) +
"-" +
(lastD < 10 ? "0" + lastD : lastD);
'-' +
(lastM < 10 ? '0' + lastM : lastM) +
'-' +
(lastD < 10 ? '0' + lastD : lastD)
return startData + ' ' + '00:00:00'
},
// 道路污染数据 昨日
@ -403,12 +439,8 @@ export default {
// (endTime.getDate() > 10 ? endTime.getDate() : '0' + endTime.getDate()) +
// ' ' +
// '00:00:00'
newEndTime = data.data.dt +
' ' +
'23:59:59'
newStartTime = data.data.dt +
' ' +
'00:00:00'
newEndTime = data.data.dt + ' ' + '23:59:59'
newStartTime = data.data.dt + ' ' + '00:00:00'
const param = {
longitude: data.latLng.lng,
@ -419,16 +451,15 @@ export default {
}
const res = await listSedimentTrailByPoints(param)
// this.slagTruckData = res.data.data
this.slagTruckData = []
this.slagTruckData = res.data.data
const dataEvent = []
for (const key in this.slagTruckData) {
// console.log(this.slagTruckData[key][0])
// console.log('this.slagTruckData[key][0]', key, this.slagTruckData[key])
dataEvent.push({
latLng: {
lat: Number(this.slagTruckData[key][0].latitude),
lng: Number(this.slagTruckData[key][0].longitude)
lat: Number(this.slagTruckData[key].latitude),
lng: Number(this.slagTruckData[key].longitude)
}
})
}
@ -452,12 +483,8 @@ export default {
// (endTime.getDate() > 10 ? endTime.getDate() : '0' + endTime.getDate()) +
// ' ' +
// '00:00:00'
newEndTime = data.data.dt +
' ' +
'23:59:59'
newStartTime = data.data.dt +
' ' +
'00:00:00'
newEndTime = data.data.dt + ' ' + '23:59:59'
newStartTime = data.data.dt + ' ' + '00:00:00'
const param = {
longitude: data.latLng.lng,
@ -473,6 +500,7 @@ export default {
this.sanitationTruckData = res.data.data
const dataEvent = []
this.sanitationTruckData.forEach((item) => {
item.status = '清扫'
const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) {
dataEvent.push({
@ -576,6 +604,25 @@ export default {
this.roadOnMap()
break
case 'slagTruck':
selectAllSedimentTrail().then((res) => {
const dataEvent = []
res.data.data.forEach((item) => {
const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.latitude) == -1) {
dataEvent.push({
latLng: {
lat: Number(item.latitude),
lng: Number(item.longitude)
}
})
}
})
this.hiMapFun.addPointsToMap(
dataEvent,
'slagTruck.png',
'slagTruck'
)
})
break
case 'sanitationTruck':
selectAllTrailSanitation().then((res) => {
@ -626,6 +673,8 @@ export default {
this.hiMapFun.removerPolyline()
break
case 'slagTruck':
this.hiMapFun.removeLayerByLayerName('slagTruckAll')
break
case 'sanitationTruck':
this.hiMapFun.removeLayerByLayerName('sanitationTruckAll')
@ -660,7 +709,7 @@ export default {
if (selectStatus) {
// 暂时没有数据
} else {
this.hiMapFun.removeLayerByLayerName('slagTruck')
this.hiMapFun.removeLayerByLayerName('slagTruckAll')
}
break
case 'sanitationTruck':
@ -762,7 +811,7 @@ export default {
}
}
</script>
<style lang='scss'>
<style lang="scss">
::-webkit-scrollbar {
width: 8px !important;
// height: 720px;
@ -773,7 +822,7 @@ export default {
background-color: rgba(255, 255, 255, 0.15) !important;
}
</style>
<style lang='scss' scoped>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import url(../../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@ -789,8 +838,8 @@ export default {
top: 0;
left: 0;
z-index: 1005;
background: url("~@/assets/img/titlevideo.png") no-repeat,
url("~@/assets/img/titlevideobg.png") no-repeat;
background: url('~@/assets/img/titlevideo.png') no-repeat,
url('~@/assets/img/titlevideobg.png') no-repeat;
}
.road-header {
@ -829,8 +878,8 @@ export default {
margin-left: 86px;
width: 200px;
text-align: center;
background: url("~@/assets/img/picture_left.png") no-repeat left center,
url("~@/assets/img/picture_right.png") no-repeat right center;
background: url('~@/assets/img/picture_left.png') no-repeat left center,
url('~@/assets/img/picture_right.png') no-repeat right center;
span {
font-size: 20px;
font-weight: bold;
@ -903,7 +952,7 @@ export default {
div {
width: 100px;
height: 68px;
background: url("~@/assets/img/roadGovernancebg.png") no-repeat;
background: url('~@/assets/img/roadGovernancebg.png') no-repeat;
background-size: 100% 100%;
text-align: center;
cursor: pointer;
@ -1022,7 +1071,7 @@ export default {
z-index: 1005;
width: 555px;
height: 80px;
background: url("~@/assets/roadGovernance/legend.png") no-repeat;
background: url('~@/assets/roadGovernance/legend.png') no-repeat;
}
}
.btn {