You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.4 KiB
114 lines
3.4 KiB
4 years ago
|
<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>
|