forked from TALL/tall3-pc-keti
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