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.
240 lines
9.0 KiB
240 lines
9.0 KiB
4 years ago
|
<template>
|
||
|
|
<el-form label-position="top" :model="data" ref="functionForm">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置金属腐蚀采样频率(分钟)" prop="frequency.metal">
|
||
|
|
<el-input-number :min="0" v-model="data.frequency.metal" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置温湿度采样频率(分钟)" prop="frequency.th">
|
||
|
|
<el-input-number :min="0" v-model="data.frequency.th" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置SO2采样频率(分钟)" prop="frequency.so2">
|
||
|
|
<el-input-number :min="0" v-model="data.frequency.so2" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置盐雾采样频率(分钟)" prop="frequency.salt">
|
||
|
|
<el-input-number :min="0" v-model="data.frequency.salt" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置时间" prop="time">
|
||
|
|
<!-- <el-input v-model="data.time"></el-input> -->
|
||
|
|
<el-date-picker v-model="data.time" type="datetime" placeholder="设置时间"></el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置金属腐蚀采集个数" prop="count">
|
||
|
|
<el-input-number :min="0" v-model="data.count" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置电池电压低阈值" prop="batteryLow">
|
||
|
|
<el-input-number :min="0" v-model="data.batteryLow" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置电池电压高阈值" prop="batteryHigh">
|
||
|
|
<el-input-number :min="0" v-model="data.batteryHigh" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置太阳能电压高阈值" prop="sunHigh">
|
||
|
|
<el-input-number :min="0" v-model="data.sunHigh" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置湿度高阈值" prop="humidityHigh">
|
||
|
|
<el-input-number :min="0" v-model="data.humidityHigh" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置温度低阈值" prop="temperatureLow">
|
||
|
|
<el-input-number :min="0" v-model="data.temperatureLow" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<el-form-item label="设置温度高阈值" prop="temperatureHigh">
|
||
|
|
<el-input-number :min="0" v-model="data.temperatureHigh" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<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 :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<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 :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<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 :span="12" :xs="24" :md="12" :lg="8" :xl="6">
|
||
|
|
<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 :gutter="20" v-if="data.report.type === 'POINT'">
|
||
|
|
<el-col :lg="6" :xl="4" :md="8" :sm="12" v-for="(item, index) in data.report.timePoints" :key="index">
|
||
|
|
<el-form-item prop="report.timePoints" style="margin-bottom: 10px !important">
|
||
|
|
<el-time-picker format="HH:mm" v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`"></el-time-picker>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="20" v-else>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item prop="report.cycle">
|
||
|
|
<el-input-number :min="0" v-model="data.report.cycle" />
|
||
|
|
</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, ref, watch, defineEmits, defineProps } from 'vue';
|
||
|
|
import { useStore } from 'vuex';
|
||
|
|
import { ElMessage } from 'element-plus';
|
||
|
|
import cloneDeep from 'lodash/cloneDeep';
|
||
|
|
import isDate from 'lodash/isDate';
|
||
|
|
import { getConfigFunction, createConfigFunction } from 'apis/index';
|
||
|
|
import Refresh from 'components/refresh.vue';
|
||
|
|
import { functionConfig, corrosiveTypes } 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 => {
|
||
|
|
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) {
|
||
|
|
resData.time = new Date(+resData.time);
|
||
|
|
}
|
||
|
|
if (resData && resData.status) {
|
||
|
|
emit('status', resData.status);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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] && isDate(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>
|