15 changed files with 509 additions and 181 deletions
@ -0,0 +1,113 @@ |
|||||
|
<template> |
||||
|
<template v-if="devicesAll && devicesAll.data"> |
||||
|
<el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%"> |
||||
|
<el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" /> |
||||
|
<el-table-column align="center" label="开始时间" min-width="200"> |
||||
|
<template #default="scope"> |
||||
|
{{ dayjs(+scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="截止时间" min-width="200"> |
||||
|
<template #default="scope"> |
||||
|
{{ dayjs(+scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" header-align="center" label="下发状态" min-width="150"> |
||||
|
<template #default="scope"> |
||||
|
<StatusTagPending :type="scope.row.status" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" header-align="center" label="类型" min-width="150"> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="scope.row && scope.row.type && PENDING_TYPE[scope.row.type]">{{ PENDING_TYPE[scope.row.type].text }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-pagination |
||||
|
:current-page="devicesAll.page.page" |
||||
|
:default-page-size="50" |
||||
|
:page-count="devicesAll.page.count" |
||||
|
:page-size="devicesAll.page.size" |
||||
|
:page-sizes="[1, 10, 20, 50, 100]" |
||||
|
:total="devicesAll.page.total" |
||||
|
background |
||||
|
class="my-3 float-right" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
@size-change="onSizeChange" |
||||
|
@current-change="onCurrentPageChange" |
||||
|
></el-pagination> |
||||
|
</template> |
||||
|
|
||||
|
<!-- 编辑设备信息 --> |
||||
|
<DeviceEdit :show="editing" @toggle-mdoal="editing = false" /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed, onMounted, ref } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import dayjs from 'dayjs'; |
||||
|
import DeviceEdit from 'components/device/device-edit.vue'; |
||||
|
import StatusTagPending from 'components/config/status-tag-pending.vue'; |
||||
|
import { PENDING_TYPE } from '@/config/config'; |
||||
|
|
||||
|
let timer = null; |
||||
|
const store = useStore(); |
||||
|
const token = computed(() => store.getters['user/token']); |
||||
|
const devicesAll = computed(() => { |
||||
|
return store.state.device.devicesAll; |
||||
|
}); |
||||
|
const currentDeviceId = computed(() => store.state.device.currentDeviceId); |
||||
|
const contentHeight = ref(600); |
||||
|
const editing = ref(false); |
||||
|
|
||||
|
// 获取设备完整信息列表 |
||||
|
const getDevicesAllData = () => { |
||||
|
try { |
||||
|
if (token && token.value) { |
||||
|
store.dispatch('device/getDevicesAll'); |
||||
|
timer && clearTimeout(timer); |
||||
|
timer = null; |
||||
|
} else { |
||||
|
timer = setTimeout(() => { |
||||
|
getDevicesAllData(); |
||||
|
}); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw new Error(error); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
getDevicesAllData(); |
||||
|
|
||||
|
// 设置表格高度 |
||||
|
onMounted(() => { |
||||
|
const winHeight = document.documentElement.clientHeight; |
||||
|
contentHeight.value = winHeight - 250; |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
* 删除 |
||||
|
* @param {number} page 页码 |
||||
|
* @param {number} size 每页条数 |
||||
|
*/ |
||||
|
function onSearch(page, size = 50) { |
||||
|
const deviceId = currentDeviceId.value; |
||||
|
const params = { |
||||
|
deviceId, |
||||
|
page, |
||||
|
size, |
||||
|
}; |
||||
|
store.dispatch('device/getDevicesAll', params); |
||||
|
} |
||||
|
|
||||
|
// 当前页码变化 |
||||
|
const onCurrentPageChange = page => { |
||||
|
onSearch(page, devicesAll.value.page.size || 50); |
||||
|
}; |
||||
|
|
||||
|
// 每页条数变化 |
||||
|
const onSizeChange = size => { |
||||
|
onSearch(1, size); |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,35 @@ |
|||||
|
<template> |
||||
|
<SearchHistoryLog @search="onSearch" /> |
||||
|
|
||||
|
<TableHistoryLog /> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { computed } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { getSendHistory } from 'apis'; |
||||
|
import SearchHistoryLog from 'components/history/search-history-log.vue'; |
||||
|
import TableHistoryLog from 'components/history/history-log-table.vue'; |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id |
||||
|
async function getData() { |
||||
|
try { |
||||
|
const params = { |
||||
|
deviceId: currentDeviceId.value, |
||||
|
status: 'DATA', |
||||
|
type: 'EVENT', |
||||
|
}; |
||||
|
const resData = await getSendHistory(params); |
||||
|
console.log(resData); |
||||
|
} catch (error) { |
||||
|
console.error(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
getData(); |
||||
|
|
||||
|
function onSearch(event) { |
||||
|
console.log(event); |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,77 @@ |
|||||
|
<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}-${item.deviceId}`" |
||||
|
:value="item.deviceId" |
||||
|
></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="类型"> |
||||
|
<el-select v-model="searchDevice.type" placeholder="选择查询类型"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="事件上报" value="EVENT"></el-option> |
||||
|
<el-option label="业务上报" value="DATA"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="状态"> |
||||
|
<el-select v-model="searchDevice.status" placeholder="选择查询类型"> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="待下发" value="PENDING"></el-option> |
||||
|
<el-option label="下发成功" value="SUCCESS"></el-option> |
||||
|
<el-option label="下发失败" value="FAIL"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<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 { computed, defineEmits, reactive, ref, watch } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
|
||||
|
const emit = defineEmits(['search']); |
||||
|
const searchDevice = reactive({ |
||||
|
deviceId: '', |
||||
|
type: '', |
||||
|
status: '', |
||||
|
}); |
||||
|
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(() => { |
||||
|
emit('search', { ...searchDevice }); |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
Loading…
Reference in new issue