代码优化
This commit is contained in:
BianLzhaoMin
parent
5bd0f38ff2
commit
f62151ef83
|
|
@ -115,7 +115,7 @@
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备编号" prop="iotId">
|
<el-form-item label="设备编号">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="IOTForm.iotId"
|
v-model="IOTForm.iotId"
|
||||||
filterable
|
filterable
|
||||||
|
|
@ -276,6 +276,13 @@ export default {
|
||||||
},
|
},
|
||||||
// 提交
|
// 提交
|
||||||
submit() {
|
submit() {
|
||||||
|
const isType = this.typeList.some((e) => e == this.IOTForm.iotType)
|
||||||
|
if (isType) {
|
||||||
|
this.$message.error(
|
||||||
|
'当前机具已绑定改IOT类型设备，不可重复绑定！',
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
// 校验
|
// 校验
|
||||||
this.$refs.IOTForm.validate(async (valid) => {
|
this.$refs.IOTForm.validate(async (valid) => {
|
||||||
|
|
|
||||||
|
|
@ -40,18 +40,21 @@
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-tabs type="border-card" class="map-left">
|
<el-tabs type="border-card" class="map-left">
|
||||||
<el-tab-pane label="行程">
|
<el-tab-pane label="行程">
|
||||||
<div
|
<template v-if="tripList.length > 0">
|
||||||
class="trip-container"
|
|
||||||
@click="handlePreviewTrip(item, index)"
|
|
||||||
v-for="(item, index) in tripList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="left-num">{{ index + 1 }}</div>
|
|
||||||
<div
|
<div
|
||||||
class="right-info"
|
class="trip-container"
|
||||||
:class="{ active: activeIndex === index }"
|
@click="handlePreviewTrip(item, index)"
|
||||||
|
v-for="(item, index) in tripList"
|
||||||
|
:key="index"
|
||||||
>
|
>
|
||||||
<!-- <ul>
|
<div class="left-num">{{ index + 1 }}</div>
|
||||||
|
<div
|
||||||
|
class="right-info"
|
||||||
|
:class="{
|
||||||
|
active: activeIndex === index,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- <ul>
|
||||||
<li>{{ item.tripdistance }}KM</li>
|
<li>{{ item.tripdistance }}KM</li>
|
||||||
<li>{{ item.drivingDuration }}秒</li>
|
<li>{{ item.drivingDuration }}秒</li>
|
||||||
<li>{{ item.maxspeed }}KM/h</li>
|
<li>{{ item.maxspeed }}KM/h</li>
|
||||||
|
|
@ -64,63 +67,77 @@
|
||||||
<li>平均速度</li>
|
<li>平均速度</li>
|
||||||
</ul> -->
|
</ul> -->
|
||||||
|
|
||||||
<div style="margin-top: 10px">
|
<div style="margin-top: 10px">
|
||||||
<div class="time-container">
|
<div class="time-container">
|
||||||
<span class="radius-span">始</span>
|
<span class="radius-span"
|
||||||
<span>{{ item.startTime }}</span>
|
>始</span
|
||||||
|
>
|
||||||
|
<span>{{
|
||||||
|
item.startTime
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{{ item.startAddress }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<h3>{{ item.startAddress }}</h3>
|
<div style="margin-top: 10px">
|
||||||
</div>
|
<div class="time-container">
|
||||||
<div style="margin-top: 10px">
|
<span
|
||||||
<div class="time-container">
|
class="radius-span"
|
||||||
<span
|
style="
|
||||||
class="radius-span"
|
background-color: #e6a23c;
|
||||||
style="
|
"
|
||||||
background-color: #e6a23c;
|
>终</span
|
||||||
"
|
>
|
||||||
>终</span
|
<span>{{ item.endTime }}</span>
|
||||||
>
|
</div>
|
||||||
<span>{{ item.endTime }}</span>
|
<h3>{{ item.endAddress }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<h3>{{ item.endAddress }}</h3>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ loadingData ? '数据加载中...' : 暂无数据 }}
|
||||||
|
</template>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="停留点">
|
<el-tab-pane label="停留点">
|
||||||
<div
|
<template v-if="parkList.length > 0">
|
||||||
class="point-container"
|
<div
|
||||||
v-for="(item, index) in parkList"
|
class="point-container"
|
||||||
:key="index"
|
v-for="(item, index) in parkList"
|
||||||
>
|
:key="index"
|
||||||
<div class="time-container">
|
>
|
||||||
<span class="radius-span">{{
|
<div class="time-container">
|
||||||
index + 1
|
<span class="radius-span">{{
|
||||||
}}</span>
|
index + 1
|
||||||
<span>{{ item.startTime }}</span>
|
}}</span>
|
||||||
<span
|
<span>{{ item.startTime }}</span>
|
||||||
>{{ item.hours }}时{{
|
<span
|
||||||
item.mints
|
>{{ item.hours }}时{{
|
||||||
}}分</span
|
item.mints
|
||||||
>
|
}}分</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<h3>{{ item.address }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<h3>{{ item.address }}</h3>
|
</template>
|
||||||
</div>
|
<template v-else> 暂无数据 </template>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="报警">
|
<el-tab-pane label="报警">
|
||||||
<div
|
<template v-if="warningList.length > 0">
|
||||||
class="point-container"
|
<div
|
||||||
v-for="(item, index) in warningList"
|
class="point-container"
|
||||||
:key="index"
|
v-for="(item, index) in warningList"
|
||||||
>
|
:key="index"
|
||||||
<div class="time-container">
|
>
|
||||||
<span class="radius-span">{{
|
<div class="time-container">
|
||||||
index + 1
|
<span class="radius-span">{{
|
||||||
}}</span>
|
index + 1
|
||||||
<span>{{ item.warnTime }}</span>
|
}}</span>
|
||||||
|
<span>{{ item.warnTime }}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{{ item.startAlarm }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<h3>{{ item.startAlarm }}</h3>
|
</template>
|
||||||
</div>
|
<template v-else> 暂无数据 </template>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -193,6 +210,7 @@ export default {
|
||||||
trackAni: null, // 轨迹实例
|
trackAni: null, // 轨迹实例
|
||||||
calLon: '',
|
calLon: '',
|
||||||
calLat: '',
|
calLat: '',
|
||||||
|
|
||||||
// 查询设备行程信息的参数
|
// 查询设备行程信息的参数
|
||||||
tripParams: {
|
tripParams: {
|
||||||
beginTime: moment()
|
beginTime: moment()
|
||||||
|
|
@ -206,18 +224,20 @@ export default {
|
||||||
activeIndex: '',
|
activeIndex: '',
|
||||||
// 停留点信息
|
// 停留点信息
|
||||||
parkList: [],
|
parkList: [],
|
||||||
|
warningList: [],
|
||||||
|
loadingData: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {},
|
||||||
this.handleQuery()
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
Promise.all([this.getIotDeviceLocation()])
|
Promise.all([this.getIotDeviceLocation(), this.handleQuery()])
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
|
this.loadingData = false
|
||||||
this.initMap()
|
this.initMap()
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err)
|
console.log(err)
|
||||||
|
this.loadingData = false
|
||||||
})
|
})
|
||||||
|
|
||||||
// this.getIotDeviceLocation()
|
// this.getIotDeviceLocation()
|
||||||
|
|
@ -231,9 +251,12 @@ export default {
|
||||||
this.trackAni.cancel()
|
this.trackAni.cancel()
|
||||||
}
|
}
|
||||||
// 2. 清除地图上面的标点覆盖物 并清除地图实例
|
// 2. 清除地图上面的标点覆盖物 并清除地图实例
|
||||||
this.map.clearOverlays()
|
|
||||||
this.map.destroy()
|
if (this.map) {
|
||||||
this.map = null
|
this.map.clearOverlays()
|
||||||
|
this.map.destroy()
|
||||||
|
this.map = null
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -250,6 +273,10 @@ export default {
|
||||||
},
|
},
|
||||||
/** 查询按钮 */
|
/** 查询按钮 */
|
||||||
async handleQuery() {
|
async handleQuery() {
|
||||||
|
if (!this.queryForm.date) {
|
||||||
|
this.$message.error('请选择时间范围！')
|
||||||
|
return
|
||||||
|
}
|
||||||
this.tripParams.iotId = this.iotCode
|
this.tripParams.iotId = this.iotCode
|
||||||
const res = await getIotDeviceTripApi({ ...this.tripParams })
|
const res = await getIotDeviceTripApi({ ...this.tripParams })
|
||||||
console.log(res, '行程信息--')
|
console.log(res, '行程信息--')
|
||||||
|
|
@ -448,8 +475,10 @@ export default {
|
||||||
},
|
},
|
||||||
/** 时间选择器 */
|
/** 时间选择器 */
|
||||||
onChangeTime(val) {
|
onChangeTime(val) {
|
||||||
this.tripParams.beginTime = val[0]
|
if (val) {
|
||||||
this.tripParams.endTime = val[1]
|
this.tripParams.beginTime = val[0]
|
||||||
|
this.tripParams.endTime = val[1]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue