IOT设备管理页面完善
This commit is contained in:
BianLzhaoMin
parent
30763bfd81
commit
53107ca921
|
|
@ -0,0 +1,20 @@
|
||||||
|
export const dialogConfig = {
|
||||||
|
outerWidth: '70%',
|
||||||
|
outerTitle: '',
|
||||||
|
outerVisible: false,
|
||||||
|
handleColShow: false, // 是否显示操作列
|
||||||
|
pageShow: true, // 是否显示分页组件
|
||||||
|
isSelShow: false,// 表格是否需要复选框
|
||||||
|
isFormShow: true, // 是否显示表单查询组件
|
||||||
|
formLabel: [
|
||||||
|
{ f_label: '关键字', f_model: 'keywords', f_type: 'ipt' },
|
||||||
|
],
|
||||||
|
|
||||||
|
columnsList: [
|
||||||
|
{ t_width: '', t_props: 'machineTypeName', t_label: '绑定设备名称' },
|
||||||
|
{ t_width: '', t_props: 'specificationType', t_label: '设备编号' },
|
||||||
|
{ t_width: '', t_props: 'maCode', t_label: '绑定时间' },
|
||||||
|
{ t_width: '', t_props: 'scrapNum', t_label: '解绑时间' },
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,254 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 查询 -->
|
||||||
|
<el-form inline>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input placeholder="请输入关键字" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="mini" type="primary">搜索</el-button>
|
||||||
|
<el-button size="mini" type="primary" @click="addDevice()"
|
||||||
|
>添加设备</el-button
|
||||||
|
>
|
||||||
|
<el-button size="mini" type="primary" @click="uploadCode()"
|
||||||
|
>下载二维码</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<el-table
|
||||||
|
border
|
||||||
|
:data="deviceList"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column align="center" type="selection" width="55" />
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
type="index"
|
||||||
|
width="55"
|
||||||
|
label="序号"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceName"
|
||||||
|
align="center"
|
||||||
|
label="设备类型"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceName"
|
||||||
|
align="center"
|
||||||
|
label="设备编号"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceName"
|
||||||
|
align="center"
|
||||||
|
label="设备状态"
|
||||||
|
/>
|
||||||
|
<el-table-column prop="deviceName" align="center" label="二维码" />
|
||||||
|
<el-table-column
|
||||||
|
prop="deviceName"
|
||||||
|
align="center"
|
||||||
|
label="绑定状态"
|
||||||
|
/>
|
||||||
|
<el-table-column prop="deviceName" align="center" label="操作">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-tickets"
|
||||||
|
@click="handleViewRecord()"
|
||||||
|
>记录</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
style="color: #f56c6c"
|
||||||
|
@click="handleDelete()"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-document-delete"
|
||||||
|
style="color: #e6a23c"
|
||||||
|
@click="handleUnbind()"
|
||||||
|
>解绑</el-button
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 弹框 -->
|
||||||
|
<DialogModel
|
||||||
|
:dialogConfig="dialogConfig"
|
||||||
|
@closeDialogOuter="closeDialogOuter"
|
||||||
|
>
|
||||||
|
<!-- 设备添加表单 -->
|
||||||
|
<template slot="outerContent">
|
||||||
|
<template v-if="dialogConfig.outerTitle === '添加设备'">
|
||||||
|
<el-form
|
||||||
|
label-width="80px"
|
||||||
|
:model="addDeviceParams"
|
||||||
|
:rules="addDeviceRules"
|
||||||
|
ref="addDeviceParamsRef"
|
||||||
|
>
|
||||||
|
<el-form-item label="设备类型" prop="deviceType">
|
||||||
|
<el-select
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择设备类型"
|
||||||
|
clearable
|
||||||
|
v-model="addDeviceParams.deviceType"
|
||||||
|
>
|
||||||
|
<el-option value="1" label="定位设备" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备编号" prop="deviceCode">
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入设备编号"
|
||||||
|
clearable
|
||||||
|
v-model="addDeviceParams.deviceCode"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row style="margin-top: 20px; text-align: right">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSubmit()"
|
||||||
|
>确 定</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="warning"
|
||||||
|
@click="handleCancel()"
|
||||||
|
>取 消</el-button
|
||||||
|
>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
<TableModel
|
||||||
|
:config="dialogConfig"
|
||||||
|
:sendParams="sendParams"
|
||||||
|
v-else
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</DialogModel>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DialogModel from '@/components/DialogModel' // 弹框组件
|
||||||
|
import TableModel from '@/components/TableModel' // 表格组件
|
||||||
|
import { dialogConfig } from './config'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
DialogModel,
|
||||||
|
TableModel,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
deviceList: [
|
||||||
|
{
|
||||||
|
deviceName: '测试设备',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 弹框的参数
|
||||||
|
dialogConfig,
|
||||||
|
// 新增给设备数据源
|
||||||
|
addDeviceParams: {
|
||||||
|
deviceType: '',
|
||||||
|
deviceCode: '',
|
||||||
|
},
|
||||||
|
// 新增设备表单校验
|
||||||
|
addDeviceRules: {
|
||||||
|
deviceType: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择设备类型',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
deviceCode: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入11位的设备编号',
|
||||||
|
trigger: 'blur',
|
||||||
|
min: 11,
|
||||||
|
max: 11,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 查看绑定记录时的参数
|
||||||
|
sendParams: {},
|
||||||
|
// 复选框选中的数据
|
||||||
|
selectList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/** 添加设备 */
|
||||||
|
addDevice() {
|
||||||
|
this.dialogConfig.outerWidth = '40%'
|
||||||
|
this.dialogConfig.outerTitle = '添加设备'
|
||||||
|
this.dialogConfig.outerVisible = true
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 二维码下载 */
|
||||||
|
uploadCode() {
|
||||||
|
if (this.selectList.length < 1) {
|
||||||
|
this.$message.error('请勾选需要下载的设备！')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 复选框选择事件 */
|
||||||
|
handleSelectionChange(list) {
|
||||||
|
this.selectList = list
|
||||||
|
},
|
||||||
|
/** 确定按钮 */
|
||||||
|
handleSubmit() {
|
||||||
|
this.$refs.addDeviceParamsRef.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
// 1. 校验通过调后台Api
|
||||||
|
console.log('走后续逻辑')
|
||||||
|
this.dialogConfig.outerVisible = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 取消按钮 */
|
||||||
|
handleCancel() {
|
||||||
|
this.addDeviceParams.deviceType = ''
|
||||||
|
this.addDeviceParams.deviceCode = ''
|
||||||
|
this.dialogConfig.outerVisible = false
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 查看记录 */
|
||||||
|
handleViewRecord() {
|
||||||
|
this.dialogConfig.outerWidth = '70%'
|
||||||
|
this.dialogConfig.outerTitle = '绑定记录'
|
||||||
|
this.dialogConfig.outerVisible = true
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 关闭弹框 */
|
||||||
|
closeDialogOuter() {
|
||||||
|
this.dialogConfig.outerVisible = false
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 删除按钮 */
|
||||||
|
handleDelete() {
|
||||||
|
this.$confirm('是否确定删除当前设备, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(() => {
|
||||||
|
console.log('删除设备')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 解绑按钮 */
|
||||||
|
handleUnbind() {
|
||||||
|
this.$confirm('是否确定解绑当前设备, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
}).then(() => {
|
||||||
|
console.log('解绑设备')
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -45,9 +45,10 @@ module.exports = {
|
||||||
|
|
||||||
// target: `http://192.168.2.134:28080`, //超
|
// target: `http://192.168.2.134:28080`, //超
|
||||||
// target: `http://10.40.92.81:28080`, //韩/
|
// target: `http://10.40.92.81:28080`, //韩/
|
||||||
target: `http://192.168.2.82:28080`,//旭/
|
// target: `http://192.168.2.82:28080`,//旭/
|
||||||
// target: `http://192.168.2.248:28080`, //帅
|
// target: `http://192.168.2.248:28080`, //帅
|
||||||
// target: `http://192.168.2.209:28080`, //福
|
// target: `http://192.168.2.209:28080`, //福
|
||||||
|
target: `http://192.168.2.114:39080`, //福
|
||||||
|
|
||||||
//******** 注意事项 ********* */
|
//******** 注意事项 ********* */
|
||||||
//1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;
|
//1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue