lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

蒸汽锅炉、热水锅炉数据绑定

meizhou
25604 4 weeks ago
parent
ab72f8510c
commit
12d0be108b
4 changed files with 373 additions and 475 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/api/boiler/hotwaterBoiler.js
  2. 10
      src/api/boiler/steamBoiler.js
  3. 596
      src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue
  4. 230
      src/views/boilerSys/hotWaterBoiler/hotWaterBoilerDetails.vue

10
src/api/boiler/hotwaterBoiler.js
Unescape View File

@ -0,0 +1,10 @@
import request from "@/utils/request";
// 热水锅炉设备参数列表
export function hotWaterBoiler(query) {
return request({
url: "/device/hotWaterBoiler/list",
method: "get",
params: query,
});
}

10
src/api/boiler/steamBoiler.js
Unescape View File

@ -0,0 +1,10 @@
import request from "@/utils/request";
// 蒸汽锅炉设备参数列表
export function steamBoilerBoiler(query) {
return request({
url: "/device/steamBoiler/list",
method: "get",
params: query,
});
}

596
src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue
Unescape View File

@ -56,49 +56,54 @@
<!-- 其他文字定位 --> <!-- 其他文字定位 -->
<div class="status-div"> <div class="status-div">
<div>当前工作状态</div> <div>当前工作状态</div>
<div class="status-text">工作</div> <div class="status-text">
{{ getStatusText(getStatusValue('DB611658')) }}
</div>
</div> </div>
<div class="fire-div"> <div class="fire-div">
<div>火焰强度</div> <div>火焰强度</div>
<div class="fire-text">1205</div> <div class="fire-text">
{{ getStatusValue('DB611724') }}
</div>
</div> </div>
<div class="other-div"> <div class="other-div">
<div class="other-li"> <div class="other-li">
<div>压力</div> <div>当前压力</div>
<div class="mpa">0.992Mpa</div> <div class="mpa">{{ getStatusValue('DB611500') }}Mpa</div>
</div> </div>
<div class="other-li"> <div class="other-li">
<div>设定</div> <div>设定压力</div>
<div class="mpa">0.70Mpa</div> <div class="mpa">{{ getStatusValue('DBW611598') }}Mpa</div>
</div> </div>
<div class="other-li"> <div class="other-li">
<div>启动</div> <div>启动压差</div>
<div class="mpa">0.69Mpa</div> <div class="mpa">{{ getStatusValue('DBW611600') }}Mpa</div>
</div> </div>
<div class="other-li"> <div class="other-li">
<div>停止</div> <div>停止压差</div>
<div class="mpa">0.83Mpa</div> <div class="mpa">{{ getStatusValue('DBW611602') }}Mpa</div>
</div> </div>
</div> </div>
<div></div> <div></div>
<div class="air">空气</div> <div class="air">空气</div>
<div class="gas">燃气</div> <div class="gas">燃气</div>
<div class="flue-div"> <div class="flue-div">
<div class="flue-text">52.8℃</div> <div class="flue-text">{{ getStatusValue('DB611496') }}℃</div>
<div>烟气</div> <div>烟气</div>
</div> </div>
<!-- 锅炉上方百分比 --> <!-- 锅炉上方百分比 -->
<div class="orange">43%</div> <div class="orange"></div>
<!-- 火焰 --> <!-- 火焰 -->
<img <img
src="../../../assets/images/boilerWork.gif" src="../../../assets/images/boilerWork.gif"
class="boilerWork" class="boilerWork"
:style="{ display: getStatusValue('DB611724') > 0 ? 'block' : 'none' }"
alt="" alt=""
/> />
<!-- 锅炉侧边水位 --> <!-- 锅炉侧边水位 -->
<div class="level">56.6%</div> <div class="level">{{ getStatusValue('DB611736') }}%</div>
<div class="waterlevel"> <div class="waterlevel">
<div class="progress" :style="{ height: 56.6 + '%' }"></div> <div class="progress" :style="{ height: (getStatusValue('DB611736') || 0) + '%' }"></div>
</div> </div>
<div class="mainValve">主阀</div> <div class="mainValve">主阀</div>
<img <img
@ -113,20 +118,22 @@
alt="" alt=""
/> />
<div class="fan-div"> <div class="fan-div">
<div class="fan-text">3360rpm</div> <div class="fan-text">{{ getStatusValue('DB611514') }}rpm</div>
<div>风机</div> <div>风机</div>
</div> </div>
<img <img
class="blade1 move" class="blade1"
:class="{ move: getStatusValue('DB611514') > 0 }"
src="../../../assets/images/blade2.png" src="../../../assets/images/blade2.png"
alt="" alt=""
/> />
<div class="waterPump-div"> <div class="waterPump-div">
<div>水泵</div> <div>水泵</div>
<div class="pump-text">手动加水停</div> <!-- <div class="pump-text">手动加水停</div> -->
</div> </div>
<img <img
class="blade2 move" class="blade2"
:class="{ move: getStatusValue('DBB611635') > 0 || getStatusValue('DBB611637') > 0 }"
src="../../../assets/images/blade1.png" src="../../../assets/images/blade1.png"
alt="" alt=""
/> />
@ -141,395 +148,15 @@
</div> </div>
</div> </div>
<div class="warn-list"> <div class="warn-list">
<div class="warn-li"> <div class="warn-li" v-for="(item, index) in steamBoilerData.alarmDatas" :key="index">
<div class="warn-left"> <div class="warn-left" :class="item.curValue == 1 ? 'alarm-left' : ''">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">泵相序错</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">残火</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">烟温传感器缺失</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">炉体温度保护</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">烟气高温</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">点火失败</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">空气滤网堵</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">点火保护</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">缺水</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">传火失败</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">风压传感器故障</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">安全压力</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">风机速度</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">烟火</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">烟压报警</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">蒸汽过热度高</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">进水超时</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">保水超时</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">烟压传感器故障</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">阀1继电器粘连</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">预点火失败</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">主阀漏气</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">回火</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img <img
src="../../../assets/images/alarm.png" src="../../../assets/images/alarm.png"
class="alarm-icon" class="alarm-icon"
alt="" alt=""
/> />
</div> </div>
<div class="warn-right">阀1继电器断路</div> <div class="warn-right">{{ item.otherName }}</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">副阀漏气</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">燃气压力异常</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">水位故障</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">阀2继电器粘连</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">烟气高温预警</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">风压报警</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">燃气阀反馈故障</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">阀2继电器断路</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">蒸汽温度高</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">电导率高</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">水位极高</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">水位危低</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">排污需求</div>
</div>
<div class="warn-li">
<div class="warn-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">排污故障</div>
</div>
<div class="warn-li">
<div class="warn-left alarm-left">
<img
src="../../../assets/images/alarm.png"
class="alarm-icon"
alt=""
/>
</div>
<div class="warn-right">储备水位低</div>
</div> </div>
</div> </div>
</div> </div>
@ -544,16 +171,13 @@
</div> </div>
</div> </div>
<div class="boiler-monitor"> <div class="boiler-monitor">
<div class="monitor-li">最小转速:100rpm</div> <div
<div class="monitor-li">蒸汽温度:59.9℃</div> class="monitor-li"
<div class="monitor-li">最大转速:1000rpm</div> v-for="(item, index) in steamBoilerData.aoDatas"
<div class="monitor-li">烟气温度:39.9℃</div> :key="index"
<div class="monitor-li">额定转数:800rpm</div> >
<div class="monitor-li">蒸汽压力:0Mpa</div> {{ item.otherName }}:{{ item.curValue !== null && item.curValue !== undefined ? item.curValue : '--' }}{{ item.unit || '' }}
<div class="monitor-li">实际转数:500rpm</div> </div>
<div class="monitor-li">pt100(v2):3276.7℃</div>
<div class="monitor-li">火焰强度:10(0-4000)</div>
<div class="monitor-li">燃气炉状态:启动等待中</div>
</div> </div>
</div> </div>
<div class="special-div two"> <div class="special-div two">
@ -565,33 +189,15 @@
</div> </div>
</div> </div>
<div class="relay"> <div class="relay">
<div class="relay-li"> <div
<div class="relay-open">ON</div> class="relay-li"
<div>风机输出</div> v-for="(item, index) in steamBoilerData.doDatas"
</div> :key="index"
<div class="relay-li"> >
<div class="relay-close">OFF</div> <div :class="[item.curValue == 1 ? 'relay-open' : 'relay-close']">
<div>水泵</div> {{ item.curValue == 1 ? 'ON' : 'OFF' }}
</div>
<div class="relay-li">
<div class="relay-close">OFF</div>
<div>通用报警</div>
</div>
<div class="relay-li">
<div class="relay-close">OFF</div>
<div>小泵</div>
</div> </div>
<div class="relay-li"> <div>{{ item.otherName }}</div>
<div class="relay-close">OFF</div>
<div>点火器</div>
</div>
<div class="relay-li">
<div class="relay-close">OFF</div>
<div>副阀</div>
</div>
<div class="relay-li">
<div class="relay-close">OFF</div>
<div>主气阀</div>
</div> </div>
</div> </div>
</div> </div>
@ -604,17 +210,13 @@
</div> </div>
</div> </div>
<div class="port"> <div class="port">
<div class="port-li port-open">锅炉开关机</div> <div
<div class="port-li port-close">烟气压力</div> v-for="(item, index) in this.steamBoilerData.diDatas"
<div class="port-li port-close">安全压力开关</div> :key="index"
<div class="port-li port-close">压力开关</div> :class="['port-li', item.curValue == 1 ? 'port-open' : 'port-close']"
<div class="port-li port-open">燃气阀开关</div> >
<div class="port-li port-open">火焰检测</div> {{ item.otherName }}
<div class="port-li port-open">风压开关</div> </div>
<div class="port-li port-open">捡漏压差</div>
<div class="port-li port-open">锅炉开关机</div>
<div class="port-li port-open">空气滤网</div>
<div class="port-li port-open">燃气压力</div>
</div> </div>
</div> </div>
</div> </div>
@ -625,6 +227,7 @@
<script> <script>
import { runTime } from "@/api/centerairC/sysMonitor"; import { runTime } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord"; import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { steamBoilerBoiler } from "@/api/boiler/steamBoiler";
import { getDay } from "@/utils/datetime"; import { getDay } from "@/utils/datetime";
export default { export default {
name: "boilerMonitorDetails", name: "boilerMonitorDetails",
@ -635,8 +238,16 @@ export default {
nowTimer: null, nowTimer: null,
isShowWarning: false, //是否有报警 isShowWarning: false, //是否有报警
dayData: "", //监测天数 dayData: "", //监测天数
currentWeekday: "", currentWeekday: "",
// 蒸汽锅炉数据
// 蒸汽锅炉数据
steamBoilerData: {
diDatas: [],
doDatas: [],
aoDatas: [],
runDatas: [],
alarmDatas: []
},
}; };
}, },
computed: { computed: {
@ -682,6 +293,8 @@ export default {
setTimeout(() => { setTimeout(() => {
this.requestFullscreen(); this.requestFullscreen();
}, 100); // 延迟 100 毫秒执行全屏操作 }, 100); // 延迟 100 毫秒执行全屏操作
// 获取蒸汽锅炉数据
this.getSteamBoiler();
}, },
beforeDestroy() { beforeDestroy() {
// 组件销毁前清除定时器 // 组件销毁前清除定时器
@ -690,6 +303,91 @@ export default {
} }
}, },
methods: { methods: {
// Get status value from runDatas where mtNum = DB611658
getStatusValue(mtNum) {
if (!this.steamBoilerData.runDatas || !Array.isArray(this.steamBoilerData.runDatas)) {
return null;
}
const statusItem = this.steamBoilerData.runDatas.find(item =>
item.mtNum === mtNum && item.curValue !== null && item.curValue !== undefined
);
return statusItem ? statusItem.curValue : null;
},
// Get status text based on status value
getStatusText(statusValue) {
if (statusValue === null || statusValue === undefined) {
return '未知';
}
const statusMap = {
0: '上电延时',
1: '关机',
2: '待机',
3: '前清扫',
4: '预点火',
5: '点火',
6: '传火',
7: '工作',
8: '后清扫',
9: '故障',
10: '小火保持',
11: '自检',
12: '检漏',
13: '开点火器',
14: '启动等待中'
};
return statusMap[statusValue] || '未知';
},
getSteamBoiler() {
// type 0：代表查询动画界面数据，1：代表查询模拟量监测数据，2：代表查询继电器数据，3：查询端口输入数据，4：代表查询报警数据
// 0：代表查询动画界面数据
let queryData = {
systemType: '3',
type: 0,
};
steamBoilerBoiler(queryData).then((res) => {
if (res.code == 200) {
this.steamBoilerData.runDatas = res.rows;
console.log("蒸汽锅炉数据", this.steamBoilerData.runDatas);
}
});
// 1：代表查询模拟量监测数据
queryData.type = 1;
steamBoilerBoiler(queryData).then((res) => {
if (res.code == 200) {
this.steamBoilerData.aoDatas = res.rows;
console.log("蒸汽锅炉模拟量监测数据", this.steamBoilerData.aoDatas);
}
});
// 2：代表查询继电器数据
queryData.type = 2;
steamBoilerBoiler(queryData).then((res) => {
if (res.code == 200) {
this.steamBoilerData.doDatas = res.rows;
console.log("蒸汽锅炉继电器数据", this.steamBoilerData.doDatas);
}
});
// 3：代表查询端口输入数据
queryData.type = 3;
steamBoilerBoiler(queryData).then((res) => {
if (res.code == 200) {
this.steamBoilerData.diDatas = res.rows;
console.log("蒸汽锅炉端口输入数据", this.steamBoilerData.diDatas);
}
});
// 4：代表报警数据
queryData.type = 4;
steamBoilerBoiler(queryData).then((res) => {
if (res.code == 200) {
this.steamBoilerData.alarmDatas = res.rows;
console.log("蒸汽锅炉报警数据", this.steamBoilerData.alarmDatas);
}
});
},
// 全屏操作 // 全屏操作
requestFullscreen() { requestFullscreen() {
const element = document.documentElement; const element = document.documentElement;

230
src/views/boilerSys/hotWaterBoiler/hotWaterBoilerDetails.vue
Unescape View File

@ -45,12 +45,62 @@
/> />
</div> </div>
<div class="hotWater-div"> <div class="hotWater-div">
<div class="hotWater-li" v-for="(boiler, index) in hotWaterBoilerData" :key="index">
<div class="special-div one">
<div class="special-top">
<div class="special-title">
<div class="title-left">
<div>{{ boiler.name }}</div>
</div>
</div>
</div>
<div class="hotWater">
<img
class="hotWater-img"
src="../../../assets/images/hotWater.png"
alt=""
/>
</div>
<div class="info">
<div class="hotWater-tem">
<div class="pump-data-li">
<div>出水温度:</div>
<div class="pump-data-text">{{ getTemperatureData(boiler, '出水温度') }}℃</div>
</div>
<div class="pump-data-li">
<div>回水温度:</div>
<div class="pump-data-text">{{ getTemperatureData(boiler, '回水温度') }}℃</div>
</div>
<div class="pump-data-li">
<div>炉水温度:</div>
<div class="pump-data-text">{{ getTemperatureData(boiler, '炉水温度') }}℃</div>
</div>
<div class="pump-data-li">
<div>烟道温度:</div>
<div class="pump-data-text">{{ getTemperatureData(boiler, '烟道温度') }}℃</div>
</div>
</div>
<div class="port-right">
<div class="port">
<div :class="['port-li', getFireSignalClass(boiler, '大火')]">大火控制信号发出</div>
<div :class="['port-li', getFireSignalClass(boiler, '小火')]">小火控制信号发出</div>
<div class="port-li port-close">燃烧机电源</div>
</div>
<div class="bad-div">
故障信息:<span class="bad-text">{{ getFaultInfo(boiler) }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="hotWater-div">
<div class="hotWater-li"> <div class="hotWater-li">
<div class="special-div one"> <div class="special-div one">
<div class="special-top"> <div class="special-top">
<div class="special-title"> <div class="special-title">
<div class="title-left"> <div class="title-left">
<div>热水锅炉1</div> <div>1号热水锅炉</div>
</div> </div>
</div> </div>
</div> </div>
@ -98,7 +148,7 @@
<div class="special-top"> <div class="special-top">
<div class="special-title"> <div class="special-title">
<div class="title-left"> <div class="title-left">
<div>热水锅炉1</div> <div>2号热水锅炉</div>
</div> </div>
</div> </div>
</div> </div>
@ -141,13 +191,14 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
<script> <script>
import { runTime } from "@/api/centerairC/sysMonitor"; import { runTime } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord"; import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { hotWaterBoiler } from "@/api/boiler/hotwaterBoiler";
import { getDay } from "@/utils/datetime"; import { getDay } from "@/utils/datetime";
export default { export default {
name: "boilerMonitorDetails", name: "boilerMonitorDetails",
@ -159,6 +210,8 @@ export default {
isShowWarning: false, //是否有报警 isShowWarning: false, //是否有报警
dayData: "", //监测天数 dayData: "", //监测天数
currentWeekday: "", currentWeekday: "",
// 热水锅炉数据
hotWaterBoilerData: [],
}; };
}, },
computed: { computed: {
@ -200,6 +253,8 @@ export default {
mounted() { mounted() {
this.getAlarnStatus(); this.getAlarnStatus();
this.getDayData(); this.getDayData();
// 获取当前热水锅炉数据
this.getHotWaterBoiler();
}, },
beforeDestroy() { beforeDestroy() {
// 组件销毁前清除定时器 // 组件销毁前清除定时器
@ -208,6 +263,126 @@ export default {
} }
}, },
methods: { methods: {
// Get temperature data by type (keep as is)
getTemperatureData(boiler, type) {
if (!boiler || !boiler.values) return '--';
const item = boiler.values.find(v => v.otherName && v.otherName.includes(type));
return item && item.curValue !== null ? item.curValue : '--';
},
// Get fire signal class for individual signals
getFireSignalClass(boiler, signalType) {
if (!boiler || !boiler.values) return 'port-close';
// Get fire signal values
const fire1Item = boiler.values.find(v => v.otherName && v.otherName.includes('火力1'));
const fire2Item = boiler.values.find(v => v.otherName && v.otherName.includes('火力2'));
const fire1Value = fire1Item && fire1Item.curValue !== null ? fire1Item.curValue : 0;
const fire2Value = fire2Item && fire2Item.curValue !== null ? fire2Item.curValue : 0;
// Determine which signal should be open based on the logic:
// 大火: fire1=1 and fire2=1
// 小火: fire1=1 and fire2=0
if (signalType === '大火' && fire1Value == 1 && fire2Value == 1) {
return 'port-open';
} else if (signalType === '小火' && fire1Value == 1 && fire2Value == 0) {
return 'port-open';
} else {
return 'port-close';
}
},
// Get fire status text based on both fire signals (for other uses if needed)
getFireStatusText(boiler) {
if (!boiler || !boiler.values) return '未开机';
const fire1Item = boiler.values.find(v => v.otherName && v.otherName.includes('火力1'));
const fire2Item = boiler.values.find(v => v.otherName && v.otherName.includes('火力2'));
const fire1Value = fire1Item && fire1Item.curValue !== null ? fire1Item.curValue : 0;
const fire2Value = fire2Item && fire2Item.curValue !== null ? fire2Item.curValue : 0;
// If both are 0, boiler is off
if (fire1Value == 0 && fire2Value == 0) {
return '无火信号';
}
// If fire1 is 1 and fire2 is 0, small fire
else if (fire1Value == 1 && fire2Value == 0) {
return '小火控制信号发出';
}
// If both fire1 and fire2 are 1, big fire
else if (fire1Value == 1 && fire2Value == 1) {
return '大火控制信号发出';
}
// Any other case
else {
return '未开机';
}
},
// Get fault information (placeholder implementation)
// Get fault information based on fault code
getFaultInfo(boiler) {
if (!boiler || !boiler.values) return '无故障';
// Find the fault item - you might need to adjust this based on actual data structure
const faultItem = boiler.values.find(v => v.otherName && v.otherName.includes('故障'));
if (!faultItem || faultItem.curValue === null) {
return '无故障';
}
// Convert fault code to descriptive text
const faultCode = parseInt(faultItem.curValue);
switch (faultCode) {
case 0:
return '无故障';
case 1:
return '炉水温度传感器故障';
case 2:
return '出水温度传感器故障';
case 3:
return '回水温度传感器故障';
case 4:
return '锅炉水位极低';
case 5:
return '燃烧机故障';
case 6:
return '炉水超温';
case 7:
return '循环水流故障';
case 9:
return '定时时间到关机（正常关机模式）';
case 11:
return '烟道传感器故障';
case 12:
return '烟道超温故障';
case 13:
return '检漏故障';
default:
return '未知故障';
}
},
// 获取热水锅炉数据
getHotWaterBoiler() {
let queryParams = {
systemType: '3',
type: '0',
};
hotWaterBoiler(queryParams).then((res) => {
if (res.code == 200) {
console.log("热水锅炉数据", res.rows);
if(res.rows.length > 0){
this.hotWaterBoilerData = res.rows;
} else {
this.hotWaterBoilerData = [];
}
}
});
},
// 进入系统首页 // 进入系统首页
goSys() { goSys() {
this.$router.push("/"); this.$router.push("/");
@ -361,7 +536,7 @@ export default {
width: 49%; width: 49%;
.hotWater { .hotWater {
width: 100%; width: 100%;
padding: 0.35rem 0.2rem; padding: 0.25rem 0.2rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
@ -374,41 +549,46 @@ export default {
.info { .info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center; /* Center content horizontally */
align-items: center; align-items: flex-start; /* Align to top */
width: 100%; width: 100%;
padding: 0.3rem 0 0.4rem 0; padding: 0 0.25rem 0.15rem 0.7rem;
gap: 0.5rem; /* Add space between elements */
.hotWater-tem { .hotWater-tem {
width: 27%; flex: 1; /* Allow to grow */
min-width: 35%; /* Minimum width */
background: #262f58; background: #262f58;
border-radius: 0.1rem; border-radius: 0.1rem;
font-size: 0.16rem; font-size: 0.16rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.25rem 0;
.pump-data-li { .pump-data-li {
width: 100%; width: 100%;
padding: 0 0.3rem; padding: 0 0.4rem; /* Increase horizontal padding */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0.2rem 0; margin: 0.25rem 0;
.pump-data-text { .pump-data-text {
color: #05d120; color: #05d120;
font-weight: bold; font-weight: bold;
} }
} }
} }
.port-right { .port-right {
flex: 1; /* Allow to grow */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.6rem; /* Increase horizontal padding */
min-width: 35%; /* Minimum width */
.port { .port {
width: 3rem;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
flex-wrap: wrap; gap: 0.3rem; /* Increase spacing between elements */
// justify-content: space-between;
.port-li { .port-li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -416,10 +596,9 @@ export default {
justify-content: center; justify-content: center;
width: 100%; width: 100%;
font-size: 0.16rem; font-size: 0.16rem;
margin-bottom: 0.2rem;
color: #c9c6c6; color: #c9c6c6;
position: relative; position: relative;
padding-left: 0.25rem; /* 为伪元素留出空间 */ padding-left: 0.3rem; /* Increase left padding for indicator */
} }
.port-open::before, .port-open::before,
.port-close::before { .port-close::before {
@ -428,30 +607,31 @@ export default {
left: 0; left: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 0.15rem; width: 0.18rem; /* Slightly larger indicator */
height: 0.15rem; height: 0.18rem;
border-radius: 50%; border-radius: 50%;
border: 0.02rem solid white; border: 0.02rem solid white;
} }
.port-open::before { .port-open::before {
background-color: blue; background-color: #00ff00; /* Brighter green for active */
} }
.port-close::before { .port-close::before {
background-color: gray; background-color: #666; /* Darker gray for inactive */
} }
} }
.bad-div { .bad-div {
margin-top: 0.2rem; margin-top: 0.35rem; /* Increase spacing */
font-size: 0.16rem; font-size: 0.16rem;
color: #db4d4d; color: #db4d4d;
.bad-text { .bad-text {
margin-left: 0.1rem; margin-left: 0.15rem;
background: #5581c4; background: #5581c4;
border-radius: 0.1rem; border-radius: 0.15rem; /* Slightly larger radius */
padding: 0.1rem; padding: 0.15rem 0.2rem; /* More padding */
color: #fff; color: #fff;
display: inline-block; /* Better text wrapping */
} }
} }
} }

Write Preview
Loading…
Cancel
Save