物联设备管理拉取同步推送

src/views/device/manager/components/integration/HumidList.vue

@@ -24,11 +24,13 @@
         </span>
       </template>
     </BasicTable>
+    <HumidFormModal ref="configModal"></HumidFormModal>
   </div>
 </template>
 
 <script lang="ts" name="DeviceManager-Electricity" setup>
 import { ref, reactive } from 'vue';
+import HumidFormModal from './components/HumidFormModal.vue'
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
 import { deviceColumns } from './integration.data';
@@ -36,6 +38,7 @@ import {humidList, pullHumid} from './integration.api';
 import { useUserStore } from '/@/store/modules/user';
 const previewModal = ref();
 const formRef = ref();
+const configModal = ref();
 const queryParam = reactive<any>({});
 const toggleSearchStatus = ref<boolean>(false);
 const registerModal = ref();
@@ -105,12 +108,8 @@ function searchReset() {
  * 预览
  */
 function handleConfig(record: Recordable) {
-  if (record.deviceIndex == null) {
+  configModal.value.disableSubmit = false;
-    return
+  configModal.value.edit(record);
-  }
-  record.streamType = 1;
-  previewModal.value.disableSubmit = true;
-  previewModal.value.edit(record);
 }
 
 /**

src/views/device/manager/components/integration/components/HumidForm.vue

@@ -0,0 +1,309 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="记录间隔(分钟)">
+                <a-input-number v-model:value="formData.recordInterval" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="上报间隔(分钟)">
+                <a-input-number v-model:value="formData.reportingInterval" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="历史上报时刻(00:00)">
+                <a-input v-model:value="formData.historyReportTime"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="历史上报间隔(小时)">
+                <a-input-number v-model:value="formData.historyInterval" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="温度预警-上限">
+                <a-input-number v-model:value="formData.temperatureHigh" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="温度预警-下限">
+                <a-input-number v-model:value="formData.temperatureLow" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="温度缓冲值">
+                <a-input-number v-model:value="formData.temperatureBuffer" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="湿度预警-上限">
+                <a-input-number v-model:value="formData.humidityHigh" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="湿度预警-下限">
+                <a-input-number v-model:value="formData.humidityLow" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="湿度缓冲值">
+                <a-input-number v-model:value="formData.humidityBuffer" style="width: 100%;"></a-input-number>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="断电报警开关">
+                <a-select v-model:value="formData.izOutages" placeholder="请选择断电报警开关">
+                  <a-select-option value="0">开启</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="低电报警开关">
+                <a-select v-model:value="formData.izLowBattery" placeholder="请选择低电报警开关">
+                  <a-select-option value="0">开启</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="上下线通知开关">
+                <a-select v-model:value="formData.izOnline" placeholder="请选择上下线通知开关">
+                  <a-select-option value="0">开启</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row >
+            <a-col :span="24">
+              <a-form-item label="读取设备参数">
+                <a-button preIcon="ant-design:appstore-outlined" @click="readParameters(formData.sn)">读取</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { getValueType } from '/@/utils';
+import { getDeviceInfo, getDeviceParameters, updateDevice } from '@/views/iot/yiweilian/humid/humid.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: ()=>{} },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  sn: '',
+  recordInterval: '',
+  reportingInterval: '',
+  historyReportTime: '',
+  historyInterval: '',
+  temperatureHigh: '',
+  temperatureLow: '',
+  temperatureBuffer: '',
+  humidityHigh: '',
+  humidityLow: '',
+  humidityBuffer: '',
+  izOutages: '',
+  izLowBattery: '',
+  izOnline: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = {
+  requestUrl: [{ required: true, message: '请输入云平台地址!'},],
+  clientId: [{ required: true, message: '请输入用户标识!'},]
+};
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
+
+// 表单禁用
+const disabled = computed(()=>{
+  if(props.formBpm === true){
+    if(props.formData.disabled === false){
+      return false;
+    }else{
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+
+/**
+ * 新增
+ */
+function add() {
+  let record = {};
+  edit(record);
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  getInfo(record);
+  // nextTick(() => {
+  //   resetFields();
+  //   //赋值
+  //   const tmpData = {};
+  //   Object.keys(formData).forEach((key) => {
+  //     if(record.hasOwnProperty(key)){
+  //       tmpData[key] = record[key]
+  //     }
+  //   })
+  //   //赋值
+  //   Object.assign(formData, tmpData);
+  // });
+}
+
+/**
+ * 读取设备信息
+ * @param record
+ */
+function getInfo(record){
+  getDeviceInfo({
+    "sn":record.sn
+  }).then(res=> {
+    console.log(res);
+    nextTick(() => {
+      resetFields();
+      //赋值
+      const tmpData = {};
+      Object.keys(formData).forEach((key) => {
+        if(res.hasOwnProperty(key)){
+          tmpData[key] = res[key]
+        }
+      })
+      //赋值
+      Object.assign(formData, tmpData);
+    });
+  })
+}
+
+/**
+ * 读取参数
+ * @param record
+ */
+function readParameters(sn){
+  getDeviceParameters({
+    "sn":sn
+  }).then(res=> {
+    console.log(res);
+    nextTick(() => {
+      resetFields();
+      //赋值
+      const tmpData = {};
+      Object.keys(formData).forEach((key) => {
+        if(res.hasOwnProperty(key)){
+          tmpData[key] = res[key]
+        }
+      })
+      //赋值
+      Object.assign(formData, tmpData);
+    });
+  })
+}
+
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+      }
+    }
+    return Promise.reject(errorFields);
+  }
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  await updateDevice(model, isUpdate.value)
+    .then((res) => {
+      // if (res.success) {
+      //   createMessage.success(res.message);
+        emit('ok');
+      // } else {
+      //   createMessage.warning(res.message);
+      // }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+</style>

src/views/device/manager/components/integration/components/HumidFormModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-drawer :title="title" :width="width" :visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
+    <HumidForm ref="formRef" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
+    </HumidForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineExpose } from 'vue';
+import HumidForm from './HumidForm.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+
+const title = ref<string>('');
+const width = ref<string>('800');
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const formRef = ref();
+const emit = defineEmits(['register', 'success']);
+
+/**
+ * 新增
+ */
+function add() {
+  title.value = '新增配置';
+  visible.value = true;
+  nextTick(() => {
+    formRef.value.add();
+  });
+}
+
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '配置详情' : '编辑配置';
+  visible.value = true;
+  nextTick(() => {
+    formRef.value.edit(record);
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  formRef.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback(params) {
+  handleCancel();
+  emit('success', params);
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  add,
+  edit,
+  disableSubmit,
+});
+</script>
+
+<style lang="less">
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
+</style>
+<style lang="less" scoped></style>

src/views/iot/yiweilian/humid/humid.api.ts

@@ -5,6 +5,7 @@ enum Api {
   insertDevice = '/iot/yiweilian/humidDevice/insertDevice',
   updateDevice = '/iot/yiweilian/humidDevice/updateDevice',
   delFlagDevice = '/iot/yiweilian/humidDevice/delFlagDevice',
+  getDeviceInfo = '/iot/yiweilian/humidDevice/getDeviceInfo',
   getDeviceParameters = '/iot/yiweilian/humidDevice/getDeviceParameters',
   updateDeviceRealTime = '/iot/yiweilian/humidDevice/updateDeviceRealTime',
   logList = '/iot/yiweilian/humidDevice/logList',
@@ -42,6 +43,12 @@ export const updateDevice = (params?) => defHttp.get({ url: Api.updateDevice, pa
  */
 export const delFlagDevice = (params?) => defHttp.get({ url: Api.delFlagDevice, params });
 
+/**
+ * 获取设备信息
+ * @param params
+ */
+export const getDeviceInfo = (params?) => defHttp.get({ url: Api.getDeviceInfo, params });
+
 /**
  * 获取设备配置参数
  * @param params