bonus
/
devicesmgt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

iot设备页面优化

This commit is contained in:
BianLzhaoMin 2024-08-09 15:16:43 +08:00
parent 70c87e41b1
commit 10689a848f
3 changed files with 102 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
sgzb-ui/src/views/iotDevice/index.vue
View File

@ -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>
@ -154,6 +154,20 @@
v-model="addDeviceParams.iotCode"
/>
</el-form-item>
<el-form-item
label="设备状态: "
prop="iotStatus"
this.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">
@ -237,6 +251,7 @@ export default {
addDeviceParams: {
iotType: '',
iotCode: '',
iotStatus: 0,
},
// 新增设备表单校验
addDeviceRules: {
@ -296,6 +311,7 @@ export default {
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%'

5
sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
View File

@ -13,9 +13,7 @@
<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="16">
@ -195,7 +193,6 @@ export default {
trackAni: null, // 轨迹实例
calLon: '',
calLat: '',
// 查询设备行程信息的参数
tripParams: {
beginTime: moment()

100
sgzb-ui/src/views/warehouseManage/machinery/coding/debug.vue
View File

@ -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>