From 13906d0efa0d3411ee5cd4f01d086a56632ee74d Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Mon, 07 Nov 2022 15:21:00 +0800
Subject: [PATCH] 郭世朋提交走航车监测日报页面
---
src/views/car/index.vue | 416 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 236 insertions(+), 180 deletions(-)
diff --git a/src/views/car/index.vue b/src/views/car/index.vue
index 849a1f4..6027950 100644
--- a/src/views/car/index.vue
+++ b/src/views/car/index.vue
@@ -1,21 +1,21 @@
<template>
<div class="main_body">
<el-container
- style="height: 100%"
+ style="height: 100%"
>
<el-aside
- v-if="this.$store.state.aside"
- width="300px"
- style="background-color: rgb(238, 241, 246);padding-top:10px"
+ v-if="this.$store.state.aside"
+ width="300px"
+ style="background-color: rgb(238, 241, 246);padding-top:10px"
>
<span style="font-size:13px;padding-left:10px;font-weight:500;color:rgb(64, 158, 255)">���������������</span>
<el-menu style="margin-top:10px">
<el-menu-item
- v-for="(item,index) in defaultData"
- :key="index"
- style="display: flex;justify-content: space-between;align-items: center;padding-right: 0;border-bottom:1px solid #eee"
- :index="(index+1 + '-' + index + 1).toString()"
- @click="changeCarData(item)"
+ v-for="(item,index) in defaultData"
+ :key="index"
+ style="display: flex;justify-content: space-between;align-items: center;padding-right: 0;border-bottom:1px solid #eee"
+ :index="(index+1 + '-' + index + 1).toString()"
+ @click="changeCarData(item)"
>
<span>{{ item.name }}</span>
<i
@@ -23,7 +23,7 @@
class="iconfont iconfaxianzuobiao"
@click="deviceDetail(item.mac,null,item,0)"
/>
-<!-- @click="deviceDetail('p5dnd7a0245390',null,item,0)"-->
+ <!-- @click="deviceDetail('p5dnd7a0245390',null,item,0)"-->
</el-menu-item>
</el-menu>
</el-aside>
@@ -33,64 +33,74 @@
<el-button size="medium" type="primary" icon="el-icon-setting" @click="dialogFormVisible = true">6���������</el-button>
</span>
<span
- v-for="(item, index) in snesorParams"
- :key="index"
- class="left"
- :class="{ click: changeColor == index }"
- @click="changeCode(index)"
+ v-for="(item, index) in snesorParams"
+ :key="index"
+ class="left"
+ :class="{ click: changeColor == index }"
+ @click="changeCode(index)"
>{{ item }}
</span>
<span
- v-for="(item,index) in viewOptions"
- :key="index+ '-only'"
- class="right"
- :class="{ click: changeColor1 == index }"
- @click="changeCode1(index)"
+ v-for="(item,index) in viewOptions"
+ :key="index+ '-only'"
+ class="right"
+ :class="{ click: changeColor1 == index }"
+ @click="changeCode1(index)"
>{{ item }}
</span>
<span v-if="webSocketView" style="float:right;margin: 2px 10px 0 0;">
<el-button size="medium" type="primary" @click="wsStart()">������������</el-button>
</span>
-<!-- <el-date-picker
- v-if="historyView"
- v-model="dateValue"
- value-format="yyyy-MM-dd"
- style="float:right;margin-right: 10px;line-height: 40px;"
- align="right"
- type="date"
- placeholder="������������"
- :picker-options="pickerOptions"
- @change="dateChange"
- />-->
+ <!-- <el-date-picker
+ v-if="historyView"
+ v-model="dateValue"
+ value-format="yyyy-MM-dd"
+ style="float:right;margin-right: 10px;line-height: 40px;"
+ align="right"
+ type="date"
+ placeholder="������������"
+ :picker-options="pickerOptions"
+ @change="dateChange"
+ />-->
<!-- ��������������� -->
- <el-time-picker
- :disabled="isDisTime"
- style="float:right;width: 210px"
- is-range
- v-model="timeValue"
- @blur="blurChange"
- range-separator="���"
- start-placeholder="������������"
- end-placeholder="������������"
- placeholder="������������������">
- </el-time-picker>
+ <!-- <el-time-picker-->
+ <!-- :disabled="isDisTime"-->
+ <!-- style="float:right;width: 210px"-->
+ <!-- is-range-->
+ <!-- v-model="timeValue"-->
+ <!-- @blur="blurChange"-->
+ <!-- range-separator="���"-->
+ <!-- start-placeholder="������������"-->
+ <!-- end-placeholder="������������"-->
+ <!-- placeholder="������������������">-->
+ <!-- </el-time-picker>-->
<!-- ��������������������������� -->
- <el-select v-if="historyView" v-model="dateValue" placeholder="������������" style="float:right;line-height:40px;margin-right:10px;width:140px" @change="dateChange">
- <el-option
- v-for="item in isDataList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- @click.native="dataChangeClick"
- />
- </el-select>
+ <!-- <el-select v-if="historyView" v-model="dateValue" placeholder="������������" style="float:right;line-height:40px;margin-right:10px;width:140px" @change="dateChange">-->
+ <!-- <el-option-->
+ <!-- v-for="item in isDataList"-->
+ <!-- :key="item.value"-->
+ <!-- :label="item.label"-->
+ <!-- :value="item.value"-->
+ <!-- @click.native="dataChangeClick"-->
+ <!-- />-->
+ <!-- </el-select>-->
+ <el-date-picker
+ style="float:right;margin-right:10px;"
+ @change="dateChange"
+ v-model="dateValue"
+ type="datetimerange"
+ :picker-options="threeOptions"
+ range-separator="���"
+ start-placeholder="������������"
+ end-placeholder="������������">
+ </el-date-picker>
<!-- ������/��������������������� -->
<el-select v-model="dataTypeValue" placeholder="������������" style="float:right;line-height:40px;margin-right:10px;width:103px">
<el-option
- v-for="item in dataTypeList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ v-for="item in dataTypeList"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
/>
</el-select>
</div>
@@ -122,17 +132,17 @@
<!-- <el-descriptions title="���������������" border>
</el-descriptions> -->
<div
- style="font-size: 16px;font-weight: 700;margin:10px 0 20px 0;font-size: 16px;
+ style="font-size: 16px;font-weight: 700;margin:10px 0 20px 0;font-size: 16px;
font-weight: 700;color: #303133;"
>���������������</div>
<el-table :data="sensorTableData" border>
<el-table-column
- prop="sensorName"
- label="������"
+ prop="sensorName"
+ label="������"
/>
<el-table-column
- prop="unit"
- label="������"
+ prop="unit"
+ label="������"
/>
<el-table-column label="������">
<template slot-scope="scope">
@@ -176,6 +186,7 @@
<script>
import $ from 'jquery'
import '@/assets/icon/iconfont.css'
+import requestObj from '@/utils/request'
var GPS = {
PI: 3.14159265358979324,
x_pi: 3.14159265358979324 * 3000.0 / 180.0,
@@ -323,7 +334,7 @@
'������',
'������'
],
- dateValue: null,
+ dateValue: [],
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()
@@ -348,6 +359,25 @@
picker.$emit('pick', date)
}
}]
+ },
+ timeOne: '',
+ threeOptions: {
+ onPick: ({ maxDate, minDate }) => {
+ // ������������ ������������
+ this.timeOne = minDate.getTime() // ��������������������� ������������������
+ // ������������������������������������������������������������
+ if (maxDate) this.timeOne = ''
+ },
+ disabledDate: time => {
+ if (this.timeOne) {
+ const WEEK = 3 * 24 * 3600 * 1000 - 1 // ������������3���������1��������� ������3���������
+ const minTime = this.timeOne// ������������
+ const maxTime = this.timeOne + WEEK // ������������
+ return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
+ } else {
+ return time.getTime() > new Date()
+ }
+ }
},
sensorDate: null,
noneData: false,
@@ -404,18 +434,25 @@
watch: {
dataTypeValue(n, o) {
if (this.dataTypeValue === 'webSocket') {
- this.dateValue = null
+ this.dateValue = []
this.historyView = false
this.webSocketView = true
} else {
- this.dateValue = null
+ this.dateValue = []
this.historyView = true
this.webSocketView = false
}
},
+ dateValue(n, o) {
+ if (n === null) {
+ this.dateValue = []
+ }
+ },
viewKey(n, o) {
// console.log(n)
- }
+ },
+ deep: true,
+ immediate: true
// timeValue: {
// handler(newVal, oldVal) {
// this.sensorTime = this.newTime()
@@ -451,11 +488,31 @@
this.newTime(this.timeValue)
this.newDate()
this.getCarData()
- this.$watch('carMac', () => {
- this.getMacDate()
- })
+ // this.$watch('carMac', () => {
+ // this.getMacDate()
+ // })
},
methods: {
+ // ������������������
+ newTime2(timeArr) {
+ var arr = []
+ timeArr.map(v => {
+ var date = new Date(v)
+ var y = date.getFullYear()
+ var m = date.getMonth() + 1
+ m = m < 10 ? '0' + m : m
+ var d = date.getDate()
+ d = d < 10 ? '0' + d : d
+ var h = date.getHours()
+ h = h < 10 ? '0' + h : h
+ var minute = date.getMinutes()
+ minute = minute < 10 ? '0' + minute : minute
+ var s = date.getSeconds()
+ s = s < 10 ? '0' + s : s
+ arr.push(y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s)
+ })
+ return arr
+ },
// ���������������������
deviceDetail(mac, item, items, indexs) {
// console.log('������������������������')
@@ -499,14 +556,12 @@
this.$request({
url: '/cruiser/selectCruisers',
method: 'get'
+ }).then(res => {
+ this.defaultData = res.data
+ this.carMac = res.data[0].mac
+ }).catch(err => {
+ console.log(err)
})
- .then(res => {
- this.defaultData = res.data
- this.carMac = res.data[0].mac
- })
- .catch(err => {
- console.log(err)
- })
},
// ������mac������������������������������
getMacDate() {
@@ -517,21 +572,19 @@
params: {
mac: this.carMac
}
+ }).then(res => {
+ for (let i = 0; i < res.data.length; i++) {
+ // this.isDataList[i].value = res.data.data[i]
+ // this.isDataList[i].label = res.data.data[i]
+ // this.isDataList[i] = { value: res.data.data[i], label: res.data.data[i] }
+ this.isDataList.push({
+ value: res.data[i],
+ label: res.data[i]
+ })
+ }
+ }).catch(err => {
+ console.log(err)
})
- .then(res => {
- for (let i = 0; i < res.data.length; i++) {
- // this.isDataList[i].value = res.data.data[i]
- // this.isDataList[i].label = res.data.data[i]
- // this.isDataList[i] = { value: res.data.data[i], label: res.data.data[i] }
- this.isDataList.push({
- value: res.data[i],
- label: res.data[i]
- })
- }
- })
- .catch(err => {
- console.log(err)
- })
},
// ���������������������������������������
Rad(d) {
@@ -544,7 +597,7 @@
var a = radLat1 - radLat2
var b = this.Rad(lng1) - this.Rad(lng2)
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
- Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
+ Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
s = s * 6378.137 // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000 // ���������������
// s=s.toFixed(4);
@@ -572,21 +625,10 @@
},
// ������������
dateChange(e) {
- this.sensorDate = e;
- // if (this.view) {
- // this.view.removeAllLayers()
- // this.map.clearOverlays()
- // // console.log('������������')
- // }
- // this.dataType = 'history'
- // // this.map = null
- // this.getStart()
- },
- // ������������������������
- dataChangeClick(e) {
- if (!this.isDisTime) {
- // ������������������
- this.newTime(this.timeValue)
+ if (e === null) {
+ this.sensorDate = []
+ } else {
+ this.sensorDate = this.newTime2(e)
if (this.view) {
this.view.removeAllLayers()
this.map.clearOverlays()
@@ -596,8 +638,25 @@
// this.map = null
this.getStart()
}
- this.isDisTime = false
},
+ // ������������������������
+ // dataChangeClick(e) {
+ // if (!this.isDisTime) {
+ // // ������������������
+ // if (this.dateValue.length <= 1) {
+ // this.newTime(this.timeValue)
+ // }
+ // if (this.view) {
+ // this.view.removeAllLayers()
+ // this.map.clearOverlays()
+ // // console.log('������������')
+ // }
+ // this.dataType = 'history'
+ // // this.map = null
+ // this.getStart()
+ // }
+ // this.isDisTime = false
+ // },
// ������������������������
blurChange() {
// ������������������
@@ -625,6 +684,7 @@
}
that.dataType = 'webSocket'
// ������URL
+ // const baseUrl = `${requestObj.baseUrl}`
var socketUrl = 'cruiserWebsocket/' + this.carMac
// ������http���WS
socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
@@ -642,7 +702,7 @@
var lon = parseFloat(JSON.parse(msg.data).flylon)
if (that.msgTemp.length < 2) {
that.msgTemp.push({ lat: lat, lon: lon })
- }
+ }
var distance = that.GetDistance(that.msgTemp[0].lat, that.msgTemp[0].lon, that.msgTemp[1].lat, that.msgTemp[1].lon)
if (distance >= 0.05) {
that.msgTemp.shift()
@@ -652,7 +712,6 @@
that.msgTemp.pop()
}
}
-
},
// ���������������������
getStart() {
@@ -664,18 +723,16 @@
this.view.removeAllLayers()
this.map.clearOverlays()
}
- var time1 = this.sensorDate + ' ' + this.sensorTime[0]
- var time2 = this.sensorDate + ' ' + this.sensorTime[1]
+
this.$request({
url: '/cruiser/cruiserTrajectory',
method: 'get',
params: {
mac: this.carMac,
- time1,
- time2
+ time1: this.sensorDate[0],
+ time2: this.sensorDate[1]
}
}).then(res => {
- console.log(res);
if (!res.data.length) {
this.noneData = true
this.loading = false
@@ -705,7 +762,6 @@
this.loading = false
if (this.responseJSON.length > 0) {
this.noneData = false
- console.log(that.carMac, 'mac')
$.each(this.responseJSON, (item, value) => {
if (typeof (value.flylon) === 'undefined') {
showNoPoints()
@@ -727,7 +783,7 @@
point.a21005 = parseFloat(value.a21005).toFixed(3)
point.a05024 = parseInt(value.a05024)
point.a99054 = parseFloat(value.a99054).toFixed(3)
- if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && that.carMac === 'p5dnd7a0243622') {
+ if (value.dustld - 0 !== 0 && value.dustld - 0 < 100 && (that.carMac === 'p5dnd7a0243622' || that.carMac === 'p5dnd7a0243625')) {
point.dustld = 100
} else {
point.dustld = value.dustld - 0
@@ -765,7 +821,7 @@
that.mapZoom = that.viewport.zoom
that.centerPoint = that.viewport.center
if (that.firstPlayFlag) {
- that.map.centerAndZoom(that.centerPoint, that.mapZoom)
+ that.map.centerAndZoom(that.centerPoint, that.mapZoom)
that.view = new mapvgl.View({
map: that.map
})
@@ -784,14 +840,14 @@
var levels = getGrading(sensor, type, carMac)
$.each(levels, function(index, value) {
var color = value.color
- var data = value.data
+ var data = value.data
if (data.length > 0) {
// ������MapVGL���������������,������������������mapvgl
that.shapeLayer = new mapvgl.ShapeLayer({
color: color, // ���������������
enablePicked: true, // ������������������
selectedIndex: -1, // ���������
- selectedColor: '#ee1111', // ���������������
+ selectedColor: '#ee1111', // ���������������
autoSelect: true, // ������������������������������������������
riseTime: 1800 // ���������������������������
})
@@ -813,7 +869,7 @@
var sw = getPoint(225, point.lng, point.lat, that.distance)
var ne = getPoint(45, point.lng, point.lat, that.distance)
var data = point[sensor]
- // ������������������������������������
+ // ������������������������������������
color = getColorAndLevel(sensor, data).color
var polygon = new BMapGL.Polygon([
new BMapGL.Point(sw.lng, sw.lat), // ���������
@@ -857,7 +913,7 @@
})
var lineLayer = new mapvgl.LineLayer({
color: 'red',
- width: 3,
+ width: 3,
animation: true,
duration: 10, // ������������2s
trailLength: 0.1, // ������������������������0.4
@@ -1236,10 +1292,10 @@
// point���������label������
function setLabelStyle(content, point) {
var label = new BMapGL.Label("<span class='my-maptip'>" + content + '<br /><span>', // ���lable������������
- {
- offset: new BMapGL.Size(-8, -10), // label������������������������label������������������������
- position: point
- }
+ {
+ offset: new BMapGL.Size(-8, -10), // label������������������������label������������������������
+ position: point
+ }
)// label���������
var offsetSize = new BMapGL.Size(0, 0)
@@ -1354,96 +1410,96 @@
body,
html,
#map_container {
- width: 100%;
- height: 100%;
- overflow: hidden;
- margin: 0;
- z-index: 0;
- font-size: 14px;
- font-family: "������������";
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ z-index: 0;
+ font-size: 14px;
+ font-family: "������������";
}
.main_body {
- border: 0;
- margin: 0;
- width: 100%;
- height: 100%;
- position: relative;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ position: relative;
}
#cpm {
- width: 300px;
- height: 100px;
- position: absolute;
- background-color: #ffffff;
- display: none;
- left: 50%;
- top: 50%;
- margin-left: -150px;
- margin-top: -50px;
- z-index: 11;
- color: #000000;
- border: 2px solid #FF7F50;
- font-size: 28px;
- line-height: 100px;
- text-align: center;
+ width: 300px;
+ height: 100px;
+ position: absolute;
+ background-color: #ffffff;
+ display: none;
+ left: 50%;
+ top: 50%;
+ margin-left: -150px;
+ margin-top: -50px;
+ z-index: 11;
+ color: #000000;
+ border: 2px solid #FF7F50;
+ font-size: 28px;
+ line-height: 100px;
+ text-align: center;
}
.BMap_pop > img {
- top: 42px !important;
- margin-left: -10px;
+ top: 42px !important;
+ margin-left: -10px;
}
.BMap_pop div:nth-child(1) div {
- display: none;
+ display: none;
}
.BMap_pop div:nth-child(3) {
- display: none;
+ display: none;
}
.BMap_pop div:nth-child(5) {
- display: none;
+ display: none;
}
.BMap_pop div:nth-child(7) {
- display: none;
+ display: none;
}
.BMap_pop div:nth-child(9) {
- top: 35px !important;
- border-radius: 5px;
+ top: 35px !important;
+ border-radius: 5px;
}
#selectSenor {
- position: absolute;
- z-index: 1;
- left: 30px;
- top: 20px;
- font-size: 20px;
- background: lightgrey;
+ position: absolute;
+ z-index: 1;
+ left: 30px;
+ top: 20px;
+ font-size: 20px;
+ background: lightgrey;
}
#type {
- position: absolute;
- z-index: 1;
- left: 30px;
- top: 50px;
- font-size: 20px;
- background: lightgrey;
+ position: absolute;
+ z-index: 1;
+ left: 30px;
+ top: 50px;
+ font-size: 20px;
+ background: lightgrey;
}
button {
- font-size: 15px;
+ font-size: 15px;
}
.sensorLevel {
- position: absolute;
- z-index: 1;
- bottom: 50px;
- left: 10px;
- width: 100px;
- height: 200px;
+ position: absolute;
+ z-index: 1;
+ bottom: 50px;
+ left: 10px;
+ width: 100px;
+ height: 200px;
}
.carTop {
position: absolute;
@@ -1473,9 +1529,9 @@
border-right: 1px solid #aaa;
}
.carTop{
- &>.left:nth-child(1){
- border-radius: 5px 0 0 5px;
- }
+ &>.left:nth-child(1){
+ border-radius: 5px 0 0 5px;
+ }
}
.carTop {
.left{
--
Gitblit v1.8.0