15 changed files with 536 additions and 84 deletions
@ -0,0 +1,18 @@ |
|||
const path = require('path'); |
|||
|
|||
const resolve = dir => path.join(__dirname, dir); |
|||
|
|||
module.exports = { |
|||
resolve: { |
|||
alias: { |
|||
'~': __dirname, |
|||
'@': resolve('src'), |
|||
views: resolve('src/views'), |
|||
components: resolve('src/components'), |
|||
assets: resolve('src/assets'), |
|||
utils: resolve('src/utils'), |
|||
store: resolve('src/store'), |
|||
apis: resolve('src/apis'), |
|||
}, |
|||
}, |
|||
}; |
|||
@ -0,0 +1,4 @@ |
|||
### 查询设备列表 |
|||
GET https://test.tall.wiki/gateway/corrosion/devices/all?deviceId=&size=50 |
|||
Accept: application/json |
|||
|
|||
@ -0,0 +1,68 @@ |
|||
<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 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="PENDING" value="PENDING"></el-option> |
|||
<el-option label="SUCCESS" value="SUCCESS"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="onSubmit">查询</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> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<SearchCommands @search="onSearch" /> |
|||
<template v-if="data"> |
|||
<el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%"> |
|||
<el-table-column align="center" fixed label="设备ID" min-width="140" prop="deviceId" /> |
|||
<el-table-column align="center" label="类型" min-width="100"> |
|||
<template #default="scope"> |
|||
{{ computeType(scope.row.type) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="状态" min-width="100"> |
|||
<template #default="scope"> |
|||
<el-tag :type="computeStatus(scope.row.status)">{{ scope.row.status }}</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="起始时间" min-width="200"> |
|||
<template #default="scope"> |
|||
{{ formatDate(+scope.row.startTime) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="截止时间" min-width="200"> |
|||
<template #default="scope"> |
|||
{{ formatDate(+scope.row.endTime) }} |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import SearchCommands from 'components/search-commands.vue'; |
|||
import { getCommansStatus } from 'apis'; |
|||
import { onMounted, ref } from 'vue'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const data = ref([]); |
|||
let contentHeight = 600; |
|||
|
|||
// 设置表格高度 |
|||
onMounted(() => { |
|||
const winHeight = document.documentElement.clientHeight; |
|||
contentHeight = winHeight - 150; |
|||
}); |
|||
|
|||
/** |
|||
* 查询 |
|||
* @param {object} options |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async function onSearch(options) { |
|||
try { |
|||
data.value = await getCommansStatus(options); |
|||
} catch (error) { |
|||
ElMessage.error('查询失败'); |
|||
throw new Error(error); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 计算状态 |
|||
* @param {string} status |
|||
* @returns {string} |
|||
*/ |
|||
function computeStatus(status) { |
|||
let statusStyle = 'success'; |
|||
switch (status) { |
|||
case 'PENDING': |
|||
statusStyle = 'primary'; |
|||
break; |
|||
case 'FAIL': |
|||
statusStyle = 'danger'; |
|||
break; |
|||
case 'SUCCESS': |
|||
statusStyle = 'success'; |
|||
break; |
|||
default: |
|||
statusStyle = 'primary'; |
|||
break; |
|||
} |
|||
return statusStyle; |
|||
} |
|||
|
|||
/** |
|||
* 转换类型 |
|||
* @param {string} type |
|||
* @returns {string} |
|||
*/ |
|||
function computeType(type) { |
|||
return type === 'DATA' ? '业务' : '事件'; |
|||
} |
|||
|
|||
/** |
|||
* 格式化时间为日期格式 |
|||
* @param {number} time |
|||
* @returns {string} |
|||
*/ |
|||
function formatDate(time) { |
|||
try { |
|||
return dayjs(time).format('YYYY-MM-DD'); |
|||
} catch (error) { |
|||
return ''; |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,145 @@ |
|||
<script setup> |
|||
import { computed, onMounted, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import SearchBar from 'components/search-bar-data.vue'; |
|||
import { getDatas } from 'apis/index'; |
|||
import { ElMessage } from 'element-plus'; |
|||
|
|||
const search = ref({}); |
|||
const page = ref({ |
|||
page: 1, |
|||
size: 50, |
|||
}); |
|||
let timer = null; |
|||
const store = useStore(); |
|||
const token = computed(() => store.getters['user/token']); |
|||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id |
|||
let contentHeight = 600; |
|||
const data = ref(null); |
|||
|
|||
// 获取设备完整信息列表 |
|||
const getData = async () => { |
|||
try { |
|||
if (token && token.value) { |
|||
if (!currentDeviceId.value) { |
|||
return ElMessage.error('请选择站点'); |
|||
} |
|||
|
|||
const options = { ...search.value }; |
|||
const date = options && options.date ? options.date : []; |
|||
if (!date || date.length !== 2) { |
|||
return ElMessage.error('请选择时间 '); |
|||
} |
|||
const params = { |
|||
deviceId: currentDeviceId.value, |
|||
date, |
|||
page: page.value.age, |
|||
size: page.value.size, |
|||
type: 1, |
|||
}; |
|||
const resData = await getDatas(params); |
|||
data.value = resData.data; |
|||
page.value = resData.page; |
|||
timer && clearTimeout(timer); |
|||
timer = null; |
|||
} else { |
|||
timer = setTimeout(() => { |
|||
getData(); |
|||
}, 20); |
|||
} |
|||
} catch (error) { |
|||
ElMessage.error(error.message || '获取数据失败'); |
|||
console.log('error: ', error); |
|||
} |
|||
}; |
|||
|
|||
// getData(); |
|||
|
|||
// 设置表格高度 |
|||
onMounted(() => { |
|||
const winHeight = document.documentElement.clientHeight; |
|||
contentHeight = winHeight - 150; |
|||
}); |
|||
|
|||
/** |
|||
* 监听sear h信息 |
|||
* @param {object} payload search组件emi 的数据 |
|||
*/ |
|||
const onSearch = payload => { |
|||
search.value = { ...payload }; |
|||
getData(); |
|||
}; |
|||
/** |
|||
* 当前 码变化 |
|||
* 更新page 重新 取数据 |
|||
* @param {number} e 的页码 |
|||
*/ |
|||
const onCurrentPageChange = e => { |
|||
page.value.page = e; |
|||
getData(); |
|||
}; |
|||
|
|||
const onSizeChange = e => { |
|||
page.value.size = e; |
|||
getData(); |
|||
}; |
|||
|
|||
// 下一页 |
|||
const onNext = e => { |
|||
page.value.page = e + 1; |
|||
getData(); |
|||
}; |
|||
|
|||
// 上一页 |
|||
const onPrev = e => { |
|||
page.value.page = e - 1; |
|||
getData(); |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<SearchBar :show-export="true" @search="onSearch" /> |
|||
|
|||
<template v-if="data"> |
|||
<el-table :data="data" :style="{ 'max-height': contentHeight + 'px' }" border stripe style="width: 100%"> |
|||
<el-table-column align="center" fixed label="设备编号" min-width="140" prop="deviceNo" /> |
|||
<el-table-column align="center" label="ICCID" min-width="100" prop="iccid" /> |
|||
<el-table-column align="center" label="IMEI" min-width="80" prop="imei" /> |
|||
<el-table-column align="center" label="信号强度" min-width="80" prop="signal" /> |
|||
<el-table-column align="center" label="基站编号" min-width="80" prop="stationNo" /> |
|||
<el-table-column align="center" label="硬件版本" min-width="80" prop="hardwareVersion" /> |
|||
<el-table-column align="center" label="软件版本" min-width="80" prop="softwareVersion" /> |
|||
<el-table-column align="center" label="太阳能电压" min-width="94" prop="solarVoltage" /> |
|||
<el-table-column align="center" label="蓄电池电压" min-width="94" prop="batteryVoltage" /> |
|||
<el-table-column align="center" label="电压百分比" min-width="94" prop="batteryVoltagePercentage" /> |
|||
<el-table-column align="center" label="剩余电量" min-width="94" prop="batteryVoltageRemain" /> |
|||
<el-table-column align="center" label="电池损耗量" min-width="94" prop="batteryLoss" /> |
|||
<el-table-column align="center" label="机箱温度" min-width="80" prop="deviceTemperature" /> |
|||
<el-table-column align="center" label="机箱湿度" min-width="80" prop="deviceHumidity" /> |
|||
<el-table-column align="center" label="环境温度" min-width="80" prop="environmentTemperature" /> |
|||
<el-table-column align="center" label="环境湿度" min-width="80" prop="environmentHumidity" /> |
|||
<el-table-column align="center" label="SO2" min-width="50" prop="so2" /> |
|||
<el-table-column align="center" label="盐分" min-width="50" prop="salt" /> |
|||
<el-table-column align="center" label="腐流1" min-width="60" prop="corrosion1" /> |
|||
<el-table-column align="center" label="腐流2" min-width="60" prop="corrosion2" /> |
|||
<el-table-column align="center" label="腐流3" min-width="60" prop="corrosion3" /> |
|||
<el-table-column align="center" label="腐流4" min-width="60" prop="corrosion4" /> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
:current-page="page.page" |
|||
:default-page-size="50" |
|||
:page-count="page.count" |
|||
:page-size="page.size" |
|||
:page-sizes="[1, 10, 20, 50, 100]" |
|||
:total="page.total" |
|||
background |
|||
class="my-3 float-right" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@current-change="onCurrentPageChange" |
|||
@size-change="onSizeChange" |
|||
@prev-click="onPrev" |
|||
@next-click="onNext" |
|||
></el-pagination> |
|||
</template> |
|||
</template> |
|||
Loading…
Reference in new issue