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://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.209:28080`, //福
|
||||
target: `http://192.168.2.114:39080`, //福
|
||||
|
||||
//******** 注意事项 ********* */
|
||||
//1.全局替换qrUrl二维码扫码提供的网址-发布服务器的地址target;
|
||||
|
|
|
|||
Loading…
Reference in New Issue