You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
9.6 KiB
267 lines
9.6 KiB
<template>
|
|
<el-form ref="functionForm" :model="data" label-position="top">
|
|
<el-row :gutter="20">
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="金属腐蚀采样频率(分钟)" prop="frequency.metal">
|
|
<el-input-number v-model="data.frequency.metal" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="温湿度采样频率(分钟)" prop="frequency.th">
|
|
<el-input-number v-model="data.frequency.th" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="SO2采样频率(分钟)" prop="frequency.so2">
|
|
<el-input-number v-model="data.frequency.so2" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="盐雾采样频率(分钟)" prop="frequency.salt">
|
|
<el-input-number v-model="data.frequency.salt" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="时间" prop="time">
|
|
<!-- <el-input v-model="data.time"></el-input> -->
|
|
<el-date-picker v-model="data.time" placeholder="设置时间" type="datetime"></el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="金属腐蚀采集个数" prop="count">
|
|
<el-input-number v-model="data.count" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="电池电压低阈值(V)" prop="batteryLow">
|
|
<el-input-number v-model="data.batteryLow" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="电池电压高阈值(V)" prop="batteryHigh">
|
|
<el-input-number v-model="data.batteryHigh" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="太阳能板电压高阈值(V)" prop="sunHigh">
|
|
<el-input-number v-model="data.sunHigh" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="湿度高阈值(RH%)" prop="humidityHigh">
|
|
<el-input-number v-model="data.humidityHigh" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="温度低阈值(℃)" prop="temperatureLow">
|
|
<el-input-number v-model="data.temperatureLow" :min="-30" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="温度高阈值(℃)" prop="temperatureHigh">
|
|
<el-input-number v-model="data.temperatureHigh" :min="0" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="选择金属通道1类型" prop="securityMode">
|
|
<el-select v-model="data.corrosiveType1" placeholder="选择金属腐蚀类型">
|
|
<el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="选择金属通道2类型" prop="corrosiveType">
|
|
<el-select v-model="data.corrosiveType2" placeholder="选择金属腐蚀类型">
|
|
<el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="选择金属通道3类型" prop="securityMode">
|
|
<el-select v-model="data.corrosiveType3" placeholder="选择金属腐蚀类型">
|
|
<el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="选择金属通道4类型" prop="corrosiveType">
|
|
<el-select v-model="data.corrosiveType4" placeholder="选择金属腐蚀类型">
|
|
<el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="安全模式" prop="securityMode">
|
|
<!-- <el-input v-model="data.securityMode"></el-input> -->
|
|
<el-radio v-model="data.securityMode" label="OPEN">不加密</el-radio>
|
|
<el-radio v-model="data.securityMode" label="ENCRYPTION">加密</el-radio>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="上报时间" prop="report.type" style="margin-bottom: 0 !important">
|
|
<el-radio-group v-model="data.report.type">
|
|
<el-radio label="POINT">定时上报</el-radio>
|
|
<el-radio label="CYCLE">周期上报(分钟)</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row v-if="data.report.type === 'POINT'" :gutter="20">
|
|
<el-col v-for="(item, index) in data.report.timePoints" :key="index" :lg="6" :md="8" :sm="12" :xl="4">
|
|
<el-form-item prop="report.timePoints" style="margin-bottom: 10px !important">
|
|
<el-time-picker v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`" format="HH:mm"></el-time-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row v-else :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item prop="report.cycle">
|
|
<el-input-number v-model="data.report.cycle" :max="1440" :min="10" step="10" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" class="mt-5 pl-2">
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">提交</el-button>
|
|
<el-button @click="onReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-row>
|
|
</el-form>
|
|
|
|
<!-- 刷新下发按钮 -->
|
|
<Refresh @refresh="onSearch(currentDeviceId, 1)" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, defineEmits, defineProps, ref, watch } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { ElMessage } from 'element-plus';
|
|
import cloneDeep from 'lodash/cloneDeep';
|
|
import isDate from 'lodash/isDate';
|
|
import { createConfigFunction, getConfigFunction } from 'apis';
|
|
import Refresh from 'components/refresh.vue';
|
|
import { corrosiveTypes, functionConfig } from '@/config/config';
|
|
|
|
const data = ref(functionConfig);
|
|
// 金属腐蚀的类型
|
|
const types = ref(corrosiveTypes);
|
|
|
|
const functionForm = ref(null); // form
|
|
const store = useStore();
|
|
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
|
|
const emit = defineEmits(['status']);
|
|
const props = defineProps({ activeName: String });
|
|
|
|
/**
|
|
* 格式化时间
|
|
*/
|
|
const formatTime = date => {
|
|
if (!isDate(date)) return '';
|
|
const hour = date.getHours();
|
|
const minute = date.getMinutes();
|
|
return `${hour}:${minute}`;
|
|
};
|
|
|
|
/**
|
|
* 查询网络参数配置
|
|
* @param {string} deviceId 设备id
|
|
* @param {number} type 0数据库查询 1刷新查询
|
|
*/
|
|
async function onSearch(deviceId, type = 0) {
|
|
const params = {
|
|
deviceId,
|
|
type,
|
|
};
|
|
const resData = await getConfigFunction(params);
|
|
data.value = resData || functionConfig;
|
|
if (resData && resData.time) {
|
|
// 格式化ms为日期格式
|
|
resData.time = new Date(+resData.time);
|
|
}
|
|
if (resData && resData.status) {
|
|
// 设置 设置状态
|
|
emit('status', resData.status);
|
|
} else {
|
|
emit('status', '');
|
|
}
|
|
|
|
if (resData && resData.report.type === 'POINT') {
|
|
const { timePoints } = resData.report;
|
|
// 如果是按照时间点上传的
|
|
if (timePoints && timePoints.length) {
|
|
for (let i = 0; i < timePoints.length; i++) {
|
|
const date = new Date().toLocaleDateString();
|
|
const item = resData.report.timePoints[i];
|
|
const reg = /^\d{1,2}:\d{1,2}$/;
|
|
if (item && reg.test(item)) {
|
|
resData.report.timePoints[i] = new Date(`${date} ${item}`);
|
|
} else {
|
|
resData.report.timePoints[i] = '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
watch(
|
|
currentDeviceId,
|
|
newDeviceId => {
|
|
newDeviceId && props.activeName === 'pending' && onSearch(newDeviceId);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
// 提交表单
|
|
const onSubmit = () => {
|
|
functionForm.value.validate(async () => {
|
|
try {
|
|
if (!currentDeviceId.value) {
|
|
return ElMessage.error('请选择站点');
|
|
}
|
|
const param = cloneDeep({
|
|
...data.value,
|
|
deviceId: currentDeviceId.value,
|
|
});
|
|
param.time = new Date(param.time).getTime();
|
|
if (param.report.type === 'POINT') {
|
|
// 按时间点上报 格式化时间格式
|
|
const points = [...param.report.timePoints];
|
|
for (let i = 0; i < points.length; i++) {
|
|
if (points[i]) {
|
|
points[i] = formatTime(points[i]);
|
|
}
|
|
}
|
|
param.report.timePoints = points;
|
|
}
|
|
await createConfigFunction(param);
|
|
ElMessage.success('提交成功');
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 重置表单
|
|
const onReset = () => {
|
|
functionForm.value.resetFields();
|
|
};
|
|
|
|
// currentDeviceId && onSearch(currentDeviceId.value);
|
|
</script>
|
|
|