Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备登记添加接入、修改状态按钮样式

Browse Source
This commit is contained in:
zhujiyan
2024-06-11 15:50:10 +08:00
parent 88359e824a
commit 67bc106c1d
1 changed files with 121 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/views/govern/manage/factory.vue
View File

@@ -1,135 +1,130 @@
<template> <template>
<div class='default-main'> <div class="default-main">
<TableHeader> <TableHeader>
<template v-slot:select> <template v-slot:select>
<el-form-item label='设备类型'> <el-form-item label="设备类型">
<!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> --> <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-select <el-select
v-model='tableStore.table.params.devType' v-model="tableStore.table.params.devType"
clearable clearable
@change='devTypeChange' @change="devTypeChange"
placeholder='请选择设备类型' placeholder="请选择设备类型"
> >
<el-option <el-option
v-for='item in devTypeOptions' v-for="item in devTypeOptions"
:key='item.value' :key="item.value"
:label='item.label' :label="item.label"
:value='item.value' :value="item.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label='设备型号'> <el-form-item label="设备型号">
<el-select v-model='tableStore.table.params.devModel' clearable placeholder='请选择设备型号'> <el-select v-model="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
<el-option <el-option
v-for='item in devModelOptionsFilter' v-for="item in devModelOptionsFilter"
:key='item.value' :key="item.value"
:label='item.label' :label="item.label"
:value='item.value' :value="item.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label='通讯协议'> <el-form-item label="通讯协议">
<el-select v-model='tableStore.table.params.devAccessMethod' clearable placeholder='请选择通讯协议'> <el-select v-model="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
<el-option label='MQTT' value='mqtt'></el-option> <el-option label="MQTT" value="mqtt"></el-option>
<el-option label='CLD' value='cloud'></el-option> <el-option label="CLD" value="cloud"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label='状态'> <el-form-item label="状态">
<el-select v-model='tableStore.table.params.status' clearable placeholder='请选择状态'> <el-select v-model="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label='未注册' :value='1'></el-option> <el-option label="未注册" :value="1"></el-option>
<el-option label='注册' :value='2'></el-option> <el-option label="注册" :value="2"></el-option>
<el-option label='接入' :value='3'></el-option> <el-option label="接入" :value="3"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
<template v-slot:operation> <template v-slot:operation>
<el-button type='primary' @click='downLoadFile' class='ml10' icon='el-icon-Download'> <el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
模版下载 模版下载
</el-button> </el-button>
<el-upload <el-upload
style='display: inline-block' style="display: inline-block"
action='' action=""
accept='.xlsx' accept=".xlsx"
class='upload-demo' class="upload-demo"
:show-file-list='false' :show-file-list="false"
:auto-upload='false' :auto-upload="false"
:on-change='bulkImport' :on-change="bulkImport"
> >
<el-button type='primary' class='ml10' icon='el-icon-Tickets'>批量导入</el-button> <el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
</el-upload> </el-upload>
<el-button type='primary' class='ml10' @click='add' icon='el-icon-Plus'>新增设备</el-button> <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
</template> </template>
</TableHeader> </TableHeader>
<Table ref='tableRef'></Table> <Table ref="tableRef"></Table>
<el-dialog <el-dialog
:title='dialogTitle' :title="dialogTitle"
v-model='dialogFormVisible' v-model="dialogFormVisible"
:close-on-click-modal='false' :close-on-click-modal="false"
class='cn-operate-dialog' class="cn-operate-dialog"
:before-close='resetForm' :before-close="resetForm"
> >
<el-form :model='form' label-width='120px' :rules='rules' ref='ruleFormRef'> <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label='设备名称:' prop='name'> <el-form-item label="设备名称:" prop="name">
<el-input <el-input
v-model='form.name' v-model="form.name"
autocomplete='off' autocomplete="off"
clearable clearable
placeholder='请输入（项目名称+设备名称）' placeholder="请输入（项目名称+设备名称）"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label='网络设备ID:' prop='ndid' class='top'> <el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input v-model='form.ndid' autocomplete='off' placeholder='请输入'></el-input> <el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item> </el-form-item>
<el-form-item label='设备类型:' prop='devType' class='top'> <el-form-item label="设备类型:" prop="devType" class="top">
<el-select <el-select v-model="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
v-model='form.devType'
placeholder='请选择'
@change='formDevTypeChange'
clearable
>
<el-option <el-option
v-for='item in devTypeOptions' v-for="item in devTypeOptions"
:key='item.value' :key="item.value"
:label='item.label' :label="item.label"
:value='item.value' :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label='设备型号:' prop='devModel' class='top'> <el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model='form.devModel' placeholder='请选择' clearable> <el-select v-model="form.devModel" placeholder="请选择" clearable>
<el-option <el-option
v-for='item in formDevModelOptionsFilter' v-for="item in formDevModelOptionsFilter"
:key='item.value' :key="item.value"
:label='item.label' :label="item.label"
:value='item.value' :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label='通讯协议:' prop='devAccessMethod' class='top'> <el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model='form.devAccessMethod' placeholder='请选择' clearable> <el-select v-model="form.devAccessMethod" placeholder="请选择" clearable>
<el-option label='MQTT' value='MQTT'></el-option> <el-option label="MQTT" value="MQTT"></el-option>
<el-option label='CLD' value='cloud'></el-option> <el-option label="CLD" value="cloud"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label='合同号:' prop='cntractNo' class='top'> <el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input v-model='form.cntractNo' autocomplete='off' placeholder='请输入'></el-input> <el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click='resetForm'>取 消</el-button> <el-button @click="resetForm">取 消</el-button>
<el-button type='primary' @click='onSubmit'>确 定</el-button> <el-button type="primary" @click="onSubmit">确 定</el-button>
</template> </template>
</el-dialog> </el-dialog>
<div class='qrcode-label'> <div class="qrcode-label">
<div class='qrcode-label-title'>{{ deivce.mac }}</div> <div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class='qrcode-label-img' alt='二维码加载失败' :src='deivce.qrPath' /> <img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div> </div>
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue' import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
import TableStore from '@/utils/tableStore' import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue' import Table from '@/components/table/index.vue'
@@ -249,8 +244,21 @@ const tableStore = new TableStore({
{ {
title: '状态', title: '状态',
field: 'status', field: 'status',
formatter: row => { // formatter: row => {
return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入' // return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
// },
render: 'tag',
custom: {
1: 'warning',
2: 'success',
3: 'primary',
4: 'danger'
},
replaceValue: {
1: '未注册',
2: '注册',
3: '接入',
4: '已取消'
} }
}, },
{ {
@@ -260,19 +268,19 @@ const tableStore = new TableStore({
render: 'buttons', render: 'buttons',
buttons: [ buttons: [
{ {
name: 'edit', title: '接入',
title: '编辑',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-Grid',
render: 'basicButton', render: 'basicButton',
disabled: row => {
click: async row => { return (
dialogFormVisible.value = true (row.devType != '8b45cf6b7f5266e777d07c166ad5fa77' &&
dialogTitle.value = '编辑设备' row.devModel != 'a0d4da4b5c17b2172362a3f5a27bf217') ||
for (let key in form) { row.status == '3'
form[key] = row[key] )
} },
form.id = row.id click: row => {
console.log('接入')
} }
}, },
{ {
@@ -280,7 +288,12 @@ const tableStore = new TableStore({
type: 'primary', type: 'primary',
icon: 'el-icon-Grid', icon: 'el-icon-Grid',
render: 'basicButton', render: 'basicButton',
disabled: row => {
return (
row.devType == '8b45cf6b7f5266e777d07c166ad5fa77' &&
row.devModel == 'a0d4da4b5c17b2172362a3f5a27bf217'
)
},
click: row => { click: row => {
deivce.value = row deivce.value = row
deivce.value.qrPath = fullUrl(deivce.value.qrPath) deivce.value.qrPath = fullUrl(deivce.value.qrPath)
@@ -299,13 +312,28 @@ const tableStore = new TableStore({
}, 0) }, 0)
} }
}, },
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '编辑设备'
for (let key in form) {
form[key] = row[key]
}
form.id = row.id
}
},
{ {
name: 'del', name: 'del',
title: '删除', title: '删除',
type: 'danger', type: 'danger',
icon: 'el-icon-Delete', icon: 'el-icon-Delete',
render: 'basicButton', render: 'basicButton',
click: row => { click: row => {
ElMessageBox.confirm('确定删除该设备吗?', '提示', { ElMessageBox.confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确认', confirmButtonText: '确认',
@@ -430,10 +458,9 @@ onMounted(() => {
}, 100) }, 100)
}) })
const addMenu = () => { const addMenu = () => {}
}
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.qrcode-label { .qrcode-label {
position: absolute; position: absolute;
top: 0; top: 0;