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

31
src/api/road.js
View File

@ -12,59 +12,66 @@ import request from '@/utils/request'
// method: 'get' // method: 'get'
// }) // })
// } // }
export function getRoadData (params) { export function getRoadData(params) {
return request({ return request({
url: '/api/project/listRoadData', url: '/api/project/listRoadData',
method: 'get', method: 'get',
params params
}) })
} }
export function getRoadDataByTimeRegion (params) { export function getRoadDataByTimeRegion(params) {
return request({ return request({
url: '/api/project/listRoadDataByTimeRegion', url: '/api/project/listRoadDataByTimeRegion',
method: 'get', method: 'get',
params params
}) })
} }
//查询经纬度范围工地 // 查询经纬度范围工地
export function listBuildingSiteByPoints (params) { export function listBuildingSiteByPoints(params) {
return request({ return request({
url: '/api/project/listBuildingSiteByPoints', url: '/api/project/listBuildingSiteByPoints',
method: 'get', method: 'get',
params params
}) })
} }
export function listSedimentTrailByPoints (params) { export function listSedimentTrailByPoints(params) {
return request({ return request({
url: '/api/project/listSedimentTrailByPoints', url: '/api/project/listSedimentTrailByPoints',
method: 'get', method: 'get',
params params
}) })
} }
export function listTrailSanitationByPoints (params) { export function listTrailSanitationByPoints(params) {
return request({ return request({
url: '/api/project/listTrailSanitationByPoints', url: '/api/project/listTrailSanitationByPoints',
method: 'get', method: 'get',
params params
}) })
} }
export function selectAllByGps (params) { export function selectAllByGps(params) {
return request({ return request({
url: '/api/project/selectAllByGps', url: '/api/project/selectAllByGps',
method: 'get', method: 'get',
params params
}) })
} }
//查询所有工地 // 查询所有工地
export function selectBuildSite (params) { export function selectBuildSite(params) {
return request({ return request({
url: '/api/project/selectBuildSite', url: '/api/project/selectBuildSite',
method: 'get', method: 'get',
params params
}) })
} }
// 查询所有渣土车
export function selectAllTrailSanitation (params) { export function selectAllSedimentTrail(params) {
return request({
url: '/api/project/selectAllSedimentTrail',
method: 'get',
params
})
}
export function selectAllTrailSanitation(params) {
return request({ return request({
url: '/api/project/selectAllTrailSanitation', url: '/api/project/selectAllTrailSanitation',
method: 'get', method: 'get',
@ -72,7 +79,7 @@ export function selectAllTrailSanitation (params) {
}) })
} }
export function selectRoadData (params) { export function selectRoadData(params) {
return request({ return request({
url: '/api/project/selectRoadData', url: '/api/project/selectRoadData',
method: 'get', method: 'get',

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

@ -1,16 +1,21 @@
<template> <template>
<div class="cause-analysis"> <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> <h2>线索分析</h2>
<p class="range">统计范围：{{timeRegion}} 00:00:00-24:00:00</p> <p class="range">统计范围：{{ timeRegion }} 00:00:00-24:00:00</p>
<main> <main>
<div class="summary"> <div class="summary">
<div class="summary-content" <div
v-for="item in summaryData" class="summary-content"
:key="item.index" v-for="item in summaryData"
:key="item.index"
> >
<p>{{item.name}}</p> <p>{{ item.name }}</p>
<p class="num">{{item.num+item.unit}}</p> <p class="num">{{ item.num + item.unit }}</p>
</div> </div>
</div> </div>
<div> <div>
@ -21,23 +26,18 @@
class="table" class="table"
:data="buildingData" :data="buildingData"
height="250" height="250"
:cell-style="{ color: '#fff','text-align': 'center' }" :cell-style="{ color: '#fff', 'text-align': 'center' }"
:header-cell-style="{ color: '#fff','text-align': 'center' }" :header-cell-style="{ color: '#fff', 'text-align': 'center' }"
> >
<el-table-column <el-table-column width="60" label="序号" type="index">
width="60"
label="序号"
type="index">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="gdmc" prop="gdmc"
label="项目名称" label="项目名称"
show-overflow-tooltip> show-overflow-tooltip
>
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="sgwz" label="位置" show-overflow-tooltip>
prop="sgwz"
label="位置"
show-overflow-tooltip>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
@ -46,21 +46,14 @@
class="table" class="table"
:data="slagTruckData" :data="slagTruckData"
height="250" height="250"
:cell-style="{ color: '#fff','text-align': 'center' }" :cell-style="{ color: '#fff', 'text-align': 'center' }"
:header-cell-style="{ color: '#fff','text-align': 'center' }" :header-cell-style="{ color: '#fff', 'text-align': 'center' }"
> >
<el-table-column <el-table-column width="60" label="序号" type="index">
width="60"
label="序号"
type="index">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="simCardNum" label="车牌号">
prop="simCardNum"
label="车牌号">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="status" label="所属单位">
prop="所属单位"
label="所属单位">
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
@ -69,21 +62,13 @@
class="table" class="table"
:data="sanitationTruckData" :data="sanitationTruckData"
height="250" height="250"
:cell-style="{ color: '#fff','text-align': 'center' }" :cell-style="{ color: '#fff', 'text-align': 'center' }"
:header-cell-style="{ color: '#fff','text-align': 'center' }" :header-cell-style="{ color: '#fff', 'text-align': 'center' }"
> >
<el-table-column <el-table-column width="60" label="序号" type="index">
width="60"
label="序号"
type="index">
</el-table-column> </el-table-column>
<el-table-column <el-table-column prop="cph" label="车牌号"> </el-table-column>
prop="cph" <el-table-column prop="status" label="作业类型">
label="车牌号">
</el-table-column>
<el-table-column
prop="作业类型"
label="作业类型">
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-tab-pane> </el-tab-pane>
@ -257,8 +242,15 @@ export default {
}, },
sanitationTruckData () { sanitationTruckData () {
this.summaryData[3].num = this.sanitationTruckData.length 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: {}, computed: {},
methods: { methods: {
@ -298,7 +290,7 @@ export default {
color: #66ffff; color: #66ffff;
font-size: 20px; font-size: 20px;
margin-bottom: 30px; margin-bottom: 30px;
background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px background: url('~@/assets/img/roadGovernancetitlebg.png') no-repeat 97px
center; center;
} }
.range { .range {

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

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