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