8 changed files with 212 additions and 109 deletions
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<template v-if="devicesAll && devicesAll.data"> |
|||
<el-table :data="devicesAll.data" :max-height="contentHeight" border stripe style="width: 100%"> |
|||
<el-table-column type="expand"> |
|||
<template #default="props"> |
|||
<el-row :gutter="20" class="px-6 text-gray-400"> |
|||
<el-col :span="9">链路地址：{{ props.row.linkAddress }}</el-col> |
|||
<el-col :span="9">探头编号：{{ props.row.probNo }}</el-col> |
|||
<el-col :span="9">设备朝向：{{ props.row.deviceDirection }}</el-col> |
|||
<el-col :span="9">试样：{{ props.row.simple }}</el-col> |
|||
<el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col> |
|||
<el-col :span="9">sim1：{{ props.row.sim1 }}</el-col> |
|||
<el-col :span="18">与主站后台联调情况：{{ props.row.joint }}</el-col> |
|||
<el-col :span="9">维修记录：{{ props.row.operationRecord }}</el-col> |
|||
<el-col :span="9">备注：{{ props.row.remark }}</el-col> |
|||
</el-row> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" /> |
|||
<el-table-column align="center" label="设备完整ID" min-width="150" prop="deviceFullId" /> |
|||
<el-table-column align="left" header-align="center" label="站点" min-width="150" prop="address" /> |
|||
<el-table-column align="left" header-align="center" label="地区" min-width="120" prop="area" /> |
|||
<el-table-column align="center" label="状态" min-width="70"> |
|||
<template #default="scope"> |
|||
<el-tag v-if="scope.row.status" :color="STATUS_COLOR[scope.row.status].color">{{ STATUS_COLOR[scope.row.status].text }} </el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="联系人" min-width="100" prop="contact" /> |
|||
<el-table-column align="center" label="联系电话" min-width="150" prop="phone" /> |
|||
<el-table-column align="center" label="安装时间" min-width="200" prop="installTime" /> |
|||
<el-table-column align="center" label="时间" min-width="200" prop="runTime" /> |
|||
</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> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, onMounted, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { STATUS_COLOR } from '@/config/config'; |
|||
|
|||
const store = useStore(); |
|||
const devicesAll = computed(() => { |
|||
return store.state.device.devicesAll; |
|||
}); |
|||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); |
|||
const contentHeight = ref(600); |
|||
|
|||
// 设置表格高度 |
|||
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,19 @@ |
|||
<template> |
|||
<el-row class="text-gray-500 text-sm my-2 flex items-center"> |
|||
<span class="mr-10"> |
|||
配置状态：<el-tag :type="PEND_TYPE[settingStatus].type">{{ PEND_TYPE[settingStatus].text }}</el-tag> |
|||
</span> |
|||
<span>最后配置时间：{{ dayjs(data.settingTime).format('YYYY-MM-DD HH:mm:ss') }}</span> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import dayjs from 'dayjs'; |
|||
import { defineProps } from 'vue'; |
|||
import { PEND_TYPE } from '@/config/config'; |
|||
|
|||
defineProps({ |
|||
settingStatus: String, |
|||
settingTime: Number, |
|||
}); |
|||
</script> |
|||
Loading…
Reference in new issue