33 changed files with 425 additions and 7941 deletions
File diff suppressed because it is too large
@ -1,109 +0,0 @@ |
|||||
<template> |
|
||||
<el-card class="box-card"> |
|
||||
<el-empty v-if="noData" description="暂无数据"></el-empty> |
|
||||
<div id="realtimeContainer"></div> |
|
||||
</el-card> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { defineExpose, onMounted, ref } from 'vue'; |
|
||||
import { Line } from '@antv/g2plot'; |
|
||||
import { formatChartTime } from 'utils/time'; |
|
||||
|
|
||||
const show = ref(false); |
|
||||
const noData = ref(true); |
|
||||
let bar = null; |
|
||||
|
|
||||
// 设置图表 |
|
||||
onMounted(() => { |
|
||||
show.value = true; |
|
||||
}); |
|
||||
|
|
||||
// 设置图表 |
|
||||
const setDate = data => { |
|
||||
if (bar) { |
|
||||
bar.destroy(); |
|
||||
} |
|
||||
bar = new Line('realtimeContainer', { |
|
||||
data, |
|
||||
padding: 'auto', |
|
||||
xField: 'time', |
|
||||
yField: 'value', |
|
||||
seriesField: 'category', |
|
||||
slider: { |
|
||||
start: 0.5, |
|
||||
end: 1, |
|
||||
}, |
|
||||
height: 700, |
|
||||
// smooth: true, |
|
||||
point: { |
|
||||
size: 2, |
|
||||
shape: 'circular', |
|
||||
style: { |
|
||||
fill: 'white', |
|
||||
lineWidth: 2, |
|
||||
}, |
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
bar.render(); |
|
||||
}; |
|
||||
|
|
||||
// 处理数据 |
|
||||
const changeDate = value => { |
|
||||
if (!value || !value.length) { |
|
||||
noData.value = true; |
|
||||
return; |
|
||||
} |
|
||||
noData.value = false; |
|
||||
|
|
||||
const arr = []; |
|
||||
value.forEach(element => { |
|
||||
const item = { ...element }; |
|
||||
|
|
||||
const so2Item = { category: 'SO2(ppb)' }; |
|
||||
const saltItem = { category: '盐分阻抗(Ω)' }; |
|
||||
const environmentTemperatureItem = { category: '环温(℃)' }; |
|
||||
const environmentHumidityItem = { category: '环湿(RH%)' }; |
|
||||
const corrosion1Item = { category: '锌腐蚀电流(nA)' }; |
|
||||
const corrosion2Item = { category: '铜腐蚀电流(nA)' }; |
|
||||
const corrosion3Item = { category: '铝腐蚀电流(nA)' }; |
|
||||
const corrosion4Item = { category: '钢腐蚀电流(nA)' }; |
|
||||
|
|
||||
so2Item.time = formatChartTime(item.time); |
|
||||
so2Item.value = item.so2; |
|
||||
arr.push(so2Item); |
|
||||
|
|
||||
saltItem.time = formatChartTime(item.time); |
|
||||
saltItem.value = item.salt; |
|
||||
arr.push(saltItem); |
|
||||
|
|
||||
environmentTemperatureItem.time = formatChartTime(item.time); |
|
||||
environmentTemperatureItem.value = item.environmentTemperature; |
|
||||
arr.push(environmentTemperatureItem); |
|
||||
|
|
||||
environmentHumidityItem.time = formatChartTime(item.time); |
|
||||
environmentHumidityItem.value = item.environmentHumidity; |
|
||||
arr.push(environmentHumidityItem); |
|
||||
|
|
||||
corrosion1Item.time = formatChartTime(item.time); |
|
||||
corrosion1Item.value = item.corrosion1; |
|
||||
arr.push(corrosion1Item); |
|
||||
|
|
||||
corrosion2Item.time = formatChartTime(item.time); |
|
||||
corrosion2Item.value = item.corrosion2; |
|
||||
arr.push(corrosion2Item); |
|
||||
|
|
||||
corrosion3Item.time = formatChartTime(item.time); |
|
||||
corrosion3Item.value = item.corrosion3; |
|
||||
arr.push(corrosion3Item); |
|
||||
|
|
||||
corrosion4Item.time = formatChartTime(item.time); |
|
||||
corrosion4Item.value = item.corrosion4; |
|
||||
arr.push(corrosion4Item); |
|
||||
}); |
|
||||
setDate(arr); |
|
||||
}; |
|
||||
|
|
||||
defineExpose({ changeDate }); |
|
||||
</script> |
|
||||
@ -1,65 +0,0 @@ |
|||||
<template> |
|
||||
<el-form :inline="true" :model="searchDevice" ref="searchDeviceForm"> |
|
||||
<el-form-item label="选择站点"> |
|
||||
<el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change"> |
|
||||
<el-option label="全部" value=""></el-option> |
|
||||
<el-option :label="item.address" :value="item.deviceId" v-for="item in devices" :key="item.deviceId"></el-option> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="选择日期"> |
|
||||
<el-date-picker |
|
||||
v-model="searchDevice.date" |
|
||||
type="monthrange" |
|
||||
range-separator="~" |
|
||||
start-placeholder="开始月份" |
|
||||
end-placeholder="结束月份" |
|
||||
> |
|
||||
</el-date-picker> |
|
||||
</el-form-item> |
|
||||
<el-form-item class="ml-6"> |
|
||||
<el-button type="primary" @click="onSubmit"><i class="el-icon-search mr-2"></i> 查询</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { reactive, ref, computed, defineEmits, watch } from 'vue'; |
|
||||
import { useStore } from 'vuex'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
|
|
||||
const emit = defineEmits(['search']); |
|
||||
const searchDevice = reactive({ deviceId: '', date: '' }); |
|
||||
const searchDeviceForm = ref(null); // form |
|
||||
const store = useStore(); |
|
||||
const devices = computed(() => store.state.device.devices); |
|
||||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id |
|
||||
|
|
||||
// 监听currentDeviceId |
|
||||
watch( |
|
||||
() => currentDeviceId.value, |
|
||||
newValue => { |
|
||||
if (newValue && searchDevice.deviceId !== newValue) { |
|
||||
searchDevice.deviceId = newValue; |
|
||||
} |
|
||||
}, |
|
||||
{ immediate: true }, |
|
||||
); |
|
||||
|
|
||||
const change = e => { |
|
||||
store.commit('device/setCurrentDeviceId', e); |
|
||||
}; |
|
||||
|
|
||||
const onSubmit = () => { |
|
||||
searchDeviceForm.value.validate(() => { |
|
||||
const { deviceId, date } = { ...searchDevice }; |
|
||||
if (date) { |
|
||||
const start = dayjs(date[0]).valueOf(); |
|
||||
const end = dayjs(date[1]).valueOf(); |
|
||||
const daterange = [start, end]; |
|
||||
emit('search', { deviceId, date: daterange }); |
|
||||
} else { |
|
||||
emit('search', { deviceId, date }); |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,152 +0,0 @@ |
|||||
<template> |
|
||||
<el-row :gutter="10"> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置金属腐蚀采样频率(分钟)：</span> |
|
||||
<span>{{ data.frequency.metal }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置温湿度采样频率(分钟)：</span> |
|
||||
<span>{{ data.frequency.th }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置SO2采样频率(分钟)：</span> |
|
||||
<span>{{ data.frequency.so2 }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置盐雾采样频率(分钟)：</span> |
|
||||
<span>{{ data.frequency.salt }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置时间：</span> |
|
||||
<span>{{ formatMsTime(data.time) }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置金属腐蚀采集个数：</span> |
|
||||
<span>{{ data.count }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置电池电压低阈值：</span> |
|
||||
<span>{{ data.batteryLow }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置电池电压高阈值：</span> |
|
||||
<span>{{ data.batteryHigh }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置太阳能电压高阈值：</span> |
|
||||
<span>{{ data.sunHigh }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置湿度高阈值：</span> |
|
||||
<span>{{ data.humidityHigh }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置温度低阈值：</span> |
|
||||
<span>{{ data.temperatureLow }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>设置温度高阈值：</span> |
|
||||
<span>{{ data.temperatureHigh }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>选择金属通道1类型：</span> |
|
||||
<span>{{ formatCorrosiveType(data.corrosiveType1) }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>选择金属通道2类型：</span> |
|
||||
<span>{{ formatCorrosiveType(data.corrosiveType2) }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>选择金属通道3类型：</span> |
|
||||
<span>{{ formatCorrosiveType(data.corrosiveType3) }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>选择金属通道4类型：</span> |
|
||||
<span>{{ formatCorrosiveType(data.corrosiveType4) }}</span> |
|
||||
</el-col> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" class="text-sm text-gray-500 py-3"> |
|
||||
<span>安全模式：</span> |
|
||||
<span>{{ formatMode(data.securityMode) }}</span> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
|
|
||||
<el-row> |
|
||||
<el-col :lg="8" :md="12" :xl="6" :xs="24" 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, defineEmits, defineProps, ref, watch } from 'vue'; |
|
||||
import { useStore } from 'vuex'; |
|
||||
import { getConfigAppliedFunction } from 'apis'; |
|
||||
import { formatMsTime } from 'utils/time'; |
|
||||
import { corrosiveTypes, functionConfig } 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 getConfigAppliedFunction(params); |
|
||||
data.value = resData || functionConfig; |
|
||||
if (resData && resData.status) { |
|
||||
emit('status', resData.status); |
|
||||
} else { |
|
||||
emit('status', ''); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
throw new Error(error); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
watch( |
|
||||
currentDeviceId, |
|
||||
newDeviceId => { |
|
||||
newDeviceId && props.activeName === 'applied' && onSearch(newDeviceId); |
|
||||
}, |
|
||||
{ immediate: true }, |
|
||||
); |
|
||||
|
|
||||
/** |
|
||||
* 转化安全模式 |
|
||||
* @param {string} mode OPEN->加密 |
|
||||
*/ |
|
||||
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 && target.type ? target.type : ''; |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,51 +0,0 @@ |
|||||
<template> |
|
||||
<el-card class="box-card"> |
|
||||
<div class="text-sm">积分电量(C)</div> |
|
||||
<el-empty description="暂无数据" v-if="noData"></el-empty> |
|
||||
<div id="container"></div> |
|
||||
</el-card> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { onMounted, ref, defineExpose } from 'vue'; |
|
||||
import { Column } from '@antv/g2plot'; |
|
||||
|
|
||||
const show = ref(false); |
|
||||
const noData = ref(true); |
|
||||
let bar = null; |
|
||||
|
|
||||
// 设置图表 |
|
||||
onMounted(() => { |
|
||||
show.value = true; |
|
||||
}); |
|
||||
|
|
||||
const setDate = data => { |
|
||||
noData.value = false; |
|
||||
if (bar) { |
|
||||
bar.destroy(); |
|
||||
} |
|
||||
bar = new Column('container', { |
|
||||
data, |
|
||||
layout: 'vertical', |
|
||||
xField: 'time', |
|
||||
yField: 'value', |
|
||||
padding: [30, 16, 60, 50], |
|
||||
columnWidthRatio: 0.6, // 宽度占比 |
|
||||
yAxis: { |
|
||||
title: { |
|
||||
text: '积分电量', |
|
||||
spacing: 20, |
|
||||
}, |
|
||||
}, |
|
||||
slider: { |
|
||||
start: 0.1, |
|
||||
end: 0.5, |
|
||||
}, |
|
||||
meta: { value: { alias: '积分电量(C)' } }, |
|
||||
}); |
|
||||
|
|
||||
bar.render(); |
|
||||
}; |
|
||||
|
|
||||
defineExpose({ setDate }); |
|
||||
</script> |
|
||||
@ -1,53 +0,0 @@ |
|||||
<template> |
|
||||
<el-card class="box-card"> |
|
||||
<div class="text-sm">月累计湿润时间（h）</div> |
|
||||
<el-empty description="暂无数据" v-if="noData"></el-empty> |
|
||||
<div id="moistTimeDataContainer"></div> |
|
||||
</el-card> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { onMounted, ref, defineExpose } from 'vue'; |
|
||||
import { Column } from '@antv/g2plot'; |
|
||||
|
|
||||
const show = ref(false); |
|
||||
const noData = ref(true); |
|
||||
let bar = null; |
|
||||
|
|
||||
// 设置图表 |
|
||||
onMounted(() => { |
|
||||
show.value = true; |
|
||||
}); |
|
||||
|
|
||||
const setDate = data => { |
|
||||
noData.value = false; |
|
||||
if (bar) { |
|
||||
bar.destroy(); |
|
||||
} |
|
||||
bar = new Column('moistTimeDataContainer', { |
|
||||
data, |
|
||||
layout: 'vertical', |
|
||||
xField: 'time', |
|
||||
yField: 'value', |
|
||||
// height: 200, |
|
||||
padding: [30, 16, 60, 50], |
|
||||
color: '#C280FF', |
|
||||
columnWidthRatio: 0.6, // 宽度占比 |
|
||||
yAxis: { |
|
||||
title: { |
|
||||
text: '月累计湿润时间', |
|
||||
spacing: 20, |
|
||||
}, |
|
||||
}, |
|
||||
slider: { |
|
||||
start: 0.1, |
|
||||
end: 0.5, |
|
||||
}, |
|
||||
meta: { value: { alias: '月累计湿润时间（h）' } }, |
|
||||
}); |
|
||||
|
|
||||
bar.render(); |
|
||||
}; |
|
||||
|
|
||||
defineExpose({ setDate }); |
|
||||
</script> |
|
||||
@ -1,99 +0,0 @@ |
|||||
<template> |
|
||||
<el-row :gutter="10"> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>上报IP地址1：</span> |
|
||||
<span>{{ appliedData.ip1 }}</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>{{ appliedData.port1 }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>上报IP地址2：</span> |
|
||||
<span>{{ appliedData.ip2 }}</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>{{ appliedData.port2 }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>上报IP地址3：</span> |
|
||||
<span>{{ appliedData.ip3 }}</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>{{ appliedData.port3 }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>上报IP地址4：</span> |
|
||||
<span>{{ appliedData.ip4 }}</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>{{ appliedData.port4 }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>备用ip地址：</span> |
|
||||
<span>{{ appliedData.ipBackup }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>备用端口号：</span> |
|
||||
<span>{{ appliedData.portBackup }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>用户名：</span> |
|
||||
<span>{{ appliedData.account }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>密码：</span> |
|
||||
<span>{{ appliedData.password }}</span> |
|
||||
</el-col> |
|
||||
<el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3"> |
|
||||
<span>APN：</span> |
|
||||
<span>{{ appliedData.apn }}</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 { networkConfig } from '@/config/config'; |
|
||||
|
|
||||
const store = useStore(); |
|
||||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); |
|
||||
const appliedData = ref(networkConfig); // 实际数据 |
|
||||
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); |
|
||||
appliedData.value = resData || networkConfig; |
|
||||
if (resData && resData.status) { |
|
||||
emit('status', resData.status); |
|
||||
} else { |
|
||||
emit('status', ''); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
throw new Error(error); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
watch( |
|
||||
currentDeviceId, |
|
||||
newDeviceId => { |
|
||||
newDeviceId && props.activeName === 'applied' && onSearch(newDeviceId); |
|
||||
}, |
|
||||
{ immediate: true }, |
|
||||
); |
|
||||
</script> |
|
||||
@ -1,125 +0,0 @@ |
|||||
<template> |
|
||||
<el-card class="box-card"> |
|
||||
<el-empty v-if="noData" description="暂无数据"></el-empty> |
|
||||
<div v-show="!noData" id="realtimeContainer"></div> |
|
||||
</el-card> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { defineExpose, onMounted, ref } from 'vue'; |
|
||||
import { Line } from '@antv/g2plot'; |
|
||||
import { formatChartTime } from 'utils/time'; |
|
||||
|
|
||||
const show = ref(false); |
|
||||
const noData = ref(true); |
|
||||
let bar = null; |
|
||||
|
|
||||
// 设置图表 |
|
||||
onMounted(() => { |
|
||||
show.value = true; |
|
||||
}); |
|
||||
|
|
||||
// 设置图表 |
|
||||
const setDate = data => { |
|
||||
if (bar) { |
|
||||
bar.changeData(data); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
bar = new Line('realtimeContainer', { |
|
||||
data, |
|
||||
padding: 'auto', |
|
||||
xField: 'time', |
|
||||
yField: 'value', |
|
||||
seriesField: 'category', |
|
||||
slider: { |
|
||||
start: 0.5, |
|
||||
end: 1, |
|
||||
}, |
|
||||
height: 700, |
|
||||
// smooth: true, |
|
||||
point: { |
|
||||
size: 2, |
|
||||
shape: 'circular', |
|
||||
style: { |
|
||||
fill: 'white', |
|
||||
lineWidth: 2, |
|
||||
}, |
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
// bar.on('slider:drag', function (event) { |
|
||||
// console.log('event: ', event); |
|
||||
// }); |
|
||||
|
|
||||
bar.render(); |
|
||||
}; |
|
||||
|
|
||||
// 处理数据 |
|
||||
const changeDate = value => { |
|
||||
if (!value || !value.length) { |
|
||||
noData.value = true; |
|
||||
return; |
|
||||
} |
|
||||
noData.value = false; |
|
||||
|
|
||||
const arr = []; |
|
||||
value.forEach(element => { |
|
||||
const item = { ...element }; |
|
||||
|
|
||||
const so2Item = { category: 'SO2' }; |
|
||||
const saltItem = { category: '盐分' }; |
|
||||
const environmentTemperatureItem = { category: '环温' }; |
|
||||
const environmentHumidityItem = { category: '环湿' }; |
|
||||
const deviceTemperatureItem = { category: '机温' }; |
|
||||
const deviceHumidityItem = { category: '机湿' }; |
|
||||
const corrosion1Item = { category: '腐流1' }; |
|
||||
const corrosion2Item = { category: '腐流2' }; |
|
||||
const corrosion3Item = { category: '腐流3' }; |
|
||||
const corrosion4Item = { category: '腐流4' }; |
|
||||
|
|
||||
so2Item.time = formatChartTime(item.time); |
|
||||
so2Item.value = item.so2; |
|
||||
arr.push(so2Item); |
|
||||
|
|
||||
saltItem.time = formatChartTime(item.time); |
|
||||
saltItem.value = item.salt; |
|
||||
arr.push(saltItem); |
|
||||
|
|
||||
environmentTemperatureItem.time = formatChartTime(item.time); |
|
||||
environmentTemperatureItem.value = item.environmentTemperature; |
|
||||
arr.push(environmentTemperatureItem); |
|
||||
|
|
||||
environmentHumidityItem.time = formatChartTime(item.time); |
|
||||
environmentHumidityItem.value = item.environmentHumidity; |
|
||||
arr.push(environmentHumidityItem); |
|
||||
|
|
||||
deviceTemperatureItem.time = formatChartTime(item.time); |
|
||||
deviceTemperatureItem.value = item.deviceTemperature; |
|
||||
arr.push(deviceTemperatureItem); |
|
||||
|
|
||||
deviceHumidityItem.time = formatChartTime(item.time); |
|
||||
deviceHumidityItem.value = item.deviceHumidity; |
|
||||
arr.push(deviceHumidityItem); |
|
||||
|
|
||||
corrosion1Item.time = formatChartTime(item.time); |
|
||||
corrosion1Item.value = item.corrosion1; |
|
||||
arr.push(corrosion1Item); |
|
||||
|
|
||||
corrosion2Item.time = formatChartTime(item.time); |
|
||||
corrosion2Item.value = item.corrosion2; |
|
||||
arr.push(corrosion2Item); |
|
||||
|
|
||||
corrosion3Item.time = formatChartTime(item.time); |
|
||||
corrosion3Item.value = item.corrosion3; |
|
||||
arr.push(corrosion3Item); |
|
||||
|
|
||||
corrosion4Item.time = formatChartTime(item.time); |
|
||||
corrosion4Item.value = item.corrosion4; |
|
||||
arr.push(corrosion4Item); |
|
||||
}); |
|
||||
setDate(arr); |
|
||||
}; |
|
||||
|
|
||||
defineExpose({ changeDate }); |
|
||||
</script> |
|
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<el-card class="box-card"> |
||||
|
<el-empty v-if="noData" description="暂无数据"></el-empty> |
||||
|
<div id="realtimeContainer"></div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { defineExpose, defineProps, onMounted, ref } from 'vue'; |
||||
|
import { generateChartOption } from 'utils/statistical'; |
||||
|
import * as echarts from 'echarts/core'; |
||||
|
import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components'; |
||||
|
import { LineChart } from 'echarts/charts'; |
||||
|
import { UniversalTransition } from 'echarts/features'; |
||||
|
import { CanvasRenderer } from 'echarts/renderers'; |
||||
|
|
||||
|
echarts.use([ |
||||
|
ToolboxComponent, |
||||
|
TooltipComponent, |
||||
|
GridComponent, |
||||
|
LegendComponent, |
||||
|
LineChart, |
||||
|
CanvasRenderer, |
||||
|
UniversalTransition, |
||||
|
DataZoomComponent, |
||||
|
]); |
||||
|
|
||||
|
const props = defineProps({ searchHeight: Number }); |
||||
|
|
||||
|
const show = ref(false); |
||||
|
const noData = ref(true); |
||||
|
let myChart = null; |
||||
|
|
||||
|
// 设置图表 |
||||
|
onMounted(() => { |
||||
|
show.value = true; |
||||
|
initChart(); |
||||
|
}); |
||||
|
|
||||
|
// 初始化chart |
||||
|
function initChart() { |
||||
|
const chartDom = document.getElementById('realtimeContainer'); |
||||
|
const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150; |
||||
|
console.log(canvasHeight, document.documentElement.clientHeight, props.searchHeight); |
||||
|
chartDom.style.height = `${canvasHeight}px`; |
||||
|
myChart && myChart.dispose(); |
||||
|
myChart = echarts.init(chartDom); |
||||
|
} |
||||
|
|
||||
|
function render(data) { |
||||
|
myChart && myChart.clear(); |
||||
|
if (!data || !data.length) { |
||||
|
noData.value = true; |
||||
|
return; |
||||
|
} |
||||
|
noData.value = false; |
||||
|
|
||||
|
if (!myChart) { |
||||
|
initChart(); |
||||
|
} |
||||
|
const option = generateChartOption(data); |
||||
|
option && myChart.setOption(option); |
||||
|
} |
||||
|
|
||||
|
defineExpose({ render }); |
||||
|
</script> |
||||
@ -1,52 +0,0 @@ |
|||||
<template> |
|
||||
<el-card class="box-card"> |
|
||||
<div class="text-sm">月累计腐蚀（g/m²）</div> |
|
||||
<el-empty description="暂无数据" v-if="noData"></el-empty> |
|
||||
<div id="corrosionContainer"></div> |
|
||||
</el-card> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { onMounted, ref, defineExpose } from 'vue'; |
|
||||
import { Column } from '@antv/g2plot'; |
|
||||
|
|
||||
const show = ref(false); |
|
||||
const noData = ref(true); |
|
||||
let bar = null; |
|
||||
|
|
||||
// 设置图表 |
|
||||
onMounted(() => { |
|
||||
show.value = true; |
|
||||
}); |
|
||||
|
|
||||
const setDate = data => { |
|
||||
noData.value = false; |
|
||||
if (bar) { |
|
||||
bar.destroy(); |
|
||||
} |
|
||||
bar = new Column('corrosionContainer', { |
|
||||
data, |
|
||||
layout: 'vertical', |
|
||||
xField: 'time', |
|
||||
yField: 'value', |
|
||||
padding: [30, 16, 60, 50], |
|
||||
color: '#70B603', |
|
||||
columnWidthRatio: 0.6, // 宽度占比 |
|
||||
yAxis: { |
|
||||
title: { |
|
||||
text: '月累计腐蚀', |
|
||||
spacing: 20, |
|
||||
}, |
|
||||
}, |
|
||||
slider: { |
|
||||
start: 0.1, |
|
||||
end: 0.5, |
|
||||
}, |
|
||||
meta: { value: { alias: '月累计腐蚀（g/m²）' } }, |
|
||||
}); |
|
||||
|
|
||||
bar.render(); |
|
||||
}; |
|
||||
|
|
||||
defineExpose({ setDate }); |
|
||||
</script> |
|
||||
@ -0,0 +1,221 @@ |
|||||
|
/* eslint-disable max-len,object-curly-newline */ |
||||
|
import dayjs from 'dayjs'; |
||||
|
|
||||
|
const colors = ['#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75', '#EE6666', '#5470C6', '#91CC75']; |
||||
|
|
||||
|
/** |
||||
|
* 生成chart所需参数 |
||||
|
* @param {Object[]} data 服务端返回数据 |
||||
|
* @param {string} data[].time 时间 ms |
||||
|
* @param {string} data[].so2 SO2 |
||||
|
* @param {string} data[].salt 盐阻 |
||||
|
* @param {string} data[].environmentTemperature 环温 |
||||
|
* @param {string} data[].environmentHumidity 环湿 |
||||
|
* @param {string} data[].corrosion1 锌 |
||||
|
* @param {string} data[].corrosion2 铜 |
||||
|
* @param {string} data[].corrosion3 铝 |
||||
|
* @param {string} data[].corrosion4 钢 |
||||
|
* @returns {{environmentTemperature: *[], corrosionXIN: *[], corrosionGANG: *[], salt: *[], corrosionTONG: *[], so2: *[], corrosionLV: *[], time: *[], environmentHumidity: *[]}} |
||||
|
*/ |
||||
|
function generateParams(data) { |
||||
|
const result = { |
||||
|
time: [], |
||||
|
so2: [], |
||||
|
salt: [], |
||||
|
environmentTemperature: [], |
||||
|
environmentHumidity: [], |
||||
|
corrosionXIN: [], |
||||
|
corrosionTONG: [], |
||||
|
corrosionLV: [], |
||||
|
corrosionGANG: [], |
||||
|
}; |
||||
|
data.forEach(item => { |
||||
|
result.time.push(dayjs(+item.time).format('YY/MM/MM HH:mm')); |
||||
|
result.so2.push(+item.so2); |
||||
|
result.salt.push(+item.salt); |
||||
|
result.environmentTemperature.push(+item.environmentTemperature); |
||||
|
result.environmentHumidity.push(+item.environmentHumidity); |
||||
|
result.corrosionXIN.push(+item.corrosion1); |
||||
|
result.corrosionTONG.push(+item.corrosion2); |
||||
|
result.corrosionLV.push(+item.corrosion3); |
||||
|
result.corrosionGANG.push(+item.corrosion4); |
||||
|
}); |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 生成chart参数 |
||||
|
* @param {Object[]} rawData 返回段返回的data数据 |
||||
|
* @returns {{yAxis: [{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},null,null,null], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: string[], grid: {right: string}, legend: {data: string[]}, series: [{data: *[], name: string, type: string},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},null,null,null], tooltip: {axisPointer: {type: string}, trigger: string}, toolbox: {feature: {saveAsImage: {show: boolean}, restore: {show: boolean}, dataView: {show: boolean, readOnly: boolean}}}}} |
||||
|
*/ |
||||
|
// eslint-disable-next-line import/prefer-default-export
|
||||
|
export function generateChartOption(rawData) { |
||||
|
const data = generateParams(rawData); |
||||
|
const option = { |
||||
|
color: colors, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { type: 'cross' }, |
||||
|
}, |
||||
|
grid: { |
||||
|
right: '30%', |
||||
|
left: '20%', |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['SO2(ppb)', '盐分阻抗(Ω)', '环温(℃)', '环湿(RH%)', '锌腐蚀电流(nA)', '铜腐蚀电流(nA)', '铝腐蚀电流(nA)', '钢腐蚀电流(nA)'], |
||||
|
}, |
||||
|
dataZoom: [{ type: 'inside' }, { type: 'slider' }], |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
axisTick: { alignWithLabel: true }, |
||||
|
data: data.time, |
||||
|
}, |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: 'SO2(ppb)', |
||||
|
position: 'left', |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[0] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}ppb' }, |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '盐分阻抗(Ω)', |
||||
|
// min: 0,
|
||||
|
// max: 250,
|
||||
|
position: 'left', |
||||
|
offset: 70, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[1] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}Ω' }, |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '环温(℃)', |
||||
|
// min: 0,
|
||||
|
// max: 25,
|
||||
|
position: 'left', |
||||
|
offset: 135, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[2] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}°C' }, |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '环湿(RH%)', |
||||
|
// min: 0,
|
||||
|
// max: 25,
|
||||
|
position: 'left', |
||||
|
offset: 200, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[3] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}RH%' }, |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '锌腐蚀电流(nA)', |
||||
|
position: 'right', |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[4] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}' }, |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '铜腐蚀电流(nA)', |
||||
|
offset: 100, |
||||
|
position: 'right', |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[5] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}' }, |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '铝腐蚀电流(nA)', |
||||
|
offset: 200, |
||||
|
position: 'right', |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[6] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}' }, |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '钢腐蚀电流(nA)', |
||||
|
offset: 300, |
||||
|
position: 'right', |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { color: colors[7] }, |
||||
|
}, |
||||
|
axisLabel: { formatter: '{value}' }, |
||||
|
}, |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'SO2(ppb)', |
||||
|
type: 'line', |
||||
|
data: data.so2, |
||||
|
}, |
||||
|
{ |
||||
|
name: '盐分阻抗(Ω)', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 1, |
||||
|
data: data.salt, |
||||
|
}, |
||||
|
{ |
||||
|
name: '环温(℃)', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 2, |
||||
|
data: data.environmentTemperature, |
||||
|
}, |
||||
|
{ |
||||
|
name: '环湿(RH%)', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 3, |
||||
|
data: data.environmentHumidity, |
||||
|
}, |
||||
|
{ |
||||
|
name: '锌腐蚀电流(nA)', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 4, |
||||
|
data: data.corrosionXIN, |
||||
|
}, |
||||
|
{ |
||||
|
name: '铜腐蚀电流(nA)', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 5, |
||||
|
data: data.corrosionTONG, |
||||
|
}, |
||||
|
{ |
||||
|
name: '铝腐蚀电流(nA)', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 6, |
||||
|
data: data.corrosionLV, |
||||
|
}, |
||||
|
{ |
||||
|
name: '钢腐蚀电流(nA)', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 7, |
||||
|
data: data.corrosionGANG, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
return option; |
||||
|
} |
||||
@ -1,68 +0,0 @@ |
|||||
<template> |
|
||||
<el-row :gutter="24" class="flex flex-column"> |
|
||||
<el-col :xs="24" :md="12" v-for="(list, index) in lists" :key="index"> |
|
||||
<el-card class="box-card mb-3"> |
|
||||
<div class="flex flex-column"> |
|
||||
<el-avatar icon="el-icon-user-solid" :size="46" :src="circleUrl"></el-avatar> |
|
||||
<div class="ml-4 flex-1 flex-col"> |
|
||||
<span class="font-bold"> |
|
||||
{{ list.name }} |
|
||||
</span> |
|
||||
<div class="flex flex-col mt-5 text-sm text-gray-400"> |
|
||||
<span class="mb-1">{{ list.operation }}</span> |
|
||||
<span>{{ list.time }}</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue'; |
|
||||
|
|
||||
const circleUrl = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'; |
|
||||
const lists = ref([ |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
{ |
|
||||
name: '管理员01', |
|
||||
operation: '管理员01', |
|
||||
time: '2021年10月19日', |
|
||||
}, |
|
||||
]); |
|
||||
</script> |
|
||||
@ -1,5 +0,0 @@ |
|||||
<template> |
|
||||
<div>通讯日志</div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup></script> |
|
||||
@ -1,28 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 设置站点选择 和 设备下发状态 --> |
|
||||
<DeviceSelectAndStatus :status="status" /> |
|
||||
|
|
||||
<el-tabs v-model="activeName"> |
|
||||
<el-tab-pane :lazy="true" label="下发参数" name="pending"> |
|
||||
<FunctionConfigPending v-if="activeName === 'pending'" :active-name="activeName" @status="setStatus" /> |
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane :lazy="true" label="设备参数" name="applied"> |
|
||||
<FunctionConfigApplied v-if="activeName === 'applied'" :active-name="activeName" @status="setStatus" /> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue'; |
|
||||
import DeviceSelectAndStatus from 'components/config/device-select-and-status.vue'; |
|
||||
import FunctionConfigPending from 'components/config/function-config-pending.vue'; |
|
||||
import FunctionConfigApplied from 'components/function-config-applied.vue'; |
|
||||
|
|
||||
const activeName = ref('pending'); |
|
||||
const status = ref('PENDING'); |
|
||||
|
|
||||
// 设置 设置状态 |
|
||||
function setStatus(event) { |
|
||||
status.value = event; |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,73 +0,0 @@ |
|||||
<template> |
|
||||
<DataSearchBar @search="onSearch" /> |
|
||||
<IntegralElectric ref="child1" class="mt-4" /> |
|
||||
<TotalCorrosion ref="child2" class="mt-4" /> |
|
||||
<MoistTime ref="child3" class="mt-4" /> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import DataSearchBar from 'components/data-search-bar.vue'; |
|
||||
import IntegralElectric from 'components/integral-electric.vue'; |
|
||||
import TotalCorrosion from 'components/total-corrosion.vue'; |
|
||||
import MoistTime from 'components/moist-time.vue'; |
|
||||
import { computed, ref } from 'vue'; |
|
||||
import { useStore } from 'vuex'; |
|
||||
|
|
||||
const child1 = ref(null); |
|
||||
const child2 = ref(null); |
|
||||
const child3 = ref(null); |
|
||||
|
|
||||
const search = ref({}); |
|
||||
const page = ref({ page: 2, size: 10 }); |
|
||||
let timer = null; |
|
||||
const store = useStore(); |
|
||||
const token = computed(() => store.getters['user/token']); |
|
||||
const electricData = computed(() => store.state.statistics.electricData); |
|
||||
const corrosionData = computed(() => store.state.statistics.corrosionData); |
|
||||
const moistTimeData = computed(() => store.state.statistics.moistTimeData); |
|
||||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id |
|
||||
|
|
||||
/** |
|
||||
* 获取月累计数据 |
|
||||
* @param {*} deviceId // 站点 设备id |
|
||||
* @param {*} date // 年月时间段 |
|
||||
* @param {*} sort // 1 -> 按时间正序 -1->按时间倒序 |
|
||||
*/ |
|
||||
const getDate = async () => { |
|
||||
try { |
|
||||
if (token && token.value) { |
|
||||
const options = { ...search.value }; |
|
||||
const date = options && options.date ? options.date : []; |
|
||||
const params = { |
|
||||
search: { deviceId: currentDeviceId.value, date }, |
|
||||
page: { page: page.value.page, size: page.value.size }, |
|
||||
}; |
|
||||
|
|
||||
await store.dispatch('statistics/getMonthsDate', params); |
|
||||
timer && clearTimeout(timer); |
|
||||
timer = null; |
|
||||
// 渲染图表 |
|
||||
child1.value.setDate(electricData.value); |
|
||||
child2.value.setDate(corrosionData.value); |
|
||||
child3.value.setDate(moistTimeData.value); |
|
||||
} else { |
|
||||
timer = setTimeout(() => { |
|
||||
getDate(); |
|
||||
}); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.log('error: ', error); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
getDate(); |
|
||||
|
|
||||
/** |
|
||||
* 监听search信息 |
|
||||
* @param {object} payload search组件emit的数据 |
|
||||
*/ |
|
||||
const onSearch = payload => { |
|
||||
search.value = { ...payload }; |
|
||||
getDate(); |
|
||||
}; |
|
||||
</script> |
|
||||
@ -1,28 +0,0 @@ |
|||||
<template> |
|
||||
<!-- 设置站点选择 和 设备下发状态 --> |
|
||||
<DeviceSelectAndStatus :status="status" /> |
|
||||
|
|
||||
<el-tabs v-model="activeName"> |
|
||||
<el-tab-pane :lazy="true" label="下发参数" name="pending"> |
|
||||
<NetworkConfigPending v-if="activeName === 'pending'" :active-name="activeName" @status="setStatus" /> |
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane :lazy="true" label="设备参数" name="applied"> |
|
||||
<NetworkConfigApplied v-if="activeName === 'applied'" :active-name="activeName" @status="setStatus" /> |
|
||||
</el-tab-pane> |
|
||||
</el-tabs> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { ref } from 'vue'; |
|
||||
import DeviceSelectAndStatus from 'components/config/device-select-and-status.vue'; |
|
||||
import NetworkConfigPending from 'components/config/network-config-pending.vue'; |
|
||||
import NetworkConfigApplied from 'components/network-config-applied.vue'; |
|
||||
|
|
||||
const activeName = ref('pending'); |
|
||||
const status = ref(''); |
|
||||
|
|
||||
// 设置 设置状态 |
|
||||
function setStatus(event) { |
|
||||
status.value = event; |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,69 +0,0 @@ |
|||||
<template> |
|
||||
<SearchBar @search="getData" @refresh="onRefresh" :show-refresh="true" /> |
|
||||
<RealtimeData ref="childRef" class="mt-4" /> |
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import SearchBar from 'components/search-bar.vue'; |
|
||||
import RealtimeData from 'components/realtime-data.vue'; |
|
||||
import { computed, ref, onUnmounted } from 'vue'; |
|
||||
import { useStore } from 'vuex'; |
|
||||
import dayjs from 'dayjs'; |
|
||||
import { REALTIME_DATA_INTERVAL } from '@/config/config'; |
|
||||
|
|
||||
const childRef = ref(null); |
|
||||
let timer = null; |
|
||||
let apiTimer = null; |
|
||||
const store = useStore(); |
|
||||
const token = computed(() => store.getters['user/token']); |
|
||||
const realtimeData = computed(() => store.state.statistics.realtimeData); |
|
||||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id |
|
||||
|
|
||||
/** |
|
||||
* 实时数据统计 |
|
||||
*/ |
|
||||
const getData = async () => { |
|
||||
try { |
|
||||
if (token && token.value) { |
|
||||
const start = +dayjs().startOf('day').format('x'); |
|
||||
const end = +dayjs().format('x'); |
|
||||
const params = { |
|
||||
deviceId: currentDeviceId.value, |
|
||||
date: [start, end], |
|
||||
type: 0, |
|
||||
}; |
|
||||
await store.dispatch('statistics/getRealtimeData', params); |
|
||||
timer && clearTimeout(timer); |
|
||||
timer = null; |
|
||||
childRef.value.changeDate(realtimeData.value.data); |
|
||||
|
|
||||
// 定时轮询请求新数据 |
|
||||
if (!apiTimer) { |
|
||||
apiTimer = setInterval(() => { |
|
||||
getData(); |
|
||||
}, REALTIME_DATA_INTERVAL); |
|
||||
} |
|
||||
} else { |
|
||||
timer = setTimeout(() => { |
|
||||
getData(); |
|
||||
}, 20); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
console.log('error: ', error); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
getData(); |
|
||||
|
|
||||
onUnmounted(() => { |
|
||||
apiTimer && clearInterval(apiTimer); |
|
||||
apiTimer = null; |
|
||||
}); |
|
||||
|
|
||||
// 手动刷新 清除定时器 重新获取数据 |
|
||||
function onRefresh() { |
|
||||
apiTimer && clearInterval(apiTimer); |
|
||||
apiTimer = null; |
|
||||
getData(); |
|
||||
} |
|
||||
</script> |
|
||||
Loading…
Reference in new issue