设备:量测初始化时间设置

This commit is contained in:
高云鹏 2024-12-02 11:09:08 +08:00
parent f2b50e5b80
commit e355c0a44a

View File

@ -41,12 +41,12 @@
</div> </div>
</div> </div>
<el-dialog v-model="lineChartVisible" title="历史曲线" @close="closeLineChart" :width="910"> <el-dialog v-model="lineChartVisible" title="历史曲线" @close="closeLineChart" :width="910">
<el-form :inline="true" :model="seachOptions" :rules="searchRules" ref="searchFormRef"> <el-form :inline="true" :model="searchOptions" :rules="searchRules" ref="searchFormRef">
<div class="searchPart"> <div class="searchPart">
<div> <div>
<el-form-item prop="datePickerValue" label="历史区间:"> <el-form-item prop="datePickerValue" label="历史区间:">
<el-date-picker <el-date-picker
v-model="seachOptions.datePickerValue" v-model="searchOptions.datePickerValue"
type="datetimerange" type="datetimerange"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
@ -60,7 +60,7 @@
</div> </div>
<div> <div>
<el-form-item prop="interval" label="时间间隔:"> <el-form-item prop="interval" label="时间间隔:">
<el-select v-model="seachOptions.interval" placeholder="请选择时间间隔" style="width: 100px"> <el-select v-model="searchOptions.interval" placeholder="请选择时间间隔" style="width: 100px">
<el-option label="原始" value="40s"></el-option> <el-option label="原始" value="40s"></el-option>
<el-option label="1分钟" value="1m"></el-option> <el-option label="1分钟" value="1m"></el-option>
<el-option label="5分钟" value="5m"></el-option> <el-option label="5分钟" value="5m"></el-option>
@ -267,26 +267,12 @@ const getcurrentPage = () => {
const openLineChart = (data: any) => { const openLineChart = (data: any) => {
lineChartVisible.value = true lineChartVisible.value = true
loading.value = false
searchInfo.attr = data.attributeCode searchInfo.attr = data.attributeCode
searchInfo.name = data.attributeName searchInfo.name = data.attributeName
searchInfo.unit = data.unit searchInfo.unit = data.unit
} }
watch(
() => props.show,
(newVal) => {
if (newVal) {
getCompleteData()
loading.value = false
} else {
autoUpdateTimer.value && clearInterval(autoUpdateTimer.value)
autoUpdateTimer.value = null
}
},
{
immediate: true,
}
)
const autoUpdateTimer: any = ref(null) const autoUpdateTimer: any = ref(null)
watch( watch(
() => props.autoUpdate, () => props.autoUpdate,
@ -343,18 +329,20 @@ const getChartData = () => {
if (valid) { if (valid) {
loading.value = true loading.value = true
getRealValueRangeReq({ getRealValueRangeReq({
startTime: dayjs(seachOptions.datePickerValue[0]).valueOf(), startTime: dayjs(searchOptions.datePickerValue[0]).valueOf(),
endTime: dayjs(seachOptions.datePickerValue[1]).valueOf(), endTime: dayjs(searchOptions.datePickerValue[1]).valueOf(),
devices: [ devices: [
{ {
deviceId: props.deviceId, deviceId: props.deviceId,
attributes: [searchInfo.attr], attributes: [searchInfo.attr],
}, },
], ],
interval: seachOptions.interval, interval: searchOptions.interval,
}).then((res) => { })
.then((res) => {
initChart(res.data?.[props.deviceId]?.[searchInfo.attr]) initChart(res.data?.[props.deviceId]?.[searchInfo.attr])
}).catch(()=>{ })
.catch(() => {
ElMessage.error('获取数据失败') ElMessage.error('获取数据失败')
loading.value = false loading.value = false
}) })
@ -364,8 +352,8 @@ const getChartData = () => {
const chartRef = ref() const chartRef = ref()
let chartInstance: any = null let chartInstance: any = null
const seachOptions = reactive({ const searchOptions = reactive<{ datePickerValue: Date[]; interval: string }>({
datePickerValue: [0, 0], datePickerValue: [],
interval: '5m', interval: '5m',
}) })
@ -485,7 +473,7 @@ const initChart = (data: { values: number[]; times: number[] }) => {
}, },
smooth: 0.6, smooth: 0.6,
symbol: 'none', symbol: 'none',
data: data?.values ?? [] data: data?.values ?? [],
}, },
], ],
} }
@ -504,6 +492,22 @@ watch(
getCompleteData() getCompleteData()
} }
) )
watch(
() => props.show,
(newVal) => {
if (newVal) {
getCompleteData()
searchOptions.datePickerValue = shortcuts[0].value()
} else {
autoUpdateTimer.value && clearInterval(autoUpdateTimer.value)
autoUpdateTimer.value = null
}
},
{
immediate: true,
}
)
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">