定位页面优化

This commit is contained in:
BianLzhaoMin 2024-08-08 14:03:19 +08:00
parent b9995a1755
commit 440198e36b
3 changed files with 406 additions and 246 deletions

View File

@ -96,3 +96,11 @@ export const getIotDeviceLocationApi = (data) => {
export const getIotDeviceTripApi = (data) => {
return request.post('/material/iotMachine/searchItinerary', data)
}
/** 获取机具设备的停留点信息 */
export const getIotDeviceParkDetailApi = (data) => {
return request.post('/material/iotMachine/reportParkDetailByTime', data)
}
/** 获取机具设备的报警信息 */
export const getIotDeviceAlarmApi = (data) => {
return request.post('/material/iotMachine/reportAlarm', data)
}

View File

@ -1,257 +1,351 @@
<template>
<div class="app-container" v-if="props.isShow">
<PageHeader :pageContent="pageContent" @goBack="goBack" />
<el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch">
<el-form-item label="关键字" prop="keyWord">
<el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
<el-button type="primary" size="small" @click="bindNewIOT">绑定新设备</el-button>
</el-form-item>
</el-form>
<div class="app-container" v-if="props.isShow">
<PageHeader :pageContent="pageContent" @goBack="goBack" />
<el-form
:model="queryForm"
ref="queryForm"
size="small"
:inline="true"
label-width="68px"
v-show="showSearch"
>
<el-form-item label="关键字" prop="keyWord">
<el-input
v-model="queryForm.keyWord"
clearable
placeholder="请输入关键字"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery"
>搜索</el-button
>
<el-button type="primary" size="small" @click="bindNewIOT"
>绑定新设备</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-row :gutter="10" class="mb8">
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column
type="index"
label="序号"
align="center"
width="55"
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
/>
<el-table-column label="设备类型" prop="iotTypeName" align="center" />
<el-table-column label="设备编号" prop="iotCode" align="center" />
<el-table-column label="设备状态" prop="iotStatus" align="center">
<!-- iotStatus 0 在线 1 掉线 -->
<template v-slot="{ row }">
<el-tag v-if="row.iotStatus == 0" type="success">在线</el-tag>
<el-tag v-else type="danger">掉线</el-tag>
</template>
</el-table-column>
<el-table-column label="绑定日期" prop="bindTime" align="center" />
<el-table-column label="操作" align="center">
<template v-slot="{ row }">
<el-button type="text" size="small" @click="handleUnbind(row)" style="color: red" icon="el-icon-connection">解绑</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 绑定设备 -->
<el-dialog title="绑定设备" :visible.sync="IOTOpen" width="500px" append-to-body :rules="rules">
<el-form :model="IOTForm" ref="IOTForm" label-width="120px" size="small" :rules="rules">
<el-form-item label="设备类型" prop="iotType">
<el-select
v-model="IOTForm.iotType"
filterable
clearable
placeholder="请选择"
style="width: 280px"
@change="changeIotType"
>
<el-option
v-for="item in typeOptions"
:key="item.iotTypeId"
:label="item.iotTypeName"
:value="item.iotTypeId"
<el-table :data="tableData" style="width: 100%">
<el-table-column
type="index"
label="序号"
align="center"
width="55"
:index="
indexContinuation(queryParams.pageNum, queryParams.pageSize)
"
/>
</el-select>
</el-form-item>
<el-form-item label="设备编号" prop="iotId">
<el-select v-model="IOTForm.iotId" filterable clearable placeholder="请选择" style="width: 280px">
<el-option v-for="item in codeOptions" :key="item.iotId" :label="item.iotCode" :value="item.iotId" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="IOTOpen = false"> </el-button>
<el-button type="primary" @click="submit" :loading="loading"> </el-button>
</div>
</el-dialog>
</div>
<el-table-column
label="设备类型"
prop="iotTypeName"
align="center"
/>
<el-table-column label="设备编号" prop="iotCode" align="center" />
<el-table-column label="设备状态" prop="iotStatus" align="center">
<!-- iotStatus 0 在线 1 掉线 -->
<template v-slot="{ row }">
<el-tag v-if="row.iotStatus == 0" type="success"
>在线</el-tag
>
<el-tag v-else type="danger">掉线</el-tag>
</template>
</el-table-column>
<el-table-column label="绑定日期" prop="bindTime" align="center" />
<el-table-column label="操作" align="center">
<template v-slot="{ row }">
<el-button
type="text"
size="small"
@click="handleUnbind(row)"
style="color: red"
icon="el-icon-connection"
>解绑</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 绑定设备 -->
<el-dialog
title="绑定设备"
:visible.sync="IOTOpen"
width="500px"
append-to-body
:rules="rules"
>
<el-form
:model="IOTForm"
ref="IOTForm"
label-width="120px"
size="small"
:rules="rules"
>
<el-form-item label="设备类型" prop="iotType">
<el-select
v-model="IOTForm.iotType"
filterable
clearable
placeholder="请选择"
style="width: 280px"
@change="changeIotType"
>
<el-option
v-for="item in typeOptions"
:key="item.iotTypeId"
:label="item.iotTypeName"
:value="item.iotTypeId"
/>
</el-select>
</el-form-item>
<el-form-item label="设备编号" prop="iotId">
<el-select
v-model="IOTForm.iotId"
filterable
clearable
placeholder="请选择"
style="width: 280px"
>
<el-option
v-for="item in codeOptions"
:key="item.iotId"
:label="item.iotCode"
:value="item.iotId"
/>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="IOTOpen = false"> </el-button>
<el-button type="primary" @click="submit" :loading="loading"
> </el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import PageHeader from '@/components/pageHeader'
import { selectList, bindIot, getTypeList, unbindIot } from '@/api/store/iotManagement'
import {
selectList,
bindIot,
getTypeList,
unbindIot,
} from '@/api/store/iotManagement'
export default {
name: 'BindIOT',
props: {
name: 'BindIOT',
props: {
type: Object,
default: () => {},
props: {
type: Object,
default: () => {},
},
},
},
components: {
PageHeader,
},
data() {
return {
loading: false,
showSearch: true, //
queryForm: {
keyWord: '',
},
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
tableData: [],
pageContent: 'IOT设备查看',
IOTForm: {
iotType: '',
iotId: '',
},
IOTOpen: false,
typeOptions: [], //
codeOptions: [], //
rules: {
iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
iotId: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
},
}
},
created() {
console.log('🚀 ~ created ~ BindIOT', this.props)
this.getList()
},
methods: {
//
handleQuery() {
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
this.getList()
components: {
PageHeader,
},
//
async getList() {
try {
const params = {
maCode: this.props.maCode,
...this.queryForm,
...this.queryParams,
}
console.log('🚀 ~ getList ~ 获取列表', params)
data() {
return {
loading: false,
showSearch: true, //
queryForm: {
keyWord: '',
},
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
tableData: [],
pageContent: 'IOT设备查看',
IOTForm: {
iotType: '',
iotId: '',
},
IOTOpen: false,
typeOptions: [], //
codeOptions: [], //
rules: {
iotType: [
{
required: true,
message: '请选择设备类型',
trigger: 'change',
},
],
iotId: [
{
required: true,
message: '请选择设备编号',
trigger: 'change',
},
],
},
const res = await getTypeList(params)
this.tableData = res.rows
this.total = res.total
} catch (err) {
console.log('🚀 ~ getList ~ err:', err)
}
},
//
goBack() {
this.$tab.refreshPage()
},
//
bindNewIOT() {
console.log('🚀 ~ bindNewIOT ~ 绑定新设备')
this.IOTOpen = true
this.getIotType()
this.$nextTick(() => {
this.$refs.IOTForm.resetFields()
})
},
//
handleUnbind(row) {
console.log('🚀 ~ handleUnbind ~ 解绑', row)
try {
const params = {
maCode: this.props.maCode,
typeId: this.props.typeId,
id: row.id,
iotId: row.iotId,
typeList: [],
}
this.$confirm('确定解绑设备吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
await unbindIot(params)
this.$message.success('解绑成功')
this.getList()
})
.catch(() => {
this.$message.info('已取消解绑')
})
} catch (err) {
console.log('🚀 ~ handleUnbind ~ err:', err)
}
},
//
submit() {
try {
//
this.$refs.IOTForm.validate(async valid => {
if (valid) {
this.loading = true
const params = {
iotTypeId: this.IOTForm.iotType,
iotId: this.IOTForm.iotId,
maCode: this.props.maCode,
typeId: this.props.typeId,
created() {
console.log('🚀 ~ created ~ BindIOT', this.props)
this.getList()
},
methods: {
//
handleQuery() {
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
this.getList()
},
//
async getList() {
try {
const params = {
maCode: this.props.maCode,
...this.queryForm,
...this.queryParams,
}
console.log('🚀 ~ getList ~ 获取列表', params)
const res = await getTypeList(params)
this.tableData = res.rows
this.total = res.total
this.tableData.forEach((e) => {
this.typeList.push(e.iotType)
})
} catch (err) {
console.log('🚀 ~ getList ~ err:', err)
}
console.log('🚀 ~ submit ~ 提交绑定设备', params, this.props)
await bindIot(params)
this.$message.success('绑定成功')
this.IOTOpen = false
this.loading = false
this.getList()
} else {
return false
}
})
} catch (err) {
console.log('🚀 ~ submit ~ err:', err)
this.loading = false
}
},
//
goBack() {
this.$tab.refreshPage()
},
//
bindNewIOT() {
console.log('🚀 ~ bindNewIOT ~ 绑定新设备')
this.IOTOpen = true
this.getIotType()
this.$nextTick(() => {
this.$refs.IOTForm.resetFields()
})
},
//
handleUnbind(row) {
this.typeList = this.typeList.filter((e) => e != row.iotType)
console.log('🚀 ~ handleUnbind ~ 解绑', row)
try {
const params = {
maCode: this.props.maCode,
typeId: this.props.typeId,
id: row.id,
iotId: row.iotId,
}
this.$confirm('确定解绑设备吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
await unbindIot(params)
this.$message.success('解绑成功')
this.getList()
})
.catch(() => {
this.$message.info('已取消解绑')
})
} catch (err) {
console.log('🚀 ~ handleUnbind ~ err:', err)
}
},
//
submit() {
try {
//
this.$refs.IOTForm.validate(async (valid) => {
if (valid) {
this.loading = true
const params = {
iotTypeId: this.IOTForm.iotType,
iotId: this.IOTForm.iotId,
maCode: this.props.maCode,
typeId: this.props.typeId,
}
console.log(
'🚀 ~ submit ~ 提交绑定设备',
params,
this.props,
)
await bindIot(params)
this.$message.success('绑定成功')
this.IOTOpen = false
this.loading = false
this.getList()
} else {
return false
}
})
} catch (err) {
console.log('🚀 ~ submit ~ err:', err)
this.loading = false
}
},
//
async getIotType() {
try {
const res = await selectList()
this.typeOptions = res.data
} catch (err) {
console.log('🚀 ~ getIotType ~ err:', err)
}
},
//
async changeIotType(iotTypeId) {
const isType = this.typeList.some((e) => e == iotTypeId)
if (isType) {
this.$message.error(
'当前机具已绑定改IOT类型设备不可重复绑定',
)
this.codeOptions = []
return
}
try {
this.codeOptions = []
this.IOTForm.iotId = ''
if (!iotTypeId) return
const params = {
iotTypeId,
}
//
const res = await selectList(params)
this.codeOptions = res.data
} catch (err) {
console.log('🚀 ~ changeIotType ~ err:', err)
}
},
},
//
async getIotType() {
try {
const res = await selectList()
this.typeOptions = res.data
} catch (err) {
console.log('🚀 ~ getIotType ~ err:', err)
}
},
//
async changeIotType(iotTypeId) {
try {
this.codeOptions = []
this.IOTForm.iotId = ''
if (!iotTypeId) return
const params = {
iotTypeId,
}
//
const res = await selectList(params)
this.codeOptions = res.data
} catch (err) {
console.log('🚀 ~ changeIotType ~ err:', err)
}
},
},
}
</script>
<style lang="scss" scoped>
.maCode {
margin-top: 15px;
font-size: 18px;
margin-top: 15px;
font-size: 18px;
}
</style>

View File

@ -18,7 +18,7 @@
</div>
<div class="equipment" v-if="false">{{ engineering }}工程</div>
<el-row :gutter="24">
<el-col :span="8">
<el-col :span="16">
<el-date-picker
v-model="queryForm.date"
type="datetimerange"
@ -53,7 +53,7 @@
class="right-info"
:class="{ active: activeIndex === index }"
>
<ul>
<!-- <ul>
<li>{{ item.tripdistance }}KM</li>
<li>{{ item.drivingDuration }}</li>
<li>{{ item.maxspeed }}KM/h</li>
@ -64,7 +64,7 @@
<li>行驶时长</li>
<li>最大速度</li>
<li>平均速度</li>
</ul>
</ul> -->
<div style="margin-top: 10px">
<div class="time-container">
@ -90,22 +90,38 @@
</div>
</el-tab-pane>
<el-tab-pane label="停留点">
<div class="point-container">
<div
class="point-container"
v-for="(item, index) in parkList"
:key="index"
>
<div class="time-container">
<span class="radius-span">1</span>
<span>2024-07-18 01:18:53</span>
<span>1时19分</span>
<span class="radius-span">{{
index + 1
}}</span>
<span>{{ item.startTime }}</span>
<span
>{{ item.hours }}{{
item.mints
}}</span
>
</div>
<h3>安徽省------</h3>
<h3>{{ item.address }}</h3>
</div>
</el-tab-pane>
<el-tab-pane label="报警">
<div class="point-container">
<div
class="point-container"
v-for="(item, index) in warningList"
:key="index"
>
<div class="time-container">
<span class="radius-span">1</span>
<span>2024-07-18 01:18:53</span>
<span class="radius-span">{{
index + 1
}}</span>
<span>{{ item.warnTime }}</span>
</div>
<h3>手动触发紧急报警---------</h3>
<h3>{{ item.startAlarm }}</h3>
</div>
</el-tab-pane>
</el-tabs>
@ -127,6 +143,8 @@ import moment from 'moment'
import {
getIotDeviceLocationApi,
getIotDeviceTripApi,
getIotDeviceParkDetailApi,
getIotDeviceAlarmApi,
} from '@/api/store/iotManagement.js'
export default {
name: 'MapDialog',
@ -189,6 +207,8 @@ export default {
//
tripList: [],
activeIndex: '',
//
parkList: [],
}
},
created() {
@ -237,8 +257,44 @@ export default {
const res = await getIotDeviceTripApi({ ...this.tripParams })
console.log(res, '行程信息--')
const resS = await getIotDeviceParkDetailApi({ ...this.tripParams })
console.log(resS, '停留点信息--')
const params = { ...this.tripParams }
params.beginTime = params.beginTime.slice(0, 10)
params.endTime = params.endTime.slice(0, 10)
const resSs = await getIotDeviceAlarmApi(params)
this.warningList = resSs.data
this.warningList.forEach((e) => {
e.warnTime = moment(parseInt(e.startAlarmTime)).format(
'YYYY-MM-DD HH:mm:ss',
)
})
console.log(resSs, '报警信息--')
this.parkList = resS.data
this.parkList.forEach((e) => {
e.startTime = moment(parseInt(e.beginTime)).format(
'YYYY-MM-DD HH:mm:ss',
)
e.hours = parseInt(
(parseInt(e.endTime) - parseInt(e.beginTime)) /
1000 /
60 /
60,
)
e.mints = parseInt(
((parseInt(e.endTime) - parseInt(e.beginTime)) /
1000 /
60) %
60,
)
})
let tripInfo = JSON.parse(res.msg)
console.log(tripInfo, '反序列化之后')
console.log(tripInfo, '反序列化之后', this.parkList)
let addressList = []
if (tripInfo.addressmap) {
@ -246,7 +302,9 @@ export default {
}
tripInfo.totaltrips.forEach((e) => {
e.startTime = moment(e.startTime).format('YYYY-MM-DD HH:mm:ss')
e.startTime = moment(e.trackstarttime).format(
'YYYY-MM-DD HH:mm:ss',
)
e.endTime = moment(e.trackendtime).format('YYYY-MM-DD HH:mm:ss')
e.drivingDuration = parseInt(