|
@@ -0,0 +1,304 @@
|
|
|
+<template>
|
|
|
+ <xn-form-container title="配置" :width="'60%'" :visible="visible" :destroy-on-close="true" @close="onClose">
|
|
|
+ <a-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="formRules"
|
|
|
+ layout="inline"
|
|
|
+ :label-col="{ style: { width: '85px', justifyContent: 'end' } }"
|
|
|
+ >
|
|
|
+ <div class="form_left">
|
|
|
+ <div class="form_title">网络目标参数</div>
|
|
|
+ <div class="form_row">
|
|
|
+ <a-form-item label="目标端口" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入目标端口" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="目标IP(域名)" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入目标IP" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form_title">WIFI目标路由器SSID参数</div>
|
|
|
+ <div class="form_row container">
|
|
|
+ <a-form-item label="目标路由器SSID" name="code" :label-col="{ style: { width: '135px' } }">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入目标路由器SSID" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="目标路由器登录密码" name="code" :label-col="{ style: { width: '135px' } }">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入目标路由器登录密码" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form_title">WIFI-WAN口参数</div>
|
|
|
+ <div class="form_row">
|
|
|
+ <a-form-item label="IP获取方式" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入IP获取方式" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="本地IP" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入本地IP" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="子网掩码" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入子网掩码" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="网关地址" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入网关地址" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form_title">MAC地址</div>
|
|
|
+
|
|
|
+ <div class="form_row">
|
|
|
+ <a-form-item label="MAC地址" name="code">
|
|
|
+ <a-input v-model:value="formData.code" placeholder="请输入MAC地址" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form_right">
|
|
|
+ <div class="form_title">设备参数</div>
|
|
|
+ <a-form-item label="终端地址" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-input v-model:value="formData.code" allow-clear />
|
|
|
+ <span class="suffix">00000001~99999999</span>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="登录帧间隔时间" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-input v-model:value="formData.code" allow-clear />
|
|
|
+ <span class="suffix">S(1-600000S)</span>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="心跳帧间隔时间" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-input v-model:value="formData.code" allow-clear />
|
|
|
+ <span class="suffix">S(1-600000S)</span>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="主动上送帧间隔时间" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-input v-model:value="formData.code" allow-clear />
|
|
|
+ <span class="suffix">S(1-600000S)</span>
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <!-- 温度 -->
|
|
|
+ <div class="temp">
|
|
|
+ <div>温度:</div>
|
|
|
+ <div class="temp_data">
|
|
|
+ <div class="data_item">
|
|
|
+ <div>上限</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="data_item">
|
|
|
+ <div>下限</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="data_item">
|
|
|
+ <div>回差</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="data_item">
|
|
|
+ <div>偏差</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 湿度 -->
|
|
|
+ <div class="temp">
|
|
|
+ <div>湿度:</div>
|
|
|
+ <div class="temp_data">
|
|
|
+ <div class="data_item">
|
|
|
+ <div>上限</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="data_item">
|
|
|
+ <div>下限</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="data_item">
|
|
|
+ <div>回差</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="data_item">
|
|
|
+ <div>偏差</div>
|
|
|
+ <a-form-item>
|
|
|
+ <a-input-number id="inputNumber" v-model:value="formData.code" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="temp">
|
|
|
+ <a-form-item label="温度上限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-checkbox v-model:checked="formData.checked" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="温度下限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-checkbox v-model:checked="formData.checked" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="temp">
|
|
|
+ <a-form-item label="湿度上限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-checkbox v-model:checked="formData.checked" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="湿度下限报警使能" name="code" :label-col="{ style: { width: '130px' } }">
|
|
|
+ <a-checkbox v-model:checked="formData.checked" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ <a-form-item label="设备数据记录间隔(分)" name="code" :label-col="{ style: { width: '150px' } }">
|
|
|
+ <a-input v-model:value="formData.code" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="数据记录模式" name="code" :label-col="{ style: { width: '150px' } }">
|
|
|
+ <a-input v-model:value="formData.code" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备中储存的数据主动上传" name="code" :label-col="{ style: { width: '180px' } }">
|
|
|
+ <a-checkbox v-model:checked="formData.checked" />
|
|
|
+ </a-form-item>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <a-button class="xn-mr8" @click="onClose">退出</a-button>
|
|
|
+ <a-button type="primary" @click="onSubmit">保存</a-button>
|
|
|
+ </template>
|
|
|
+ </xn-form-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import tool from '@/utils/tool'
|
|
|
+ import { message } from 'ant-design-vue'
|
|
|
+ import { required } from '@/utils/formRules'
|
|
|
+ import memApi from '@/api/basicset/memApi'
|
|
|
+ const emit = defineEmits({ successful: null })
|
|
|
+ const visible = ref(false) // 默认是关闭状态
|
|
|
+ const formRef = ref()
|
|
|
+ const formData = ref({}) // 表单数据
|
|
|
+ const modeOptions = tool.dictList('COIDCHAIN') // 设备型号
|
|
|
+ // 默认要校验的
|
|
|
+ const formRules = {
|
|
|
+ deviceName: [required('请输入设备名称')],
|
|
|
+ deviceCode: [required('请输入设备编号')],
|
|
|
+ modelName: [required('请选择设备型号')],
|
|
|
+ sensorCount: [required('请输入传感器路数')]
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开抽屉
|
|
|
+ const onOpen = (record) => {
|
|
|
+ visible.value = true
|
|
|
+ if (record) {
|
|
|
+ formData.value = Object.assign({}, record)
|
|
|
+ } else {
|
|
|
+ formData.value = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 关闭抽屉
|
|
|
+ const onClose = () => {
|
|
|
+ formRef.value.resetFields()
|
|
|
+ visible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证并提交数据
|
|
|
+ const onSubmit = () => {
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(() => {
|
|
|
+ memApi.submitForm(formData.value, formData.value.id).then(() => {
|
|
|
+ onClose()
|
|
|
+ emit('successful')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用这个函数将子组件的一些数据和方法暴露出去
|
|
|
+ defineExpose({
|
|
|
+ onOpen
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .ant-form {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .form_title {
|
|
|
+ height: 25px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 25px;
|
|
|
+ padding-left: 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .form_title::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ left: 0px;
|
|
|
+ height: 15px;
|
|
|
+ border-left: 4px solid #1878ff;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 左边表单
|
|
|
+ .form_left {
|
|
|
+ width: 60%;
|
|
|
+ padding: 0 10px;
|
|
|
+ .form_row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ :deep(.ant-form-item) {
|
|
|
+ width: 47%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ :deep(.ant-form-item) {
|
|
|
+ width: 60%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 右边表单
|
|
|
+ .form_right {
|
|
|
+ width: 40%;
|
|
|
+ padding: 0 10px;
|
|
|
+ background-color: #deeeff;
|
|
|
+ .ant-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .ant-input-affix-wrapper {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .suffix {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .temp {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .temp_data {
|
|
|
+ width: 90%;
|
|
|
+ margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .data_item {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ :deep(.ant-form-item) {
|
|
|
+ margin-inline-end: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|