<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
title="历史记录"
|
width="800px"
|
:before-close="handleClose"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<el-form style="display: flex;align-items: center">
|
<el-form-item>
|
<el-date-picker
|
v-model="state.dateRange"
|
value-format="YYYY-MM-DD"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
style="width: 300px"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="状态：" style="margin-left: 20px" >
|
<el-select
|
v-model="state.queryParams.filter.deviceWarning"
|
placeholder="请选择"
|
style="width: 80%"
|
>
|
<el-option
|
v-for="item in state.statusList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item >
|
<el-button
|
type="primary"
|
@click="getList"
|
>查询</el-button>
|
<el-button
|
type="primary"
|
plain
|
@click="reset"
|
>重置</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table v-loading="loading" :data="state.tableList" :border="true">
|
<el-table-column label="序号" type="index" align="center" width="80" />
|
<el-table-column label="探测器" prop="deviceName" align="center" />
|
<el-table-column label="浓度值" prop="realValue" align="center" >
|
<template #default="scope">
|
<div>{{scope.row.realValue}}<span v-if="state.type == '温度'">℃</span><span v-else>%RH</span></div>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" prop="deviceWarning" align="center" >
|
<template #default="scope">
|
<span v-if="scope.row.deviceWarning == 0" style="color: #42b983">正常</span>
|
<span v-else style="color: #ed5565">报警</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="属性" align="center" >
|
<template #default="scope">
|
<span>{{state.type}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="时间" prop="createDate" align="center" width="120" />
|
|
</el-table>
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
v-model:page="queryParams.pageIndex"
|
v-model:limit="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs} from "vue";
|
import {getHumidity, getTemperature} from "@/api/company/warehouse";
|
|
const dialogVisible = ref(false);
|
const emit = defineEmits(["getList"]);
|
const loading = ref(false)
|
const state = reactive({
|
type: '',
|
tableList: [],
|
total: 0,
|
queryParams: {
|
pageIndex: 1,
|
pageSize: 10,
|
filter: {
|
deviceId: null,
|
deviceWarning: '',
|
createDateStart: '',
|
createDateEnd: ''
|
}
|
},
|
statusList: [
|
{
|
id: 0,
|
name: '正常'
|
},
|
{
|
id: 1,
|
name: '报警'
|
},
|
|
],
|
dateRange:[]
|
|
})
|
const { queryParams, total } = toRefs(state);
|
const openDialog = async (type,value) => {
|
state.type = type
|
state.queryParams.filter.deviceId = value.deviceId
|
await getList()
|
dialogVisible.value = true;
|
}
|
const getList = async () => {
|
loading.value = true
|
state.queryParams.filter.createDateStart = state.dateRange[0]
|
state.queryParams.filter.createDateEnd = state.dateRange[1]
|
if(state.type == '湿度'){
|
const res = await getHumidity(state.queryParams)
|
if(res.code == 200){
|
state.tableList = res.result.records
|
state.total = res.result.total
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false
|
}else {
|
const res = await getTemperature(state.queryParams)
|
if(res.code == 200){
|
state.tableList = res.result.records
|
state.total = res.result.total
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false
|
}
|
|
}
|
function reset() {
|
state.queryParams = {
|
pageIndex: 1,
|
pageSize: 10,
|
filter: {
|
deviceId: state.queryParams.filter.deviceId,
|
deviceWarning: '',
|
createDateStart: '',
|
createDateEnd: ''
|
}
|
}
|
state.dateRange = []
|
getList()
|
}
|
const handleClose = () => {
|
dialogVisible.value = false;
|
emit("getList")
|
}
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
</style>
|
