Merge remote-tracking branch 'origin/dev-nx' into dev-nx
This commit is contained in:
commit
0af7c7cf0b
|
|
@ -51,6 +51,7 @@
|
|||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"jszip": "^3.10.1",
|
||||
"moment": "^2.30.1",
|
||||
"nprogress": "0.2.0",
|
||||
"qrcodejs2": "0.0.2",
|
||||
"quill": "1.3.7",
|
||||
|
|
|
|||
|
|
@ -49,6 +49,24 @@ export function deleteDeviceApi(id) {
|
|||
})
|
||||
}
|
||||
|
||||
/** 获取机具设备的位置信息 */
|
||||
export const getIotDeviceLocationApi = (data) => {
|
||||
return request.post('/material/iotMachine/getLocation', 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)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* *****
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
<el-button size="mini" type="primary" @click="addDevice(null)"
|
||||
>添加设备</el-button
|
||||
>
|
||||
<el-button size="mini" type="primary" @click="uploadCode()"
|
||||
<!-- <el-button size="mini" type="primary" @click="uploadCode()"
|
||||
>下载二维码</el-button
|
||||
>
|
||||
> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
|
@ -56,13 +56,13 @@
|
|||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="二维码">
|
||||
<!-- <el-table-column align="center" label="二维码">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="showQrCode(row)"
|
||||
>查看</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column align="center" label="绑定状态">
|
||||
<template slot-scope="{ row }">
|
||||
<el-tag
|
||||
|
|
@ -92,6 +92,7 @@
|
|||
icon="el-icon-delete"
|
||||
style="color: #f56c6c"
|
||||
@click="handleDeleteAndUnbind(row.iotId, 1)"
|
||||
v-if="row.bindStatus === 1"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button
|
||||
|
|
@ -142,9 +143,12 @@
|
|||
clearable
|
||||
v-model="addDeviceParams.iotType"
|
||||
>
|
||||
<el-option :value="125" label="定位设备" />
|
||||
<el-option :value="126" label="其他设备" />
|
||||
<el-option :value="127" label="其他设备" />
|
||||
<el-option
|
||||
v-for="item in deviceTypeList"
|
||||
:key="item.iotTypeId"
|
||||
:value="item.iotTypeId"
|
||||
:label="item.iotTypeName"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号" prop="iotCode">
|
||||
|
|
@ -154,6 +158,20 @@
|
|||
v-model="addDeviceParams.iotCode"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="设备状态: "
|
||||
prop="iotStatus"
|
||||
v-if="dialogConfig.outerTitle === '修改设备'"
|
||||
>
|
||||
<el-switch
|
||||
v-model="addDeviceParams.iotStatus"
|
||||
active-text="在线"
|
||||
inactive-text="离线"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row style="margin-top: 20px; text-align: right">
|
||||
|
|
@ -215,6 +233,7 @@ import {
|
|||
unbindDeviceApi,
|
||||
getDeviceBindRecordApi,
|
||||
getDeviceBindDetailsApi,
|
||||
selectList,
|
||||
} from '@/api/iotDevice'
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -237,6 +256,7 @@ export default {
|
|||
addDeviceParams: {
|
||||
iotType: '',
|
||||
iotCode: '',
|
||||
iotStatus: 0,
|
||||
},
|
||||
// 新增设备表单校验
|
||||
addDeviceRules: {
|
||||
|
|
@ -261,6 +281,8 @@ export default {
|
|||
sendParams: {
|
||||
iotId: '',
|
||||
},
|
||||
// 设备类型数据源
|
||||
deviceTypeList: [],
|
||||
// 复选框选中的数据
|
||||
selectList: [],
|
||||
// 绑定记录Api
|
||||
|
|
@ -273,6 +295,7 @@ export default {
|
|||
|
||||
created() {
|
||||
this.getDeviceList()
|
||||
this.getDeviceTypeList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -282,6 +305,18 @@ export default {
|
|||
this.deviceList = res.rows
|
||||
this.total = res.total
|
||||
},
|
||||
|
||||
//** 获取设备类型 */
|
||||
async getDeviceTypeList() {
|
||||
try {
|
||||
const res = await selectList()
|
||||
// this.typeOptions = res.data
|
||||
console.log(res, '设备类型获取成功')
|
||||
this.deviceTypeList = res.data
|
||||
} catch (err) {
|
||||
console.log('🚀 ~ getIotType ~ err:', err)
|
||||
}
|
||||
},
|
||||
/** 搜索按钮 */
|
||||
handelQuery() {
|
||||
this.getDeviceList(this.queryParams)
|
||||
|
|
@ -290,10 +325,13 @@ export default {
|
|||
addDevice(row) {
|
||||
if (!row) {
|
||||
this.dialogConfig.outerTitle = '添加设备'
|
||||
this.addDeviceParams.iotId = ''
|
||||
this.addDeviceParams.iotCode = ''
|
||||
} else {
|
||||
this.dialogConfig.outerTitle = '修改设备'
|
||||
this.addDeviceParams.iotId = row.iotId
|
||||
this.addDeviceParams.iotCode = row.iotCode
|
||||
this.addDeviceParams.iotStatus = row.iotStatus
|
||||
this.addDeviceParams.iotType = parseInt(row.iotType)
|
||||
}
|
||||
this.dialogConfig.outerWidth = '40%'
|
||||
|
|
|
|||
|
|
@ -107,7 +107,12 @@
|
|||
style="width: 280px"
|
||||
@change="changeIotType"
|
||||
>
|
||||
<el-option label="定位设备" :value="125" />
|
||||
<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">
|
||||
|
|
@ -139,7 +144,12 @@
|
|||
|
||||
<script>
|
||||
import PageHeader from '@/components/pageHeader'
|
||||
import { selectList, bindIot, getTypeList, unbindIot } from '@/api/iotDevice'
|
||||
import {
|
||||
selectList,
|
||||
bindIot,
|
||||
getTypeList,
|
||||
unbindIot,
|
||||
} from '@/api/iotDevice/index.js'
|
||||
|
||||
export default {
|
||||
name: 'BindIOT',
|
||||
|
|
@ -189,6 +199,8 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
typeList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -214,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)
|
||||
}
|
||||
|
|
@ -233,6 +248,7 @@ export default {
|
|||
},
|
||||
// 解绑
|
||||
handleUnbind(row) {
|
||||
this.typeList = this.typeList.filter((e) => e != row.iotType)
|
||||
console.log('🚀 ~ handleUnbind ~ 解绑', row)
|
||||
try {
|
||||
const params = {
|
||||
|
|
@ -292,15 +308,23 @@ export default {
|
|||
},
|
||||
// 获取下拉
|
||||
async getIotType() {
|
||||
// try {
|
||||
// const res = await selectList()
|
||||
// this.typeOptions = res.data
|
||||
// } catch (err) {
|
||||
// console.log('🚀 ~ getIotType ~ err:', err)
|
||||
// }
|
||||
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 = ''
|
||||
|
|
|
|||
|
|
@ -13,25 +13,23 @@
|
|||
<span>({{ deviceType }})</span>
|
||||
</div>
|
||||
|
||||
<div class="equipment">
|
||||
定位设备编号: {{ equipmentNumber }}
|
||||
</div>
|
||||
<div class="equipment"> 定位设备编号: {{ iotCode }} </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="daterange"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="请选择开始日期"
|
||||
end-placeholder="请选择结束日期"
|
||||
style="width: 330px"
|
||||
value-format="yyyy-MM-dd"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="onChangeTime"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="padding: 8px 16px; margin-left: 5px"
|
||||
@click="handleQuery()"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-col>
|
||||
|
|
@ -44,29 +42,34 @@
|
|||
<el-tab-pane label="行程">
|
||||
<div
|
||||
class="trip-container"
|
||||
@click="handlePreviewTrip()"
|
||||
@click="handlePreviewTrip(item, index)"
|
||||
v-for="(item, index) in tripList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="left-num">1</div>
|
||||
<div class="right-info">
|
||||
<ul>
|
||||
<li>0KM</li>
|
||||
<li>22秒</li>
|
||||
<li>5KM/h</li>
|
||||
<li>0KM/h</li>
|
||||
<div class="left-num">{{ index + 1 }}</div>
|
||||
<div
|
||||
class="right-info"
|
||||
:class="{ active: activeIndex === index }"
|
||||
>
|
||||
<!-- <ul>
|
||||
<li>{{ item.tripdistance }}KM</li>
|
||||
<li>{{ item.drivingDuration }}秒</li>
|
||||
<li>{{ item.maxspeed }}KM/h</li>
|
||||
<li>{{ item.averagespeed }}KM/h</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>里程</li>
|
||||
<li>行驶时长</li>
|
||||
<li>最大速度</li>
|
||||
<li>平均速度</li>
|
||||
</ul>
|
||||
</ul> -->
|
||||
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
<span class="radius-span">始</span>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
<span>{{ item.startTime }}</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
<h3>{{ item.startAddress }}</h3>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<div class="time-container">
|
||||
|
|
@ -77,30 +80,46 @@
|
|||
"
|
||||
>终</span
|
||||
>
|
||||
<span>2024-07-18 01:18:53</span>
|
||||
<span>{{ item.endTime }}</span>
|
||||
</div>
|
||||
<h3>安徽省------</h3>
|
||||
<h3>{{ item.endAddress }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
|
@ -118,6 +137,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import {
|
||||
getIotDeviceLocationApi,
|
||||
getIotDeviceTripApi,
|
||||
getIotDeviceParkDetailApi,
|
||||
getIotDeviceAlarmApi,
|
||||
} from '@/api/iotDevice/index.js'
|
||||
export default {
|
||||
name: 'MapDialog',
|
||||
props: {
|
||||
|
|
@ -131,13 +157,21 @@ export default {
|
|||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
// iot设备id
|
||||
iotCode: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
openMap: false, // 是否打开地图弹框
|
||||
queryForm: {
|
||||
date: '',
|
||||
date: [
|
||||
moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
],
|
||||
},
|
||||
equipment: '', // 设备名称
|
||||
equipmentNumber: 'H906L', // 设备编号
|
||||
|
|
@ -146,45 +180,47 @@ export default {
|
|||
// 轨迹点
|
||||
linePointList: [
|
||||
{
|
||||
lng: 116.297611,
|
||||
lat: 40.047363,
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
{
|
||||
lng: 116.302839,
|
||||
lat: 40.048219,
|
||||
},
|
||||
{
|
||||
lng: 116.308301,
|
||||
lat: 40.050566,
|
||||
},
|
||||
{
|
||||
lng: 116.305732,
|
||||
lat: 40.054957,
|
||||
},
|
||||
{
|
||||
lng: 116.304754,
|
||||
lat: 40.057953,
|
||||
},
|
||||
{
|
||||
lng: 116.306487,
|
||||
lat: 40.058312,
|
||||
},
|
||||
{
|
||||
lng: 116.307223,
|
||||
lat: 40.056379,
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
],
|
||||
|
||||
count: 0,
|
||||
|
||||
trackAni: null, // 轨迹实例
|
||||
calLon: '',
|
||||
calLat: '',
|
||||
// 查询设备行程信息的参数
|
||||
tripParams: {
|
||||
beginTime: moment()
|
||||
.subtract(1, 'days')
|
||||
.format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
iotId: '',
|
||||
},
|
||||
// 行程信息
|
||||
tripList: [],
|
||||
activeIndex: '',
|
||||
// 停留点信息
|
||||
parkList: [],
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.handleQuery()
|
||||
},
|
||||
mounted() {
|
||||
console.log('地图弹框组件被创建--')
|
||||
// this.getEquipmentInfo()
|
||||
this.initMap()
|
||||
Promise.all([this.getIotDeviceLocation()])
|
||||
.then((res) => {
|
||||
this.initMap()
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
// this.getIotDeviceLocation()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
|
|
@ -201,9 +237,103 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
/** 获取当前设备的信息 */
|
||||
async getIotDeviceLocation() {
|
||||
if (this.iotCode) {
|
||||
const { data: res } = await getIotDeviceLocationApi({
|
||||
iotId: this.iotCode,
|
||||
})
|
||||
// 获取经纬度并赋值
|
||||
this.calLon = res.callon
|
||||
this.calLat = res.callat
|
||||
}
|
||||
},
|
||||
/** 查询按钮 */
|
||||
async handleQuery() {
|
||||
this.tripParams.iotId = this.iotCode
|
||||
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, '反序列化之后', this.parkList)
|
||||
|
||||
let addressList = []
|
||||
if (tripInfo.addressmap) {
|
||||
addressList = Object.keys(tripInfo.addressmap)
|
||||
}
|
||||
|
||||
tripInfo.totaltrips.forEach((e) => {
|
||||
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(
|
||||
(e.trackendtime - e.trackstarttime) / 1000,
|
||||
)
|
||||
|
||||
addressList.forEach((v) => {
|
||||
if (v.indexOf(e.slat.toString().slice(0, 7)) > -1) {
|
||||
e.startAddress = tripInfo.addressmap[v]
|
||||
}
|
||||
if (v.indexOf(e.elat.toString().slice(0, 7)) > -1) {
|
||||
e.endAddress = tripInfo.addressmap[v]
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.tripList = tripInfo.totaltrips
|
||||
|
||||
console.log(tripInfo, '处理之后-----')
|
||||
},
|
||||
/** 查看行程 */
|
||||
handlePreviewTrip() {
|
||||
handlePreviewTrip(item, index) {
|
||||
this.activeIndex = index
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
}
|
||||
this.map.clearOverlays()
|
||||
let pointList = []
|
||||
this.linePointList[0].lng = item.slon
|
||||
this.linePointList[0].lat = item.slat
|
||||
this.linePointList[1].lng = item.elon
|
||||
this.linePointList[1].lat = item.elat
|
||||
if (this.linePointList.length === 0) return
|
||||
for (var i = 0; i < this.linePointList.length; i++) {
|
||||
pointList.push(
|
||||
|
|
@ -213,6 +343,9 @@ export default {
|
|||
),
|
||||
)
|
||||
}
|
||||
|
||||
// pointList.push(new BMapGL.Point(item.slon, item.slat))
|
||||
// pointList.push(new BMapGL.Point(item.elon, item.elat))
|
||||
let polyline = new BMapGL.Polyline(pointList)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
|
|
@ -220,24 +353,24 @@ export default {
|
|||
this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 30, // 轨迹播放的角度，默认为55
|
||||
duration: 5000, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 2000, // 动画开始的延迟，默认0，单位ms
|
||||
duration: 3000, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 500, // 动画开始的延迟，默认0，单位ms
|
||||
})
|
||||
this.trackAni.start()
|
||||
// 设置起点终点图标
|
||||
this.triggerMovement()
|
||||
},
|
||||
async handleQuery() {
|
||||
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
||||
const params = {
|
||||
date: this.queryForm.date,
|
||||
}
|
||||
this.getEquipmentInfo(params)
|
||||
// 先销毁地图 再重新初始化
|
||||
this.map.clearOverlays()
|
||||
this.map = null
|
||||
await this.initMap()
|
||||
},
|
||||
// async handleQuery() {
|
||||
// console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
||||
// const params = {
|
||||
// date: this.queryForm.date,
|
||||
// }
|
||||
// this.getEquipmentInfo(params)
|
||||
// // 先销毁地图 再重新初始化
|
||||
// this.map.clearOverlays()
|
||||
// this.map = null
|
||||
// await this.initMap()
|
||||
// },
|
||||
openMapDialog(val) {
|
||||
this.openMap = val
|
||||
this.initMap()
|
||||
|
|
@ -254,15 +387,25 @@ export default {
|
|||
},
|
||||
// 初始化地图和轨迹
|
||||
initMap() {
|
||||
console.log('地图初始化--')
|
||||
this.$nextTick(() => {
|
||||
this.map = new BMapGL.Map('container') // 创建地图实例
|
||||
let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
|
||||
// let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
|
||||
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
this.map.setHeading(64.5) //设置地图旋转角度
|
||||
this.map.setTilt(73) //设置地图的倾斜角度
|
||||
let marker = new BMapGL.Marker(point) // 创建标点
|
||||
this.map.addOverlay(marker)
|
||||
|
||||
var myGeo = new BMapGL.Geocoder()
|
||||
// 根据坐标得到地址描述
|
||||
// myGeo.getLocation(new BMapGL.Point(this.calLon, this.calLat))
|
||||
|
||||
// this.map.getLocation(point, (res) => {
|
||||
// console.log(res, '所在位置--')
|
||||
// })
|
||||
})
|
||||
},
|
||||
// 添加起点和终点的标记
|
||||
|
|
@ -303,6 +446,11 @@ export default {
|
|||
handelCloseDialog() {
|
||||
this.$emit('handelCloseDialog')
|
||||
},
|
||||
/** 时间选择器 */
|
||||
onChangeTime(val) {
|
||||
this.tripParams.beginTime = val[0]
|
||||
this.tripParams.endTime = val[1]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -380,6 +528,7 @@ export default {
|
|||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<!-- 编码设备管理 -->
|
||||
<div class="app-container" id="devices">
|
||||
<div class="app-container" id="devices" v-if="!props.isShow">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['machinery:debug:export']"
|
||||
v-hasPermi="['machinery:coding:export']"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
|
@ -135,6 +135,7 @@
|
|||
<el-table
|
||||
v-loading="loading"
|
||||
:data="devicesList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
|
|
@ -151,13 +152,13 @@
|
|||
label="设备类型"
|
||||
align="center"
|
||||
prop="deviceType"
|
||||
:show-overflow-tooltip="true"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="规格型号"
|
||||
align="center"
|
||||
prop="specificationType"
|
||||
:show-overflow-tooltip="true"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -206,37 +207,53 @@
|
|||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="IOT设备" align="center" prop="ownHouseName">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="handleBindIOT(row)"
|
||||
>未绑定</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="位置信息"
|
||||
align="center"
|
||||
prop="ownHouseName"
|
||||
>
|
||||
<template slot-scope="{ row }">
|
||||
<i
|
||||
class="el-icon-location location-icon"
|
||||
@click="handleMap(row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column
|
||||
label="所在仓库"
|
||||
align="center"
|
||||
prop="ownHouseName"
|
||||
/>
|
||||
/> -->
|
||||
<!-- <el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{ parseTime(scope.row.createTime) }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="150"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
style="padding: 6px 10px"
|
||||
size="mini"
|
||||
type="primary"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['machinery:debug:edit']"
|
||||
v-hasPermi="['machinery:coding:edit']"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
style="padding: 6px 10px"
|
||||
size="mini"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['machinery:debug:del']"
|
||||
v-hasPermi="['machinery:coding:del']"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
|
|
@ -513,6 +530,16 @@
|
|||
<!-- <el-button type="primary" @click="downloadCode">下 载</el-button> -->
|
||||
</div>
|
||||
</el-dialog>
|
||||
<MapDialog
|
||||
v-if="mapDialogVisible"
|
||||
:deviceName="deviceName"
|
||||
:deviceType="deviceType"
|
||||
:iotCode="iotCode"
|
||||
@handelCloseDialog="handelCloseDialog"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<BindIOT :props="props" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -534,12 +561,22 @@ import Treeselect from '@riophae/vue-treeselect'
|
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
import QRCode from 'qrcodejs2'
|
||||
|
||||
import BindIOT from './component/BindIOT'
|
||||
import MapDialog from './component/MapDIalog'
|
||||
|
||||
export default {
|
||||
name: 'Devices',
|
||||
dicts: ['sys_normal_disable'],
|
||||
components: { Treeselect },
|
||||
components: { Treeselect, BindIOT, MapDialog },
|
||||
data() {
|
||||
return {
|
||||
openMap: false,
|
||||
isShow: false,
|
||||
props: {
|
||||
isShow: false,
|
||||
typeId: '',
|
||||
maCode: '',
|
||||
},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
|
|
@ -604,6 +641,10 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
mapDialogVisible: false,
|
||||
deviceName: '',
|
||||
deviceType: '',
|
||||
iotCode: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -788,6 +829,29 @@ export default {
|
|||
// ...this.queryParams
|
||||
// }, `type_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
// iot设备绑定
|
||||
handleBindIOT(row) {
|
||||
console.log('🚀 ~ handleBindIOT ~ row:', row)
|
||||
this.props = {
|
||||
isShow: true,
|
||||
typeId: row.typeId,
|
||||
maCode: row.maCode,
|
||||
}
|
||||
},
|
||||
// 查看设备地图
|
||||
async handleMap(row) {
|
||||
this.deviceName = row.specificationType
|
||||
this.deviceType = row.maStatusName
|
||||
this.iotCode = row.iotCode
|
||||
|
||||
this.mapDialogVisible = true
|
||||
},
|
||||
|
||||
/** 关闭地图弹框 */
|
||||
handelCloseDialog() {
|
||||
this.mapDialogVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -801,8 +865,10 @@ export default {
|
|||
margin-top: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
::v-deep.el-table .fixed-width .el-button--mini {
|
||||
width: 60px !important;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.location-icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -534,6 +534,7 @@
|
|||
v-if="mapDialogVisible"
|
||||
:deviceName="deviceName"
|
||||
:deviceType="deviceType"
|
||||
:iotCode="iotCode"
|
||||
@handelCloseDialog="handelCloseDialog"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -643,6 +644,7 @@ export default {
|
|||
mapDialogVisible: false,
|
||||
deviceName: '',
|
||||
deviceType: '',
|
||||
iotCode: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -838,9 +840,11 @@ export default {
|
|||
}
|
||||
},
|
||||
// 查看设备地图
|
||||
handleMap(row) {
|
||||
async handleMap(row) {
|
||||
this.deviceName = row.specificationType
|
||||
this.deviceType = row.maStatusName
|
||||
this.iotCode = row.iotCode
|
||||
|
||||
this.mapDialogVisible = true
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ module.exports = {
|
|||
// target: `https://test-cc.zhgkxt.com`,//线上环境-南网
|
||||
// target: `https://z.csgmall.com.cn`,
|
||||
|
||||
target: `http://192.168.2.154:28080`, //超
|
||||
// target: `http://192.168.2.154:28080`, //超
|
||||
// target: `http://10.40.92.81:28080`, //韩/
|
||||
// target: `http://192.168.2.82:28080`,//旭/
|
||||
// target: `http://192.168.2.248:28080`, //帅
|
||||
// target: `http://192.168.2.209:28080`, //福
|
||||
// target: `http://192.168.2.114:39080`, //王
|
||||
target: `http://192.168.2.125:39080`, //王
|
||||
|
||||
//******** 注意事项 ********* */
|
||||
//1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;
|
||||
|
|
|
|||
Loading…
Reference in New Issue