定位页面优化
This commit is contained in:
BianLzhaoMin
parent
b9995a1755
commit
440198e36b
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,37 @@
|
|||
<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
|
||||
: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-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-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>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
|
|
@ -21,14 +40,22 @@
|
|||
label="序号"
|
||||
align="center"
|
||||
width="55"
|
||||
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
|
||||
:index="
|
||||
indexContinuation(queryParams.pageNum, queryParams.pageSize)
|
||||
"
|
||||
/>
|
||||
<el-table-column
|
||||
label="设备类型"
|
||||
prop="iotTypeName"
|
||||
align="center"
|
||||
/>
|
||||
<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-if="row.iotStatus == 0" type="success"
|
||||
>在线</el-tag
|
||||
>
|
||||
<el-tag v-else type="danger">掉线</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -36,7 +63,14 @@
|
|||
|
||||
<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>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleUnbind(row)"
|
||||
style="color: red"
|
||||
icon="el-icon-connection"
|
||||
>解绑</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -50,8 +84,20 @@
|
|||
/>
|
||||
|
||||
<!-- 绑定设备 -->
|
||||
<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-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"
|
||||
|
|
@ -70,14 +116,27 @@
|
|||
</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
|
||||
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>
|
||||
<el-button type="primary" @click="submit" :loading="loading"
|
||||
>确 定</el-button
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
@ -85,7 +144,12 @@
|
|||
|
||||
<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',
|
||||
|
|
@ -120,9 +184,23 @@ export default {
|
|||
typeOptions: [], // 设备类型下拉
|
||||
codeOptions: [], // 设备编号下拉
|
||||
rules: {
|
||||
iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
||||
iotId: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
|
||||
iotType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择设备类型',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
iotId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择设备编号',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
typeList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -148,6 +226,9 @@ export default {
|
|||
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)
|
||||
}
|
||||
|
|
@ -167,6 +248,7 @@ export default {
|
|||
},
|
||||
// 解绑
|
||||
handleUnbind(row) {
|
||||
this.typeList = this.typeList.filter((e) => e != row.iotType)
|
||||
console.log('🚀 ~ handleUnbind ~ 解绑', row)
|
||||
try {
|
||||
const params = {
|
||||
|
|
@ -196,7 +278,7 @@ export default {
|
|||
submit() {
|
||||
try {
|
||||
// 校验
|
||||
this.$refs.IOTForm.validate(async valid => {
|
||||
this.$refs.IOTForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
const params = {
|
||||
|
|
@ -205,7 +287,11 @@ export default {
|
|||
maCode: this.props.maCode,
|
||||
typeId: this.props.typeId,
|
||||
}
|
||||
console.log('🚀 ~ submit ~ 提交绑定设备', params, this.props)
|
||||
console.log(
|
||||
'🚀 ~ submit ~ 提交绑定设备',
|
||||
params,
|
||||
this.props,
|
||||
)
|
||||
await bindIot(params)
|
||||
this.$message.success('绑定成功')
|
||||
this.IOTOpen = false
|
||||
|
|
@ -231,6 +317,14 @@ export default {
|
|||
},
|
||||
// 设备类型改变
|
||||
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 = ''
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Reference in New Issue