This commit is contained in:
gcw_MV9p2JJN 2025-09-04 17:13:33 +08:00
parent 06211b312d
commit ad15cfa8cd

View File

@ -2,13 +2,21 @@
<div class="page">
<div class="page-container">
<div class="page-container-left">
<LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" ParentModelCode="YSCJMX" />
<LeftTree
ref="leftTreeRef"
@handleNodeClick="handleNodeClick"
ParentModelCode="YSCJMX"
/>
</div>
<div class="page-container-right">
<div class="form-card">
<el-form :model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="能源类型" prop="energyType">
<el-select v-model="queryParams.energyType" placeholder="能源类型" @change="handleQuery">
<el-select
v-model="queryParams.energyType"
placeholder="能源类型"
@change="handleQuery"
>
<el-option
:label="item.enername"
:value="item.enersno"
@ -18,20 +26,38 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"> 搜索 </el-button>
<el-button type="primary" icon="Search" @click="handleQuery">
搜索
</el-button>
<el-button icon="Refresh" @click="resetQuery"> 重置 </el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Refresh" @click="handleQuery" circle />
<el-button
type="primary"
icon="Refresh"
@click="handleQuery"
circle
/>
</el-form-item>
</el-form>
</div>
<div
style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto"
style="
height: calc(100vh - 220px) !important;
max-height: calc(100vh - 220px) !important;
overflow-y: auto;
"
v-loading="loading"
>
<div v-for="(item, index) in energyRealTimeMonitorList" :key="index" v-show="!!item.deviceArray">
<BaseCard :title="queryParams.nodeName + '-' + item.energyTypeName" v-if="item.deviceArray.length > 0">
<div
v-for="(item, index) in energyRealTimeMonitorList"
:key="index"
v-show="!!item.deviceArray"
>
<BaseCard
:title="queryParams.nodeName + '-' + item.energyTypeName"
v-if="item.deviceArray.length > 0"
>
<el-scrollbar>
<div class="scrollbar-flex-content">
<p></p>
@ -41,7 +67,8 @@
v-for="(item1, index1) in item.deviceArray"
:key="index1"
:style="{
backgroundColor: index1 == item.activeIndex ? '#5EC894' : '#9841FC',
backgroundColor:
index1 == item.activeIndex ? '#5EC894' : '#9841FC',
}"
>
{{ item1.deviceName }}
@ -80,16 +107,26 @@
<div class="card-box-ul">
<div
class="card-box-li"
v-for="(item2, index2) in item.deviceArray[item.activeIndex].energyIndexArray"
v-for="(item2, index2) in item.deviceArray[item.activeIndex]
.energyIndexArray"
>
<el-tooltip class="box-item" effect="dark" content="查看历史数据" placement="top">
<el-tooltip
class="box-item"
effect="dark"
content="查看历史数据"
placement="top"
>
<dl @click="handleChartModal(item2)">
<dd class="title">
{{ item2.name }}
<template v-if="!!item2.unit"> ({{ item2.unit }}) </template>
<template v-if="!!item2.unit">
({{ item2.unit }})
</template>
</dd>
<dd class="num">
{{ item2.value != null ? item2.value.toFixed(2) : "--" }}
{{
item2.value != null ? item2.value.toFixed(2) : "--"
}}
</dd>
<dd class="time">
<el-icon>
@ -112,22 +149,22 @@
</div>
</template>
<script setup name="energy-real-time-monitor">
import chartModal from "./components/chart-modal.vue"
import { listEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor"
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
import chartModal from "./components/chart-modal.vue";
import { listEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor";
import { listEnergyTypeList } from "@/api/modelConfiguration/energyType";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
watch(
() => settingsStore.sideTheme,
(val) => {
getList()
getList();
}
)
const energyTypeList = ref(undefined)
let energyRealTimeMonitorList = ref([])
const loading = ref(false)
);
const energyTypeList = ref(undefined);
let energyRealTimeMonitorList = ref([]);
const loading = ref(false);
const data = reactive({
queryParams: {
nodeId: null,
@ -135,57 +172,565 @@ const data = reactive({
energyType: null,
},
query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
});
const { queryParams, query } = toRefs(data);
/** 节点单击事件 */
function handleNodeClick(data) {
queryParams.value.nodeId = data.id
queryParams.value.nodeName = data.label
queryParams.value.nodeId = data.id;
queryParams.value.nodeName = data.label;
listEnergyTypeList().then((res) => {
energyTypeList.value = res.data
queryParams.value.energyType = energyTypeList.value[0].enersno
handleQuery()
})
energyTypeList.value = res.data;
queryParams.value.energyType = energyTypeList.value[0].enersno;
handleQuery();
});
}
function handleClick(item, index) {
item.activeIndex = index
item.activeIndex = index;
}
// --
function getList() {
loading.value = true
loading.value = true;
listEnergyRealTimeMonitor(
proxy.addDateRange({
...queryParams.value,
...query.value,
})
).then((res) => {
res = {
msg: "操作成功",
code: 200,
data: [
{
energyTypeName: "竟成水表",
deviceArray: [],
},
{
energyTypeName: "电表",
deviceArray: [
{
deviceName: "上海干巷涂装车间高压配电室九中1#变",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222180009660_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222180009660_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222180009660_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222180009660_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222180009660_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222180009660_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间低压配电室1#变",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222210015358_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222210015358_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222210015358_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222210015358_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222210015358_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222210015358_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间低压配电室1#泵",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222210015356_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222210015356_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222210015356_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222210015356_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222210015356_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222210015356_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间低压配电室6#泵",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222210015359_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222210015359_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222210015359_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222210015359_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222210015359_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222210015359_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间高压配电室一中2#变",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222180009640_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222180009640_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222180009640_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222180009640_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222180009640_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222180009640_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间高压配电室一中1#变",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222180009659_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222180009659_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222180009659_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222180009659_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222180009659_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222180009659_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间高压配电室2#进线",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222180009642_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222180009642_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222180009642_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222180009642_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222180009642_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222180009642_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间高压配电室备用AH2",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222180009639_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222180009639_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222180009639_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222180009639_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222180009639_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222180009639_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
{
name: "AB线电压",
indexCode: "222180009639_VoltageUAB",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
{
name: "BC线电压",
indexCode: "222180009639_VoltageUBC",
unit: "伏特",
value: 367.2,
dataTime: "2025-09-04 16:36:18",
},
],
},
{
deviceName: "上海干巷涂装车间高压配电室九中2#变",
energyTypeName: "电表",
wireDiameter: null,
maxAllowablePower: null,
energyIndexArray: [
{
name: "A相电流",
indexCode: "222180009641_CurrentA",
unit: "安培",
value: 98.23,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电流",
indexCode: "222180009641_CurrentB",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电流",
indexCode: "222180009641_CurrentC",
unit: "安培",
value: 69.83,
dataTime: "2025-09-04 16:36:18",
},
{
name: "A相电压",
indexCode: "222180009641_VoltageA",
unit: "伏特",
value: 220.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "B相电压",
indexCode: "222180009641_VoltageB",
unit: "伏特",
value: 230.0,
dataTime: "2025-09-04 16:36:18",
},
{
name: "C相电压",
indexCode: "222180009641_VoltageC",
unit: "伏特",
value: 209.33,
dataTime: "2025-09-04 16:36:18",
},
],
},
],
},
{
energyTypeName: "水表",
deviceArray: [],
},
{
energyTypeName: "变频器",
deviceArray: [],
},
{
energyTypeName: "温湿度表",
deviceArray: [],
},
{
energyTypeName: "压力表",
deviceArray: [],
},
{
energyTypeName: "蒸汽表",
deviceArray: [],
},
{
energyTypeName: "氮气表",
deviceArray: [],
},
{
energyTypeName: "天然气表",
deviceArray: [],
},
],
};
if (!!res.code && res.code == 200) {
res.data.map((item) => {
item.activeIndex = 0
})
loading.value = false
energyRealTimeMonitorList.value = res.data
item.activeIndex = 0;
});
loading.value = false;
energyRealTimeMonitorList.value = res.data;
}
})
});
}
// --
function handleQuery() {
energyRealTimeMonitorList.value = []
getList()
energyRealTimeMonitorList.value = [];
getList();
}
// --
function resetQuery() {
proxy.resetForm("queryRef")
queryParams.value.energyType = null
energyRealTimeMonitorList.value = []
handleQuery()
proxy.resetForm("queryRef");
queryParams.value.energyType = null;
energyRealTimeMonitorList.value = [];
handleQuery();
}
let chartRef = ref()
let chartRef = ref();
function handleChartModal(row) {
if (chartRef.value) {
row.nodeName = queryParams.value.nodeName
chartRef.value.handleOpen(row)
row.nodeName = queryParams.value.nodeName;
chartRef.value.handleOpen(row);
}
}
</script>
@ -207,7 +752,7 @@ function handleChartModal(row) {
text-align: left;
font-weight: bold;
font-family: OPPOSans, OPPOSans;
font-size: 14px;
font-style: normal;
text-transform: none;
@ -233,7 +778,7 @@ function handleChartModal(row) {
.title {
color: rgba(255, 255, 255, 0.8);
font-family: OPPOSans, OPPOSans;
font-size: 14px;
line-height: 19px;
text-align: left;