18 changed files with 343 additions and 65 deletions
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<el-form ref="searchDeviceForm" :inline="true" :model="searchDevice"> |
|||
<el-form-item label="选择站点："> |
|||
<el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change"> |
|||
<!-- <el-option label="全部" value></el-option> --> |
|||
<el-option v-for="item in devices" :key="item.deviceId" :label="item.address" :value="item.deviceId"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="showTypeSelect" label="类型："> |
|||
<el-select v-model="searchDevice.dataType" placeholder="选择查询类型"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option label="事件上报" value="ReportHistoryEvent"></el-option> |
|||
<el-option label="业务上报" value="ReportHistoryData"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="起始时间："> |
|||
<el-date-picker v-model="searchDevice.date[0]" format="YYYY-MM-DD HH:mm" placeholder="起始时间" type="datetime"></el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="截止时间："> |
|||
<el-date-picker v-model="searchDevice.date[1]" format="YYYY-MM-DD HH:mm" placeholder="截止时间" type="datetime"></el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button :loading="loadingSearch" type="primary" @click="onSubmit"> |
|||
<i class="el-icon-search mr-2"></i> |
|||
查询 |
|||
</el-button> |
|||
</el-form-item> |
|||
|
|||
<el-form-item v-if="showExport"> |
|||
<el-button :loading="loadingExport" type="success" @click="onExport"> |
|||
<i class="el-icon-download mr-2"></i> |
|||
导出 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, defineEmits, defineProps, reactive, ref, watch } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import dayjs from 'dayjs'; |
|||
import { exportHistory } from 'apis'; |
|||
|
|||
const emit = defineEmits(['search']); |
|||
const searchDevice = reactive({ |
|||
deviceId: '', |
|||
date: ['', new Date()], |
|||
dataType: 'ReportHistoryData', |
|||
}); |
|||
const searchDeviceForm = ref(null); // form |
|||
const store = useStore(); |
|||
const devices = computed(() => store.state.device.devices); |
|||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id |
|||
const loadingExport = ref(false); |
|||
|
|||
defineProps({ |
|||
showExport: Boolean, |
|||
showTypeSelect: Boolean, |
|||
loadingSearch: Boolean, |
|||
}); |
|||
|
|||
// 监听currentDeviceId |
|||
watch( |
|||
() => currentDeviceId.value, |
|||
newValue => { |
|||
if (newValue) { |
|||
searchDevice.deviceId !== newValue && (searchDevice.deviceId = newValue); |
|||
} |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
|
|||
const change = e => { |
|||
store.commit('device/setCurrentDeviceId', e); |
|||
}; |
|||
|
|||
// 生成查询参数 |
|||
function generateParams() { |
|||
const { deviceId, date, dataType } = searchDevice; |
|||
let params = { |
|||
deviceId, |
|||
date, |
|||
dataType, |
|||
}; |
|||
|
|||
if (date) { |
|||
const start = +dayjs(date[0]).format('x'); |
|||
const end = +dayjs(date[1]).format('x'); |
|||
const daterange = [start, end]; |
|||
params = { |
|||
deviceId, |
|||
date: daterange, |
|||
dataType, |
|||
}; |
|||
} |
|||
|
|||
return params; |
|||
} |
|||
|
|||
// 提交 |
|||
const onSubmit = () => { |
|||
searchDeviceForm.value.validate(valid => { |
|||
if (valid) { |
|||
const params = generateParams(); |
|||
emit('search', params); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 导出 |
|||
async function onExport() { |
|||
try { |
|||
loadingExport.value = true; |
|||
const params = generateParams(); |
|||
const resData = await exportHistory(params); |
|||
loadingExport.value = false; |
|||
resData && (window.location.href = resData); |
|||
} catch (error) { |
|||
loadingExport.value = false; |
|||
throw new Error(error); |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,18 @@ |
|||
<template> |
|||
<el-tabs v-model="activeName"> |
|||
<el-tab-pane :lazy="true" label="本地数据" name="local"> |
|||
<Local v-if="activeName === 'local'" :active-name="activeName" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane :lazy="true" label="设备数据" name="device"> |
|||
<Device v-if="activeName === 'device'" :active-name="activeName" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
import Local from 'components/history/data-history.vue'; |
|||
import Device from 'components/history/data-report.vue'; |
|||
|
|||
const activeName = ref('local'); |
|||
</script> |
|||
Loading…
Reference in new issue