|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<xn-form-container
|
|
|
:title="formData.id ? '编辑采集器' : '新增采集器'"
|
|
|
- :width="'60%'"
|
|
|
+ :width="'500px'"
|
|
|
:visible="visible"
|
|
|
:destroy-on-close="true"
|
|
|
@close="onClose"
|
|
|
@@ -13,231 +13,35 @@
|
|
|
layout="inline"
|
|
|
:label-col="{ style: { width: '100px', justifyContent: 'end' } }"
|
|
|
>
|
|
|
- <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
|
|
|
- <a-tab-pane tab="对象信息" key="object" :closable="false">
|
|
|
- <a-row :gutter="10">
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <a-form-item label="采集器名称" name="name">
|
|
|
- <a-input v-model:value="formData.name" placeholder="请输入采集器名称" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
-
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <a-form-item label="采集器编号" name="code">
|
|
|
- <a-input v-model:value="formData.code" placeholder="请输入采集器编号" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <a-form-item label="采集器条码" name="barcode">
|
|
|
- <a-input v-model:value="formData.barcode" placeholder="请输入采集器条码" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <a-form-item label="品牌" name="brand">
|
|
|
- <a-input v-model:value="formData.brand" placeholder="请输入品牌" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
-
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <a-form-item label="状态" name="state">
|
|
|
- <a-select ref="select" v-model:value="formData.state">
|
|
|
- <a-select-option value="1">正常</a-select-option>
|
|
|
- <a-select-option value="2">维修</a-select-option>
|
|
|
- <a-select-option value="3">闲置</a-select-option>
|
|
|
- <a-select-option value="4">报废</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
|
|
- <a-form-item label="所属部门">
|
|
|
- <a-input v-model:value="formData.division" placeholder="请输入所属部门" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
|
|
|
- <a-form-item label="采集时间">
|
|
|
- <a-time-range-picker v-model:value="formData.collectionTime" style="width: 100%" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <a-form-item label="位置">
|
|
|
- <a-input v-model:value="formData.location" placeholder="请输入位置" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <a-form-item label="备注">
|
|
|
- <a-textarea
|
|
|
- v-model:value="formData.remarks"
|
|
|
- placeholder="请输入备注"
|
|
|
- allow-clear
|
|
|
- :maxlength="200"
|
|
|
- :rows="4"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-tab-pane>
|
|
|
- <a-tab-pane tab="报警信息" key="report" :closable="false">
|
|
|
- <a-form-item :label-col="{ style: { width: '200px' } }">
|
|
|
- <template #label>
|
|
|
- <a-tooltip>
|
|
|
- <template #title>
|
|
|
- 重复通知间隔:同一设备同一故障类型出现报警进行过一次报警通知后，进行下一次报普通知的间隔时间，如果在这个时间间隔内该设备同一故障类型
|
|
|
- 还在产生报警则不再进行通知。
|
|
|
- 最多报警次数:同一设备同一故障类型连续报警最多报警通知次数，在达到最多报警次数后如果报警还未及时处理，系统也不再进行报警通知。
|
|
|
- 延时时间:为屏蔽误报，系统报警在达到延时时间之后才进行报警通知。
|
|
|
- </template>
|
|
|
- <question-circle-outlined />
|
|
|
- </a-tooltip>
|
|
|
- 重复发送通知：
|
|
|
- </template>
|
|
|
-
|
|
|
- <a-radio-group v-model:value="formData.repeat">
|
|
|
- <a-radio value="1">1次</a-radio>
|
|
|
- <a-radio value="2">多次</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="延时报警" :label-col="{ style: { width: '200px' } }">
|
|
|
- <a-radio-group v-model:value="formData.delayed">
|
|
|
- <a-radio value="1">是</a-radio>
|
|
|
- <a-radio value="0">否</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="报警关闭发送通知" :label-col="{ style: { width: '200px' } }">
|
|
|
- <a-radio-group v-model:value="formData.close">
|
|
|
- <a-radio value="1">是</a-radio>
|
|
|
- <a-radio value="0">否</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item label="多级报警" :label-col="{ style: { width: '200px' } }">
|
|
|
- <a-radio-group v-model:value="formData.multistage">
|
|
|
- <a-radio value="1">是</a-radio>
|
|
|
- <a-radio value="0">否</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <a-form-item label="报警通知方式" :label-col="{ style: { width: '200px' } }">
|
|
|
- <a-checkbox-group v-model:value="formData.noticeway" style="width: 100%">
|
|
|
- <a-checkbox value="1">短信</a-checkbox>
|
|
|
- <a-checkbox value="2">电话</a-checkbox>
|
|
|
- <a-checkbox value="3">微信</a-checkbox>
|
|
|
- <a-checkbox value="4">电子邮件</a-checkbox>
|
|
|
- <a-checkbox value="5">弹出</a-checkbox>
|
|
|
- <a-checkbox value="6">音乐</a-checkbox>
|
|
|
- </a-checkbox-group>
|
|
|
- </a-form-item>
|
|
|
-
|
|
|
- <!-- 表格区域 -->
|
|
|
- <div>
|
|
|
- <a-button type="primary" style="margin-left: 90%; margin-bottom: 5px" @click="tableAdd">
|
|
|
- <template #icon><plus-outlined /></template>新增
|
|
|
- </a-button>
|
|
|
- <a-table
|
|
|
- ref="tableRef"
|
|
|
- bordered
|
|
|
- :columns="columns"
|
|
|
- :data-source="formData.loadData"
|
|
|
- :row-key="(record) => record.startTime"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
- <template #headerCell="{ column }">
|
|
|
- <template v-if="column.dataIndex === 'startTime'">
|
|
|
- <text style="color: #e74032"> * </text>开始时间
|
|
|
- </template>
|
|
|
- <template v-if="column.dataIndex === 'endTime'">
|
|
|
- <text style="color: #e74032"> * </text>结束时间
|
|
|
- </template>
|
|
|
- <template v-if="column.dataIndex === 'name'"> <text style="color: #e74032"> * </text>姓名 </template>
|
|
|
- <template v-if="column.dataIndex === 'remindType'">
|
|
|
- <text style="color: #e74032"> * </text>提醒方式
|
|
|
- </template>
|
|
|
- <template v-if="column.dataIndex === 'level'"> <text style="color: #e74032"> * </text>级别 </template>
|
|
|
- <template v-if="column.dataIndex === 'phone'">
|
|
|
- <text style="color: #e74032"> * </text>电话号码
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template #bodyCell="{ column, record, index }">
|
|
|
- <!-- 表格内容 -->
|
|
|
- <template v-if="column.dataIndex === 'startTime'">
|
|
|
- <a-time-picker v-model:value="record.startTime" value-format="HH:mm:ss" style="width: 100%" />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="column.dataIndex === 'endTime'">
|
|
|
- <a-time-picker v-model:value="record.endTime" value-format="HH:mm:ss" style="width: 100%" />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="column.dataIndex === 'name'">
|
|
|
- <a-input v-model:value="record.name" placeholder="请输入姓名" />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="column.dataIndex === 'remindType'">
|
|
|
- <a-select v-model:value="record.remindType" placeholder="请选择提醒方式" style="width: 100%">
|
|
|
- <a-select-option value="1">短信报警</a-select-option>
|
|
|
- <a-select-option value="2">电话报警</a-select-option>
|
|
|
- <a-select-option value="3">微信公众号报警</a-select-option>
|
|
|
- <a-select-option value="4">邮件报警</a-select-option>
|
|
|
- <a-select-option value="5">弹出报警</a-select-option>
|
|
|
- <a-select-option value="6">音乐报警</a-select-option>
|
|
|
- </a-select>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="column.dataIndex === 'level'">
|
|
|
- <a-select v-model:value="record.level" placeholder="请选择级别" style="width: 100px">
|
|
|
- <a-select-option value="1">1</a-select-option>
|
|
|
- <a-select-option value="2">2</a-select-option>
|
|
|
- <a-select-option value="3">3</a-select-option>
|
|
|
- <a-select-option value="4">4</a-select-option>
|
|
|
- <a-select-option value="5">5</a-select-option>
|
|
|
- </a-select>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="column.dataIndex === 'phone'">
|
|
|
- <a-input v-model:value="record.phone" placeholder="请输入电话号码" />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template v-if="column.dataIndex === 'action'">
|
|
|
- <a-popconfirm title="确定要删除吗？" @confirm="tableDelete(record, index)">
|
|
|
- <a-button type="link" danger size="small">删除</a-button>
|
|
|
- </a-popconfirm>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
-
|
|
|
- <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
|
|
|
- <!-- 新增路数-->
|
|
|
- <div v-for="(item, index) in formData.list" :key="index">
|
|
|
- <a-row :gutter="10" v-if="activeKey == item.key">
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
|
|
|
- <a-form-item label="传感器路数">
|
|
|
- <a-input v-model:value="item.number" placeholder="请输入传感器路数" allow-clear />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
-
|
|
|
- <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
|
|
|
- <a-form-item label="传感器类型">
|
|
|
- <a-select ref="select" v-model:value="item.sensorType" placeholder="请选择传感器类型">
|
|
|
- <a-select-option value="1">温度</a-select-option>
|
|
|
- <a-select-option value="2">温湿度</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
-
|
|
|
- <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <a-form-item label="备注">
|
|
|
- <a-textarea
|
|
|
- v-model:value="item.numberRemarks"
|
|
|
- placeholder="请输入备注"
|
|
|
- allow-clear
|
|
|
- :maxlength="200"
|
|
|
- :rows="4"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
+ <a-form-item label="设备名称" name="deviceName">
|
|
|
+ <a-input v-model:value="formData.deviceName" placeholder="请输入设备名称" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备编号" name="deviceCode">
|
|
|
+ <a-input v-model:value="formData.deviceCode" placeholder="请输入设备编号" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备型号" name="modelName">
|
|
|
+ <a-select ref="select" v-model:value="formData.modelName" :options="modeOptions"> </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备状态" name="status">
|
|
|
+ <a-select ref="select" v-model:value="formData.status">
|
|
|
+ <a-select-option value="1">正常</a-select-option>
|
|
|
+ <a-select-option value="2">闲置</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="传感器路数" name="sensorCount">
|
|
|
+ <a-input-number
|
|
|
+ v-model:value="formData.sensorCount"
|
|
|
+ placeholder="请输入传感器路数"
|
|
|
+ allow-clear
|
|
|
+ :min="1"
|
|
|
+ :max="100000"
|
|
|
+ style="width: 100%"
|
|
|
+ :precision="0"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="排序：" name="sortCode">
|
|
|
+ <a-input-number class="xn-wd" v-model:value="formData.sortCode" :max="100" />
|
|
|
+ </a-form-item>
|
|
|
</a-form>
|
|
|
|
|
|
<template #footer>
|
|
|
@@ -248,83 +52,30 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+ import tool from '@/utils/tool'
|
|
|
import { message } from 'ant-design-vue'
|
|
|
import { required } from '@/utils/formRules'
|
|
|
- import moduleApi from '@/api/sys/resource/moduleApi'
|
|
|
- // 默认是关闭状态
|
|
|
- const visible = ref(false)
|
|
|
+ import memApi from '@/api/basicset/memApi'
|
|
|
const emit = defineEmits({ successful: null })
|
|
|
+ const visible = ref(false) // 默认是关闭状态
|
|
|
const formRef = ref()
|
|
|
-
|
|
|
- const tableRef = ref()
|
|
|
-
|
|
|
- const columns = [
|
|
|
- {
|
|
|
- title: '开始时间',
|
|
|
- dataIndex: 'startTime',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '结束时间',
|
|
|
- dataIndex: 'endTime',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '姓名',
|
|
|
- dataIndex: 'name',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '提醒方式',
|
|
|
- dataIndex: 'remindType',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '级别',
|
|
|
- dataIndex: 'level',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '电话号码',
|
|
|
- dataIndex: 'phone',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'action',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: { customRender: 'action' }
|
|
|
- }
|
|
|
- ]
|
|
|
- // 表单数据
|
|
|
- const formData = ref({
|
|
|
- repeat: '1',
|
|
|
- delayed: '0',
|
|
|
- close: '1',
|
|
|
- multistage: '0',
|
|
|
- noticeway: ['1'],
|
|
|
- loadData: [],
|
|
|
- list: []
|
|
|
- })
|
|
|
+ const formData = ref({ sortCode: 99 }) // 表单数据
|
|
|
+ const modeOptions = tool.dictList('COIDCHAIN') // 设备型号
|
|
|
+ // 默认要校验的
|
|
|
+ const formRules = {
|
|
|
+ deviceName: [required('请输入设备名称')],
|
|
|
+ deviceCode: [required('请输入设备编号')],
|
|
|
+ modelName: [required('请选择设备型号')],
|
|
|
+ sensorCount: [required('请输入传感器路数')]
|
|
|
+ }
|
|
|
|
|
|
// 打开抽屉
|
|
|
const onOpen = (record) => {
|
|
|
visible.value = true
|
|
|
- activeKey.value = 'object'
|
|
|
- panes.value = []
|
|
|
- newTabIndex.value = 1
|
|
|
if (record) {
|
|
|
formData.value = Object.assign({}, record)
|
|
|
} else {
|
|
|
- formData.value = {
|
|
|
- repeat: '1',
|
|
|
- delayed: '0',
|
|
|
- close: '1',
|
|
|
- multistage: '0',
|
|
|
- noticeway: ['1'],
|
|
|
- loadData: [],
|
|
|
- list: []
|
|
|
- }
|
|
|
+ formData.value = { sortCode: 99 }
|
|
|
}
|
|
|
}
|
|
|
// 关闭抽屉
|
|
|
@@ -333,111 +84,21 @@
|
|
|
visible.value = false
|
|
|
}
|
|
|
|
|
|
- // 默认要校验的
|
|
|
- const formRules = {
|
|
|
- name: [required('请输入采集器名称')],
|
|
|
- code: [required('请输入采集器编号')]
|
|
|
- }
|
|
|
-
|
|
|
- // 表格添加一行空数据
|
|
|
- const tableAdd = () => {
|
|
|
- const newRow = {
|
|
|
- startTime: '00:00:00',
|
|
|
- endTime: '23:59:59',
|
|
|
- name: '',
|
|
|
- level: '',
|
|
|
- phone: ''
|
|
|
- }
|
|
|
- formData.value.loadData.push(newRow)
|
|
|
- }
|
|
|
-
|
|
|
- // 删除某一行
|
|
|
- const tableDelete = (record, index) => {
|
|
|
- formData.value.loadData.splice(index, 1)
|
|
|
- }
|
|
|
-
|
|
|
// 验证并提交数据
|
|
|
const onSubmit = () => {
|
|
|
formRef.value
|
|
|
.validate()
|
|
|
.then(() => {
|
|
|
- // 校验表格信息里面的表单是否有空数据
|
|
|
- for (let i = 0; i < formData.value.loadData.length; i++) {
|
|
|
- if (
|
|
|
- !formData.value.loadData[i].startTime ||
|
|
|
- !formData.value.loadData[i].endTime ||
|
|
|
- !formData.value.loadData[i].name ||
|
|
|
- !formData.value.loadData[i].remindType ||
|
|
|
- !formData.value.loadData[i].level ||
|
|
|
- !formData.value.loadData[i].phone
|
|
|
- ) {
|
|
|
- console.log(i, 'xxxxxx')
|
|
|
-
|
|
|
- message.warning(`请完善表格中的必填项`)
|
|
|
- } else {
|
|
|
- console.log(formData.value.list, '提交数据')
|
|
|
- // moduleApi.submitForm(formData.value, formData.value.id).then(() => {
|
|
|
- // onClose()
|
|
|
- // emit('successful')
|
|
|
- // })
|
|
|
- }
|
|
|
- }
|
|
|
+ memApi.submitForm(formData.value, formData.value.id).then(() => {
|
|
|
+ onClose()
|
|
|
+ emit('successful')
|
|
|
+ })
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- // 新增或删除路数
|
|
|
- const onEdit = (targetKey, action) => {
|
|
|
- if (action === 'add') {
|
|
|
- add()
|
|
|
- } else {
|
|
|
- remove(targetKey)
|
|
|
- }
|
|
|
- }
|
|
|
- const activeKey = ref('object') //选中的tabs
|
|
|
- const panes = ref([]) //tabs数组
|
|
|
- const newTabIndex = ref(1)
|
|
|
- // 添加tabs
|
|
|
- const add = () => {
|
|
|
- const newIndex = newTabIndex.value++
|
|
|
- if (panes.value.length >= 5) return //最多只能5路
|
|
|
- panes.value.push({
|
|
|
- title: `${newIndex}路`,
|
|
|
- key: newIndex
|
|
|
- })
|
|
|
-
|
|
|
- formData.value.list.push({
|
|
|
- title: `${newIndex}路`,
|
|
|
- key: newIndex
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- // 删除tabs
|
|
|
- const remove = (targetKey) => {
|
|
|
- let lastIndex = 0
|
|
|
- panes.value.forEach((pane, i) => {
|
|
|
- if (pane.key === targetKey) {
|
|
|
- lastIndex = i - 1
|
|
|
- }
|
|
|
- })
|
|
|
- panes.value = panes.value.filter((pane) => pane.key !== targetKey)
|
|
|
- if (panes.value.length && activeKey.value === targetKey) {
|
|
|
- if (lastIndex >= 0) {
|
|
|
- activeKey.value = panes.value[lastIndex].key
|
|
|
- } else {
|
|
|
- activeKey.value = panes.value[0].key
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (panes.value.length == 0) {
|
|
|
- activeKey.value = 'object'
|
|
|
- }
|
|
|
-
|
|
|
- formData.value.list = formData.value.list.filter((item) => item.key !== targetKey) //删除表单
|
|
|
- }
|
|
|
-
|
|
|
// 调用这个函数将子组件的一些数据和方法暴露出去
|
|
|
defineExpose({
|
|
|
onOpen
|
|
|
@@ -448,7 +109,8 @@
|
|
|
.ant-tabs {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- :deep(.ant-col) {
|
|
|
+ :deep(.ant-form-item) {
|
|
|
+ width: 100%;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
</style>
|
like