<template>
|
<div class="page">
|
<div class="page-container">
|
<div class="page-container-left">
|
<LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
|
</div>
|
<div class="page-container-right">
|
<div class="form-card">
|
<el-form :model="form" ref="queryRef" :inline="true" label-width="85px">
|
<el-form-item prop="eierarchyFlag">
|
<el-radio-group v-model="form.eierarchyFlag">
|
<el-radio label="B" name="eierarchyFlag">本级</el-radio>
|
<el-radio label="ALL" name="eierarchyFlag">包含下级</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="时间选择">
|
<el-date-picker v-model="form.dataTime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss" placeholder="时间" style="width: 370px" unlink-panels
|
time-format="HH:mm:ss" />
|
</el-form-item>
|
<el-form-item label="报警类别" prop="indexType">
|
<el-select v-model="form.indexType" placeholder="请选择报警类别" style="width: 200px">
|
<el-option v-for="dict in alarm_record_category" :key="dict.value" :label="dict.label"
|
:value="dict.value" />
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="能源类型" prop="energyType">
|
<el-select v-model="form.energyType" placeholder="请选择能源类型">
|
<el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList"
|
:key="item.enersno" />
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="指标名称" prop="indexName">
|
<el-input v-model="form.indexName" placeholder="请输入指标名称" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<BaseCard :title="currentNode ? currentNode.label + '--节点配置' : '暂无节点配置'
|
">
|
<div class="table-box">
|
<el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)">
|
<el-table-column type="index" label="序号" width="70" />
|
<el-table-column label="用能单元" prop="modelName" align="center" show-overflow-tooltip />
|
<el-table-column label="指标名称" prop="indexName" align="center" show-overflow-tooltip />
|
<el-table-column label="报警类别" prop="indexType" align="center" show-overflow-tooltip :formatter="(row, column) =>
|
proxy.selectDictLabel(alarm_record_category, row.indexType)
|
" />
|
<el-table-column label="能源类型" prop="energyId" align="center" show-overflow-tooltip :formatter="(row, column) => formatterLabel(energyTypeList, row.energyId)
|
" />
|
<el-table-column label="预设值" prop="energyType" align="center" show-overflow-tooltip />
|
<el-table-column label="报警值" prop="alarmValue" align="center" show-overflow-tooltip />
|
<el-table-column label="报警时间" prop="alarmBeginTime" align="center" show-overflow-tooltip />
|
</el-table>
|
</div>
|
</BaseCard>
|
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
v-model:limit="queryParams.pageSize" @pagination="getList(currentNode)" />
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup name="alarmRecord">
|
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
|
const { proxy } = getCurrentInstance();
|
let { alarm_record_category } = proxy.useDict("alarm_record_category");
|
import { historicalAlarm } from "@/api/alarmManage/alarmManage";
|
let form = ref({
|
eierarchyFlag: "B",
|
dataTime: [
|
proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
|
proxy.dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
|
],
|
nodeId: "",
|
indexType: "",
|
// energyType: '',
|
indexName: "",
|
});
|
const energyTypeList = ref();
|
function getEnergyTypeList() {
|
listEnergyTypeList().then((res) => {
|
energyTypeList.value = res.data;
|
form.value.indexType = alarm_record_category.value[0].value;
|
// form.value.energyType = energyTypeList.value[0].enersno
|
getList();
|
});
|
}
|
// getEnergyTypeList()
|
let currentNode = ref();
|
function handleNodeClick(data) {
|
currentNode.value = data;
|
getEnergyTypeList();
|
}
|
|
let tableData = ref([]);
|
let total = ref(0);
|
let loading = ref(false);
|
let queryParams = ref({
|
pageNum: 1,
|
pageSize: 10,
|
});
|
|
function formatterLabel(list, value) {
|
let dict = list.find((item) => item.enersno == value);
|
return dict ? dict.enername : "";
|
}
|
|
function getList() {
|
form.value.nodeId = currentNode.value.id;
|
loading.value = true;
|
historicalAlarm({
|
...form.value,
|
...queryParams.value,
|
beginTime: form.value.dataTime[0],
|
endTime: form.value.dataTime[1],
|
}).then((response) => {
|
console.log(11, response);
|
if (response.code === 200) {
|
tableData.value = response.rows;
|
total.value = response.total;
|
loading.value = false;
|
} else {
|
proxy.$modal.msgError(response.msg);
|
}
|
});
|
}
|
|
function handleQuery() {
|
queryParams.value.pageNum = 1;
|
getList();
|
}
|
function resetQuery() {
|
form.value = {
|
eierarchyFlag: 'B',
|
dataTime: [proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"), proxy.dayjs(new Date()).format("YYYY-MM-DD 23:59:59")],
|
nodeId: '',
|
indexType: alarm_record_category.value[0].value,
|
// energyType: '',
|
indexName: '',
|
}
|
queryParams.value = {
|
pageNum: 1,
|
pageSize: 10,
|
};
|
getList();
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/styles/page.scss";
|
|
.page-box {
|
height: calc(100vh - 145px);
|
|
.tree-box {
|
height: calc(100% - 70px);
|
overflow-y: auto !important;
|
}
|
|
.select-box {
|
display: flex;
|
align-items: center;
|
|
::v-deep(.el-icon) {
|
color: #fff;
|
margin: 0 10px 0 15px;
|
font-size: 20px;
|
// &:hover{
|
// color: #3371EB;
|
// }
|
}
|
}
|
|
.node-opt {
|
flex: 1;
|
text-align: right;
|
margin-right: 5px;
|
|
::v-deep(.el-icon) {
|
color: #fff;
|
margin-right: 5px;
|
}
|
}
|
}
|
|
.table-box {
|
height: calc(100vh - 464px);
|
}
|
</style>
|
