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