560 lines
15 KiB
Vue
560 lines
15 KiB
Vue
<template>
|
||
<!--暂降 -->
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
draggable
|
||
v-model="machineVisible"
|
||
title="暂降事件"
|
||
width="1000px"
|
||
>
|
||
<div class="tableBox">
|
||
<el-form
|
||
:inline="true"
|
||
style="display: flex; justify-content: space-between"
|
||
>
|
||
<el-form-item label="关键字筛选">
|
||
<el-input
|
||
clearable
|
||
style="width: 150px"
|
||
v-model="searchValue"
|
||
size="small"
|
||
placeholder="电站、测点、用户信息"
|
||
></el-input>
|
||
<el-popover placement="bottom" :width="550" trigger="click">
|
||
<template #reference>
|
||
<el-button
|
||
size="small"
|
||
:icon="DArrowRight"
|
||
type="primary"
|
||
style="margin-left: 10px"
|
||
>更多</el-button
|
||
>
|
||
</template>
|
||
|
||
<el-form label-width="auto">
|
||
<!-- <el-form-item label="关键字筛选">
|
||
<el-input
|
||
clearable
|
||
style="width: 150px"
|
||
v-model="searchValue"
|
||
size="small"
|
||
placeholder="电站、测点、用户信息"
|
||
></el-input>
|
||
</el-form-item> -->
|
||
<el-form-item label="运维单位">
|
||
<el-tree-select
|
||
v-model="deptsIndex"
|
||
:teleported="false"
|
||
:data="deptsList"
|
||
:render-after-expand="false"
|
||
clearable
|
||
size="small"
|
||
style="width: 150px"
|
||
:props="{
|
||
value: 'id',
|
||
label: 'name',
|
||
children: 'children',
|
||
}"
|
||
/>
|
||
<!-- <el-select
|
||
v-model="deptsIndex"
|
||
placeholder="请选择运维单位"
|
||
clearable
|
||
size="small"
|
||
:teleported="false"
|
||
style="width: 150px"
|
||
>
|
||
<el-option
|
||
v-for="item in deptsList"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
:key="item.id"
|
||
></el-option>
|
||
</el-select> -->
|
||
</el-form-item>
|
||
<el-form-item label="触发类型">
|
||
<el-select
|
||
clearable
|
||
size="small"
|
||
:teleported="false"
|
||
v-model="eventForm.eventType"
|
||
placeholder="请选择触发类型"
|
||
style="width: 150px"
|
||
>
|
||
<el-option
|
||
v-for="item in eventTypeList"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
:key="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="残余电压百分比">
|
||
<el-input-number
|
||
v-model="eventForm.eventValueMin"
|
||
:min="0"
|
||
style="width: 150px"
|
||
size="small"
|
||
:max="100"
|
||
:precision="2"
|
||
:step="0.1"
|
||
@change="
|
||
(e) => (e == null ? (eventForm.eventValueMin = 1) : null)
|
||
"
|
||
><template #suffix>
|
||
<span>%</span>
|
||
</template></el-input-number
|
||
>
|
||
<span> < 残余电压 < </span>
|
||
|
||
<el-input-number
|
||
v-model="eventForm.eventValueMax"
|
||
:min="0"
|
||
style="width: 150px"
|
||
size="small"
|
||
:max="100"
|
||
:precision="2"
|
||
:step="0.1"
|
||
@change="
|
||
(e) => (e == null ? (eventForm.eventValueMax = 1) : null)
|
||
"
|
||
><template #suffix>
|
||
<span>%</span>
|
||
</template></el-input-number
|
||
>
|
||
</el-form-item>
|
||
<el-form-item label="暂降持续事时间">
|
||
<el-input-number
|
||
v-model="eventForm.eventDurationMin"
|
||
:min="0"
|
||
style="width: 150px"
|
||
size="small"
|
||
:max="1000000"
|
||
:precision="2"
|
||
:step="0.1"
|
||
@change="
|
||
(e) => (e == null ? (eventForm.eventDurationMin = 1) : null)
|
||
"
|
||
><template #suffix>
|
||
<span>s</span>
|
||
</template></el-input-number
|
||
>
|
||
<span> < 持续时间 < </span>
|
||
|
||
<el-input-number
|
||
v-model="eventForm.eventDurationMax"
|
||
:min="0"
|
||
style="width: 150px"
|
||
size="small"
|
||
:max="1000000"
|
||
:precision="2"
|
||
:step="0.1"
|
||
@change="
|
||
(e) => (e == null ? (eventForm.eventDurationMax = 1) : null)
|
||
"
|
||
><template #suffix>
|
||
<span>s</span>
|
||
</template></el-input-number
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-popover>
|
||
</el-form-item>
|
||
|
||
<el-form-item style="margin-right: -10px">
|
||
<el-button size="small" :icon="Search" type="primary" @click="init()"
|
||
>查询</el-button
|
||
>
|
||
<el-button size="small" :icon="RefreshLeft" @click="clearInit()"
|
||
>重置</el-button
|
||
>
|
||
<el-button
|
||
type="primary"
|
||
:icon="Download"
|
||
@click="exportTable"
|
||
size="small"
|
||
style="margin-right: 10px"
|
||
>导出
|
||
</el-button>
|
||
<el-button
|
||
style="margin-right: 10px"
|
||
v-if="displayValue == 1"
|
||
size="small"
|
||
:icon="HelpFilled"
|
||
type="primary"
|
||
@click="handleAggregation"
|
||
>溯源</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- <div style="float: right; margin-bottom: 9px" v-if="displayValue == 1">
|
||
<el-button
|
||
size="small"
|
||
:icon="HelpFilled"
|
||
type="primary"
|
||
@click="handleAggregation"
|
||
>聚合</el-button
|
||
>
|
||
</div> -->
|
||
<el-table
|
||
:scrollbar-always-on="true"
|
||
:data="tableData"
|
||
height="443px"
|
||
size="small"
|
||
v-loading="loading"
|
||
element-loading-background="#343849c7"
|
||
:header-cell-style="{ textAlign: 'center' }"
|
||
border
|
||
>
|
||
<!-- <el-table-column type="index" align="center" label="序号" width="70" /> -->
|
||
<el-table-column label="序号" align="center" type="index" width="70">
|
||
<template #default="scope">
|
||
<span>{{
|
||
(form.pageNum - 1) * form.pageSize + scope.$index + 1
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="startTime"
|
||
align="center"
|
||
label="发生时间"
|
||
show-overflow-tooltip
|
||
width="160"
|
||
/>
|
||
<el-table-column
|
||
prop="stationName"
|
||
align="center"
|
||
label="变电站"
|
||
width="120"
|
||
/>
|
||
<el-table-column
|
||
prop="lineName"
|
||
align="center"
|
||
label="监测点"
|
||
width="120"
|
||
/>
|
||
<el-table-column
|
||
prop="objName"
|
||
label="用户"
|
||
align="center"
|
||
show-overflow-tooltip
|
||
>
|
||
<template v-slot="scope">
|
||
<span>{{ scope.row.objName ? scope.row.objName : "/" }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="eventType"
|
||
align="center"
|
||
label="触发类型"
|
||
width="90"
|
||
/>
|
||
<el-table-column
|
||
prop="featureAmplitude"
|
||
align="center"
|
||
label="残余电压(%)"
|
||
width="90"
|
||
>
|
||
<template v-slot="scope">
|
||
<span>{{ (scope.row.featureAmplitude * 100).toFixed(2) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="duration"
|
||
align="center"
|
||
label="持续时间(s)"
|
||
width="90"
|
||
/>
|
||
<el-table-column fixed="right" label="操作" width="80" align="center">
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
type="primary"
|
||
size="small"
|
||
@click.stop="trendCharts(scope.row)"
|
||
>波形</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-pagination
|
||
size="small"
|
||
style="margin-top: 10px"
|
||
:currentPage="form.pageNum"
|
||
:page-size="form.pageSize"
|
||
:page-sizes="[10, 20, 50, 100, 200]"
|
||
background
|
||
:layout="'sizes,total, ->, prev, pager, next, jumper'"
|
||
:total="total"
|
||
@size-change="onTableSizeChange"
|
||
@current-change="onTableCurrentChange"
|
||
></el-pagination>
|
||
</el-dialog>
|
||
<!-- 波形图 -->
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
draggable
|
||
v-model="trendVisible"
|
||
v-if="trendVisible"
|
||
title="波形"
|
||
width="70%"
|
||
@close="handleCloseTrend"
|
||
>
|
||
<waveForm ref="waveFormRef" />
|
||
</el-dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, inject, onMounted, watch } from "vue";
|
||
import {
|
||
getEventList,
|
||
processEvents,
|
||
loginDeptTree,
|
||
getDicDataByTypeCode,
|
||
} from "@/api/manage_wx";
|
||
import { HelpFilled } from "@element-plus/icons-vue";
|
||
import waveForm from "@/components/BX/waveForm.vue";
|
||
import {
|
||
DArrowRight,
|
||
Search,
|
||
RefreshLeft,
|
||
Download,
|
||
} from "@element-plus/icons-vue";
|
||
import * as XLSX from "xlsx";
|
||
import { ElMessage , ElMessageBox} from "element-plus";
|
||
// 定义 emit
|
||
const emit = defineEmits(["aggregation-success"]);
|
||
|
||
const machineVisible = ref(false);
|
||
const form = reactive({
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
});
|
||
const total = ref(0); // 假设总条数为100
|
||
const loading = ref(false);
|
||
const tableData = ref([]);
|
||
import { useStore } from "vuex";
|
||
|
||
const store = useStore();
|
||
|
||
const displayValue = ref();
|
||
|
||
const trendVisible = ref(false);
|
||
|
||
const waveFormRef = ref();
|
||
|
||
const open = async (val) => {
|
||
displayValue.value = val;
|
||
machineVisible.value = true;
|
||
await init();
|
||
};
|
||
|
||
// 查询
|
||
const searchValue = ref("");
|
||
const deptsIndex = ref("");
|
||
const deptsList = ref([]); //部门列表
|
||
const eventTypeList = ref([]); //触发类型
|
||
const eventForm: any = reactive({
|
||
eventValueMin: null,
|
||
eventValueMax: null,
|
||
eventDurationMin: null,
|
||
eventDurationMax: null,
|
||
eventType: null,
|
||
});
|
||
|
||
const clearInit = async () => {
|
||
searchValue.value = "";
|
||
eventForm.eventValueMin = null;
|
||
eventForm.eventValueMax = null;
|
||
eventForm.eventDurationMin = null;
|
||
eventForm.eventDurationMax = null;
|
||
eventForm.eventType = null;
|
||
deptsIndex.value = null;
|
||
|
||
await init();
|
||
};
|
||
|
||
// 部门
|
||
const initDept = () => {
|
||
loginDeptTree({
|
||
deptIndex: store.state.deptId,
|
||
}).then((res: any) => {
|
||
deptsList.value = res.data;
|
||
});
|
||
};
|
||
|
||
// 触发类型
|
||
const dicDataByTypeCode = () => {
|
||
getDicDataByTypeCode({
|
||
dictTypeCode: "Event_Statis",
|
||
}).then((res: any) => {
|
||
eventTypeList.value = res.data;
|
||
});
|
||
};
|
||
|
||
const init = async () => {
|
||
loading.value = true;
|
||
getEventList({
|
||
deptId: store.state.deptId,
|
||
searchBeginTime: store.state.timeValue[0],
|
||
searchEndTime: store.state.timeValue[1],
|
||
pageNum: form.pageNum,
|
||
pageSize: form.pageSize,
|
||
searchValue: searchValue.value,
|
||
...eventForm,
|
||
eventValueMin:
|
||
eventForm.eventValueMin == null ? null : eventForm.eventValueMin / 100,
|
||
eventValueMax:
|
||
eventForm.eventValueMax == null ? null : eventForm.eventValueMax / 100,
|
||
}).then((res) => {
|
||
tableData.value = res.data.records;
|
||
total.value = res.data.total;
|
||
loading.value = false;
|
||
});
|
||
};
|
||
|
||
const handleAggregation = (row: any) => {
|
||
machineVisible.value = false;
|
||
ElMessageBox.confirm(
|
||
`是否确认对当前用户部门${store.state.timeValue[0]}至${store.state.timeValue[1]}之间的暂降事件进行溯源?`,
|
||
"提示",
|
||
{
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}
|
||
)
|
||
.then(() => {
|
||
processEvents({
|
||
deptId: store.state.deptId,
|
||
searchBeginTime: store.state.timeValue[0],
|
||
searchEndTime: store.state.timeValue[1],
|
||
}).then((res: any) => {
|
||
if (res.code == "A0000") {
|
||
ElMessage({
|
||
type: "success",
|
||
message: res.message,
|
||
});
|
||
// 通知父组件执行 initialAggregation
|
||
emit("aggregation-success");
|
||
} else {
|
||
ElMessage({
|
||
type: "warning",
|
||
message: res.message,
|
||
});
|
||
}
|
||
});
|
||
})
|
||
.catch((error) => {});
|
||
};
|
||
|
||
//点击波形图
|
||
const trendCharts = (row: any) => {
|
||
row.eventdetail_index = row.eventId;
|
||
machineVisible.value = false;
|
||
trendVisible.value = true;
|
||
setTimeout(() => {
|
||
waveFormRef.value?.open({
|
||
...row,
|
||
bdname: row.stationName,
|
||
pointname: row.lineName,
|
||
timeid: row.startTime,
|
||
eventvalue: row.featureAmplitude,
|
||
persisttime: row.duration,
|
||
});
|
||
}, 500);
|
||
};
|
||
|
||
// 关闭波形图
|
||
const handleCloseTrend = () => {
|
||
trendVisible.value = false;
|
||
machineVisible.value = true;
|
||
};
|
||
|
||
const onTableSizeChange = (size: number) => {
|
||
form.pageSize = size;
|
||
init();
|
||
};
|
||
const onTableCurrentChange = (page: number) => {
|
||
form.pageNum = page;
|
||
init();
|
||
};
|
||
|
||
// 暂降溯源导出
|
||
const exportTable = async () => {
|
||
let columnExpor: any = [
|
||
[
|
||
"发生时间",
|
||
"变电站",
|
||
"监测点",
|
||
"用户",
|
||
"触发类型",
|
||
"残余电压(%)",
|
||
"持续时间(s)",
|
||
],
|
||
];
|
||
|
||
let list = [];
|
||
|
||
await getEventList({
|
||
deptId: store.state.deptId,
|
||
searchBeginTime: store.state.timeValue[0],
|
||
searchEndTime: store.state.timeValue[1],
|
||
searchValue: searchValue.value,
|
||
...eventForm,
|
||
eventValueMin:
|
||
eventForm.eventValueMin == null ? null : eventForm.eventValueMin / 100,
|
||
eventValueMax:
|
||
eventForm.eventValueMax == null ? null : eventForm.eventValueMax / 100,
|
||
pageNum: 1,
|
||
pageSize: total.value,
|
||
}).then((res) => {
|
||
let data = res.data.records.map((item) => {
|
||
return [
|
||
item.startTime,
|
||
item.stationName,
|
||
item.lineName,
|
||
item.objName,
|
||
item.eventType,
|
||
(item.featureAmplitude * 100).toFixed(2),
|
||
item.duration,
|
||
];
|
||
});
|
||
list = [...columnExpor, ...data];
|
||
// 创建工作表
|
||
const worksheet = XLSX.utils.aoa_to_sheet(list);
|
||
|
||
worksheet["!cols"] = list.map((col) => ({ wch: 20 }));
|
||
|
||
// 创建工作簿
|
||
const workbook = XLSX.utils.book_new();
|
||
XLSX.utils.book_append_sheet(workbook, worksheet, "暂降事件");
|
||
|
||
// 写出文件
|
||
XLSX.writeFile(workbook, "暂降事件" + ".xlsx");
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
initDept();
|
||
dicDataByTypeCode();
|
||
});
|
||
defineExpose({ open });
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@use "@/assets/scss/index.scss";
|
||
.tableBox {
|
||
padding: 0px !important;
|
||
}
|
||
.formBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
.formLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
}
|
||
</style>
|