forked from TALL/tall3-pc-keti
19 changed files with 551 additions and 336 deletions
@ -1,4 +1,4 @@ |
|||
{ |
|||
"cSpell.words": ["browserslist", "commitlint", "unplugin", "windi", "windicss"], |
|||
"cSpell.words": ["browserslist", "commitlint", "datas", "unplugin", "windi", "windicss"], |
|||
"vue3snippets.enable-compile-vue-file-on-did-save-code": true |
|||
} |
|||
|
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置金属腐蚀采样频率(分钟)：</span> |
|||
<span>{{ data.frequency.metal }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置温湿度采样频率(分钟)：</span> |
|||
<span>{{ data.frequency.th }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置SO2采样频率(分钟)：</span> |
|||
<span>{{ data.frequency.so2 }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置盐雾采样频率(分钟)：</span> |
|||
<span>{{ data.frequency.salt }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置时间：</span> |
|||
<span>{{ formatMsTime(data.time) }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置金属腐蚀采集个数：</span> |
|||
<span>{{ data.count }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置电池电压低阈值：</span> |
|||
<span>{{ data.batteryLow }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置电池电压高阈值：</span> |
|||
<span>{{ data.batteryHigh }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置太阳能电压高阈值：</span> |
|||
<span>{{ data.sunHigh }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置湿度高阈值：</span> |
|||
<span>{{ data.humidityHigh }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置温度低阈值：</span> |
|||
<span>{{ data.temperatureLow }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>设置温度高阈值：</span> |
|||
<span>{{ data.temperatureHigh }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>选择金属通道1类型：</span> |
|||
<span>{{ formatCorrosiveType(data.corrosiveType1) }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>选择金属通道2类型：</span> |
|||
<span>{{ formatCorrosiveType(data.corrosiveType2) }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>选择金属通道3类型：</span> |
|||
<span>{{ formatCorrosiveType(data.corrosiveType3) }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>选择金属通道4类型：</span> |
|||
<span>{{ formatCorrosiveType(data.corrosiveType4) }}</span> |
|||
</el-col> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>安全模式：</span> |
|||
<span>{{ formatMode(data.securityMode) }}</span> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|||
<span>上报类型：</span> |
|||
<span class="mr-8">{{ formatReportType(data.report.type) }}</span> |
|||
|
|||
<span v-if="data.report.type === 'POINT'">{{ data.report.reportTimePoints }}</span> |
|||
<span v-else>{{ data.report.cycle }}分钟</span> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 刷新下发按钮 --> |
|||
<!-- <Refresh @refresh="onSearch(currentDeviceI, 1)" /> --> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, ref, watch, defineEmits, defineProps } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { getConfigAppliedNetwork } from 'apis/index'; |
|||
import { formatMsTime } from 'utils/time'; |
|||
import { functionConfig, corrosiveTypes } from '@/config/config'; |
|||
|
|||
const store = useStore(); |
|||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); |
|||
const data = ref(functionConfig); // 实际数据 |
|||
const emit = defineEmits(['status']); |
|||
const props = defineProps({ activeName: String }); |
|||
|
|||
/** |
|||
* 查询网络参数配置 设备真实参数 |
|||
* @param {string} deviceId 设备id |
|||
*/ |
|||
const onSearch = async deviceId => { |
|||
try { |
|||
const params = { deviceId }; |
|||
const resData = await getConfigAppliedNetwork(params); |
|||
data.value = resData || functionConfig; |
|||
if (resData && resData.status) { |
|||
emit('status', resData.status); |
|||
} |
|||
} catch (error) { |
|||
throw new Error(error); |
|||
} |
|||
}; |
|||
|
|||
watch( |
|||
currentDeviceId, |
|||
newDeviceId => { |
|||
newDeviceId && props.activeName === 'applied' && onSearch(newDeviceId); |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
|
|||
/** |
|||
* 转化安全模式 |
|||
* @param {string|number} time 时间ms |
|||
*/ |
|||
function formatMode(mode) { |
|||
return mode === 'OPEN' ? '不加密' : '加密'; |
|||
} |
|||
|
|||
/** |
|||
* 转化上报类型显示 |
|||
* @param {string} reportType 上报类型 |
|||
*/ |
|||
function formatReportType(reportType) { |
|||
return reportType === 'POINT' ? '按时间点上报' : '按周期上报'; |
|||
} |
|||
|
|||
/** |
|||
* 格式化金属腐蚀类型 |
|||
* @param {string} type 服务端返回的类型 |
|||
* @return {string} type 对应的文字名称 |
|||
*/ |
|||
function formatCorrosiveType(type) { |
|||
const target = corrosiveTypes.find(item => item.value === type); |
|||
return target.label; |
|||
} |
|||
</script> |
|||
@ -0,0 +1,239 @@ |
|||
<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> |
|||
@ -0,0 +1,49 @@ |
|||
export const networkConfig = { |
|||
ip1: '', |
|||
port1: '', |
|||
ip2: '', |
|||
port2: '', |
|||
ip3: '', |
|||
port3: '', |
|||
ipBackup: '', |
|||
portBackup: '', |
|||
account: '', |
|||
password: '', |
|||
apn: '', |
|||
status: '', |
|||
}; |
|||
|
|||
export const functionConfig = { |
|||
frequency: { |
|||
so2: 0, // SO2采样频率
|
|||
metal: 0, // 金属腐蚀采样频率
|
|||
th: 0, // 温湿度 采样频率
|
|||
salt: 0, // 盐雾 采样频率
|
|||
}, // 采样频率
|
|||
count: 0, // 采集个数
|
|||
time: Date.now(), // 设置时间
|
|||
batteryLow: 0, // 电池电压低阈值
|
|||
batteryHigh: 0, // 电池电压高阈值
|
|||
sunHigh: 0, // 太阳能电压高阈值
|
|||
humidityHigh: 0, // 湿度高阈值
|
|||
temperatureLow: 0, // 温度低阈值
|
|||
temperatureHigh: 0, // 温度高阈值
|
|||
securityMode: 'OPEN', // 安全模式 OPEN->不加密 ENCRYPTION->加密
|
|||
corrosiveType1: '', // 金属腐蚀类型
|
|||
corrosiveType2: '', // 金属腐蚀类型
|
|||
corrosiveType3: '', // 金属腐蚀类型
|
|||
corrosiveType4: '', // 金属腐蚀类型
|
|||
report: { |
|||
type: 'CYCLE', // 上报周期类型 0->时间点 1->周期
|
|||
timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
|
|||
cycle: 0, // 上报周期分钟数
|
|||
}, |
|||
status: '', |
|||
}; |
|||
|
|||
export const corrosiveTypes = [ |
|||
{ value: 'XIN', type: '锌' }, |
|||
{ value: 'LV', type: '铝' }, |
|||
{ value: 'TONG', type: '铜' }, |
|||
{ value: 'GANG', type: '钢' }, |
|||
]; |
|||
@ -0,0 +1,16 @@ |
|||
import dayjs from 'dayjs'; |
|||
|
|||
/** |
|||
* 格式化时间 |
|||
* @param {string | number} time 时间戳字符串或数字 |
|||
* @param {string} formatStyle |
|||
* @returns |
|||
*/ |
|||
export function formatMsTime(time, formatStyle = 'YYYY-MM-DD HH:mm:ss') { |
|||
return dayjs(+time).format(formatStyle); |
|||
} |
|||
|
|||
// 图表时间轴的时间格式化
|
|||
export function formatChartTime(time) { |
|||
return formatMsTime(time, 'MM/DD HH:mm'); |
|||
} |
|||
@ -1,260 +1,28 @@ |
|||
<template> |
|||
<!-- 设置站点选择 和 设备下发状态 --> |
|||
<DeviceSelectAndStatus @search="onSearch" :status="data.status" /> |
|||
|
|||
<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="0">不加密</el-radio> |
|||
<el-radio v-model="data.securityMode" :label="1">加密</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="0">按设定时间点上报</el-radio> |
|||
<el-radio :label="1">按设定周期上报(分钟)</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row :gutter="20" v-if="data.report.type === 0"> |
|||
<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)" /> |
|||
<DeviceSelectAndStatus :status="status" /> |
|||
|
|||
<el-tabs v-model="activeName"> |
|||
<el-tab-pane label="下发参数" name="pending" :lazy="true"> |
|||
<FunctionConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="设备参数" name="applied" :lazy="true"> |
|||
<FunctionConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import { cloneDeep, isDate } from 'lodash'; |
|||
import { getConfigFunction, createConfigFunction } from 'apis/index'; |
|||
import { ref } from 'vue'; |
|||
import DeviceSelectAndStatus from 'components/device-select-and-status.vue'; |
|||
import Refresh from 'components/refresh.vue'; |
|||
|
|||
const originData = { |
|||
frequency: { |
|||
so2: 0, // SO2采样频率 |
|||
metal: 0, // 金属腐蚀采样频率 |
|||
th: 0, // 温湿度 采样频率 |
|||
salt: 0, // 盐雾 采样频率 |
|||
}, // 采样频率 |
|||
count: 0, // 采集个数 |
|||
time: new Date(), // 设置时间 |
|||
batteryLow: 0, // 电池电压低阈值 |
|||
batteryHigh: 0, // 电池电压高阈值 |
|||
sunHigh: 0, // 太阳能电压高阈值 |
|||
humidityHigh: 0, // 湿度高阈值 |
|||
temperatureLow: 0, // 温度低阈值 |
|||
temperatureHigh: 0, // 温度高阈值 |
|||
securityMode: 0, // 安全模式 0->不加密 1->加密 |
|||
corrosiveType1: '', // 金属腐蚀类型 |
|||
corrosiveType2: '', // 金属腐蚀类型 |
|||
corrosiveType3: '', // 金属腐蚀类型 |
|||
corrosiveType4: '', // 金属腐蚀类型 |
|||
report: { |
|||
type: 0, // 上报周期类型 0->时间点 1->周期 |
|||
timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点 |
|||
cycle: 0, // 上报周期分钟数 |
|||
}, |
|||
status: 'PENDING', |
|||
}; |
|||
const data = ref(originData); |
|||
|
|||
// 金属腐蚀的类型 |
|||
const types = ref([ |
|||
{ value: 0, type: '锌' }, |
|||
{ value: 1, type: '铝' }, |
|||
{ value: 2, type: '铜' }, |
|||
{ value: 3, type: '钢' }, |
|||
]); |
|||
|
|||
const functionForm = ref(null); // form |
|||
const store = useStore(); |
|||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); |
|||
|
|||
/** |
|||
* 格式化时间 |
|||
*/ |
|||
const formatTime = date => { |
|||
const hour = date.getHours(); |
|||
const minute = date.getMinutes(); |
|||
return `${hour}:${minute}`; |
|||
}; |
|||
|
|||
// 提交表单 |
|||
const onSubmit = () => { |
|||
functionForm.value.validate(async () => { |
|||
try { |
|||
const param = cloneDeep({ ...data.value, deviceId: currentDeviceId.value }); |
|||
param.time = new Date(param.time).getTime(); |
|||
if (param.report.type === 0) { |
|||
// 按时间点上报 格式化时间格式 |
|||
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) { |
|||
ElMessage.error('提交失败, 请稍后重试'); |
|||
throw new Error(error); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 重置表单 |
|||
const onReset = () => { |
|||
functionForm.value.resetFields(); |
|||
}; |
|||
import FunctionConfigPending from 'components/function-config-pending.vue'; |
|||
import FunctionConfigApplied from 'components/function-config-applied.vue'; |
|||
|
|||
/** |
|||
* 查询网络参数配置 |
|||
* @param {string} deviceId 设备id |
|||
* @param {number} type 0数据库查询 1刷新查询 |
|||
*/ |
|||
const onSearch = async (deviceId, type = 0) => { |
|||
const params = { deviceId, type }; |
|||
store.commit('device/setCurrentDeviceId', deviceId); |
|||
const resData = await getConfigFunction(params); |
|||
if (resData && resData.time) { |
|||
resData.time = new Date(+resData.time); |
|||
} |
|||
data.value = resData || originData; |
|||
}; |
|||
const activeName = ref('pending'); |
|||
const status = ref('PENDING'); |
|||
|
|||
currentDeviceId && onSearch(currentDeviceId.value); |
|||
// 设置 设置状态 |
|||
function setStatus(event) { |
|||
status.value = event; |
|||
} |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue