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

1.修改蒸汽锅炉-燃气阀状态 

2.修改风柜字体、样式
meizhou
selia-zx 4 weeks ago
parent
e91b527cf9
commit
b5a7b0feaa
6 changed files with 141 additions and 79 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. 4
      .env.development
  2. BIN
      src/assets/images/boiler.png
  3. BIN
      src/assets/images/gasStop.png
  4. BIN
      src/assets/images/gasWork.png
  5. 30
      src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
  6. 186
      src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue

4
.env.development
Unescape View File

@ -7,9 +7,9 @@ ENV = 'development'
# 开发环境 # 开发环境
# VUE_APP_BASE_API = '/dev-api' # VUE_APP_BASE_API = '/dev-api'
# 后台 # 后台
VUE_APP_BASE_API = 'http://192.168.1.222:8080' # VUE_APP_BASE_API = 'http://192.168.1.222:8080'
# 梅州云端 # 梅州云端
# VUE_APP_BASE_API = 'http://106.55.173.225:8091' VUE_APP_BASE_API = 'http://106.55.173.225:8091'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true

BIN
src/assets/images/boiler.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/assets/images/gasStop.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/gasWork.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

30
src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
Unescape View File

@ -111,7 +111,7 @@
></el-form> ></el-form>
</div> </div>
<div class="wind-tem2" v-if="isObjectValid(damperOneObj)"> <div class="wind-tem2" v-if="isObjectValid(damperOneObj)">
<div class="wind-text">1#风阀反馈：</div> <div class="wind-text">宴会一厅风阀反馈：</div>
<div class="back-text">{{ damperOneBackObj.collectValue }}%</div> <div class="back-text">{{ damperOneBackObj.collectValue }}%</div>
<div class="wind-text">调节：</div> <div class="wind-text">调节：</div>
<el-form @submit.native.prevent> <el-form @submit.native.prevent>
@ -133,7 +133,7 @@
</el-form> </el-form>
</div> </div>
<div class="wind-tem3" v-if="isObjectValid(damperTwoObj)"> <div class="wind-tem3" v-if="isObjectValid(damperTwoObj)">
<div class="wind-text">2#风阀反馈：</div> <div class="wind-text">餐厅风阀反馈：</div>
<div class="back-text">{{ damperTwoBackObj.collectValue }}%</div> <div class="back-text">{{ damperTwoBackObj.collectValue }}%</div>
<div class="wind-text">调节：</div> <div class="wind-text">调节：</div>
<el-form @submit.native.prevent> <el-form @submit.native.prevent>
@ -155,7 +155,7 @@
</el-form> </el-form>
</div> </div>
<div class="wind-tem4" v-if="isObjectValid(damperThreeObj)"> <div class="wind-tem4" v-if="isObjectValid(damperThreeObj)">
<div class="wind-text">3#风阀反馈：</div> <div class="wind-text">会议风阀反馈：</div>
<div class="back-text">{{ damperThreeBackObj.collectValue }}%</div> <div class="back-text">{{ damperThreeBackObj.collectValue }}%</div>
<div class="wind-text">调节：</div> <div class="wind-text">调节：</div>
<el-form @submit.native.prevent> <el-form @submit.native.prevent>
@ -914,8 +914,15 @@ export default {
item.collectName.includes("模式选择") item.collectName.includes("模式选择")
) { ) {
this.modeChangeObj = item; this.modeChangeObj = item;
if (String(this.modeChangeObj.collectValue) === "0.00") { // collectValue转换为整数
this.modeChangeObj.collectValue = 0; if (
typeof this.modeChangeObj.collectValue === "string" &&
this.modeChangeObj.collectValue.match(/^\d+\.00$/)
) {
this.modeChangeObj.collectValue = parseInt(
this.modeChangeObj.collectValue,
10
);
} }
if (this.modeChangeObj.collectValue === 0) { if (this.modeChangeObj.collectValue === 0) {
this.isShowMode1 = true; this.isShowMode1 = true;
@ -1537,6 +1544,7 @@ export default {
.windC { .windC {
width: 13rem; width: 13rem;
height: 5.38rem; height: 5.38rem;
margin-right: 1rem;
position: relative; position: relative;
.menu-title { .menu-title {
color: #e1f4ff; color: #e1f4ff;
@ -1631,10 +1639,10 @@ export default {
} }
.wind-tem2 { .wind-tem2 {
z-index: 10; z-index: 10;
width: 3.3rem; width: 3.7rem;
position: absolute; position: absolute;
top: 2.2rem; top: 2.2rem;
right: -0.7rem; right: -1.1rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -1650,10 +1658,10 @@ export default {
} }
.wind-tem3 { .wind-tem3 {
z-index: 10; z-index: 10;
width: 3.3rem; width: 3.47rem;
position: absolute; position: absolute;
top: 4.1rem; top: 4.1rem;
right: -0.7rem; right: -0.9rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -1669,10 +1677,10 @@ export default {
} }
.wind-tem4 { .wind-tem4 {
z-index: 10; z-index: 10;
width: 3.3rem; width: 3.47rem;
position: absolute; position: absolute;
top: 5.9rem; top: 5.9rem;
right: -0.7rem; right: -0.9rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

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

@ -57,62 +57,62 @@
<div class="status-div"> <div class="status-div">
<div>当前工作状态</div> <div>当前工作状态</div>
<div class="status-text"> <div class="status-text">
{{ getStatusText(getStatusValue('DB611658')) }} {{ getStatusText(getStatusValue("DB611658")) }}
</div> </div>
</div> </div>
<div class="fire-div"> <div class="fire-div">
<div>火焰强度</div> <div>火焰强度</div>
<div class="fire-text"> <div class="fire-text">
{{ getStatusValue('DB611724') }} {{ getStatusValue("DB611724") }}
</div> </div>
</div> </div>
<div class="runtime-div"> <div class="runtime-div">
<div>设备运行时长</div> <div>设备运行时长</div>
<div class="fire-text"> <div class="fire-text">
{{ formatToOneDecimal(getStatusValue('DB8296')/60) }}小时 {{ formatToOneDecimal(getStatusValue("DB8296") / 60) }}小时
</div> </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">{{ getStatusValue('DB611500') }} Mpa</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">{{ getStatusValue('DBW611598') }} Mpa</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">{{ getStatusValue('DBW611600') }} Mpa</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">{{ getStatusValue('DBW611602') }} Mpa</div> <div class="mpa">{{ getStatusValue("DBW611602") }} Mpa</div>
</div> </div>
</div> </div>
<div class="flow-other-div"> <div class="flow-other-div">
<div class="other-li"> <div class="other-li">
<div>温度瞬值</div> <div>温度瞬值</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8300') }} ℃</div> <div class="mpa">{{ getStatusValue("PLC1500_DB8300") }} ℃</div>
</div> </div>
<div class="other-li"> <div class="other-li">
<div>压力瞬值</div> <div>压力瞬值</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8304') }} Mpa</div> <div class="mpa">{{ getStatusValue("PLC1500_DB8304") }} Mpa</div>
</div> </div>
<div class="other-li"> <div class="other-li">
<div>流量瞬值</div> <div>流量瞬值</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8308') }} t/h</div> <div class="mpa">{{ getStatusValue("PLC1500_DB8308") }} t/h</div>
</div> </div>
<div class="other-li"> <div class="other-li">
<div>流量累计</div> <div>流量累计</div>
<div class="mpa">{{ getStatusValue('PLC1500_DB8320') }} t</div> <div class="mpa">{{ getStatusValue("PLC1500_DB8320") }} t</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">{{ getStatusValue('DB611496') }}℃</div> <div class="flue-text">{{ getStatusValue("DB611496") }}℃</div>
<div>烟气</div> <div>烟气</div>
</div> </div>
<!-- 锅炉上方百分比 --> <!-- 锅炉上方百分比 -->
@ -121,28 +121,51 @@
<img <img
src="../../../assets/images/boilerWork.gif" src="../../../assets/images/boilerWork.gif"
class="boilerWork" class="boilerWork"
:style="{ display: getStatusValue('DB611724') > 100 ? 'block' : 'none' }" :style="{
display: getStatusValue('DB611724') > 100 ? 'block' : 'none',
}"
alt="" alt=""
/> />
<!-- 锅炉侧边水位 --> <!-- 锅炉侧边水位 -->
<div class="level">{{ getStatusValue('DB611736') }}%</div> <div class="level">{{ getStatusValue("DB611736") }}%</div>
<div class="waterlevel"> <div class="waterlevel">
<div class="progress" :style="{ height: (getStatusValue('DB611736') || 0) + '%' }"></div> <div
class="progress"
:style="{ height: (getStatusValue('DB611736') || 0) + '%' }"
></div>
</div> </div>
<!-- 燃气阀 -->
<img
class="gasValve-img"
:src="
getStatusValue('DBB611629') > 1
? require('../../../assets/images/gasWork.png')
: require('../../../assets/images/gasStop.png')
"
alt=""
/>
<div class="mainValve">主阀</div> <div class="mainValve">主阀</div>
<img <img
class="mainValve-img" class="mainValve-img"
:src="getStatusValue('DBB611639') > 1 ? require('../../../assets/images/workValve.png') : require('../../../assets/images/stopValve.png')" :src="
getStatusValue('DBB611639') > 1
? require('../../../assets/images/workValve.png')
: require('../../../assets/images/stopValve.png')
"
alt="" alt=""
/> />
<div class="auxiliaryValve">副阀</div> <div class="auxiliaryValve">副阀</div>
<img <img
class="auxiliaryValve-img" class="auxiliaryValve-img"
:src="getStatusValue('DBB611640') > 1 ? require('../../../assets/images/workValve.png') : require('../../../assets/images/stopValve.png')" :src="
getStatusValue('DBB611640') > 1
? require('../../../assets/images/workValve.png')
: require('../../../assets/images/stopValve.png')
"
alt="" alt=""
/> />
<div class="fan-div"> <div class="fan-div">
<div class="fan-text">{{ getStatusValue('DB611514') }}rpm</div> <div class="fan-text">{{ getStatusValue("DB611514") }}rpm</div>
<div>风机</div> <div>风机</div>
</div> </div>
<img <img
@ -157,7 +180,11 @@
</div> </div>
<img <img
class="blade2" class="blade2"
:class="{ move: getStatusValue('DBB611635') > 0 || getStatusValue('DBB611637') > 0 }" :class="{
move:
getStatusValue('DBB611635') > 0 ||
getStatusValue('DBB611637') > 0,
}"
src="../../../assets/images/blade1.png" src="../../../assets/images/blade1.png"
alt="" alt=""
/> />
@ -172,8 +199,15 @@
</div> </div>
</div> </div>
<div class="warn-list"> <div class="warn-list">
<div class="warn-li" v-for="(item, index) in steamBoilerData.alarmDatas" :key="index"> <div
<div class="warn-left" :class="item.curValue == 1 ? 'alarm-left' : ''"> class="warn-li"
v-for="(item, index) in steamBoilerData.alarmDatas"
:key="index"
>
<div
class="warn-left"
:class="item.curValue == 1 ? 'alarm-left' : ''"
>
<img <img
src="../../../assets/images/alarm.png" src="../../../assets/images/alarm.png"
class="alarm-icon" class="alarm-icon"
@ -195,12 +229,16 @@
</div> </div>
</div> </div>
<div class="boiler-monitor"> <div class="boiler-monitor">
<div <div
class="monitor-li" class="monitor-li"
v-for="(item, index) in steamBoilerData.aoDatas" v-for="(item, index) in steamBoilerData.aoDatas"
:key="index" :key="index"
> >
{{ item.otherName }}:{{ item.curValue !== null && item.curValue !== undefined ? item.curValue : '--' }}{{ item.unit || '' }} {{ item.otherName }}:{{
item.curValue !== null && item.curValue !== undefined
? item.curValue
: "--"
}}{{ item.unit || "" }}
</div> </div>
</div> </div>
</div> </div>
@ -213,13 +251,13 @@
</div> </div>
</div> </div>
<div class="relay"> <div class="relay">
<div <div
class="relay-li" class="relay-li"
v-for="(item, index) in steamBoilerData.doDatas" v-for="(item, index) in steamBoilerData.doDatas"
:key="index" :key="index"
> >
<div :class="[item.curValue == 1 ? 'relay-open' : 'relay-close']"> <div :class="[item.curValue == 1 ? 'relay-open' : 'relay-close']">
{{ item.curValue == 1 ? 'ON' : 'OFF' }} {{ item.curValue == 1 ? "ON" : "OFF" }}
</div> </div>
<div>{{ item.otherName }}</div> <div>{{ item.otherName }}</div>
</div> </div>
@ -234,10 +272,13 @@
</div> </div>
</div> </div>
<div class="port"> <div class="port">
<div <div
v-for="(item, index) in this.steamBoilerData.diDatas" v-for="(item, index) in this.steamBoilerData.diDatas"
:key="index" :key="index"
:class="['port-li', item.curValue == 1 ? 'port-open' : 'port-close']" :class="[
'port-li',
item.curValue == 1 ? 'port-open' : 'port-close',
]"
> >
{{ item.otherName }} {{ item.otherName }}
</div> </div>
@ -270,7 +311,7 @@ export default {
doDatas: [], doDatas: [],
aoDatas: [], aoDatas: [],
runDatas: [], runDatas: [],
alarmDatas: [] alarmDatas: [],
}, },
}; };
}, },
@ -332,58 +373,64 @@ export default {
if (value === null || value === undefined) { if (value === null || value === undefined) {
return null; return null;
} }
const num = parseFloat(value); const num = parseFloat(value);
if (isNaN(num)) { if (isNaN(num)) {
return value; return value;
} }
return num.toFixed(1); return num.toFixed(1);
}, },
// Get status value from runDatas where mtNum = DB611658 // Get status value from runDatas where mtNum = DB611658
getStatusValue(mtNum) { getStatusValue(mtNum) {
if (!this.steamBoilerData.runDatas || !Array.isArray(this.steamBoilerData.runDatas)) { if (
!this.steamBoilerData.runDatas ||
!Array.isArray(this.steamBoilerData.runDatas)
) {
return null; return null;
} }
const statusItem = this.steamBoilerData.runDatas.find(item => const statusItem = this.steamBoilerData.runDatas.find(
item.mtNum === mtNum && item.curValue !== null && item.curValue !== undefined (item) =>
item.mtNum === mtNum &&
item.curValue !== null &&
item.curValue !== undefined
); );
return statusItem ? statusItem.curValue : null; return statusItem ? statusItem.curValue : null;
}, },
// Get status text based on status value // Get status text based on status value
getStatusText(statusValue) { getStatusText(statusValue) {
if (statusValue === null || statusValue === undefined) { if (statusValue === null || statusValue === undefined) {
return '未知'; return "未知";
} }
const statusMap = { const statusMap = {
0: '上电延时', 0: "上电延时",
1: '关机', 1: "关机",
2: '待机', 2: "待机",
3: '前清扫', 3: "前清扫",
4: '预点火', 4: "预点火",
5: '点火', 5: "点火",
6: '传火', 6: "传火",
7: '工作', 7: "工作",
8: '后清扫', 8: "后清扫",
9: '故障', 9: "故障",
10: '小火保持', 10: "小火保持",
11: '自检', 11: "自检",
12: '检漏', 12: "检漏",
13: '开点火器', 13: "开点火器",
14: '启动等待中' 14: "启动等待中",
}; };
return statusMap[statusValue] || '未知'; return statusMap[statusValue] || "未知";
}, },
getSteamBoiler() { getSteamBoiler() {
// type 0：代表查询动画界面数据，1：代表查询模拟量监测数据，2：代表查询继电器数据，3：查询端口输入数据，4：代表查询报警数据 // type 0：代表查询动画界面数据，1：代表查询模拟量监测数据，2：代表查询继电器数据，3：查询端口输入数据，4：代表查询报警数据
// 0：代表查询动画界面数据 // 0：代表查询动画界面数据
let queryData = { let queryData = {
systemType: '3', systemType: "3",
type: 0, type: 0,
}; };
steamBoilerBoiler(queryData).then((res) => { steamBoilerBoiler(queryData).then((res) => {
@ -647,6 +694,13 @@ export default {
top: 3.8rem; top: 3.8rem;
left: 2rem; left: 2rem;
} }
.gasValve-img {
position: absolute;
top: 1.73rem;
left: 2.6rem;
width: 0.5rem;
height: 0.4rem;
}
.mainValve-img { .mainValve-img {
position: absolute; position: absolute;
top: 2.81rem; top: 2.81rem;
@ -666,8 +720,8 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 0.1rem; top: -0.1rem;
left: 7.4rem; left: 7.3rem;
.other-li { .other-li {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -686,7 +740,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 0.1rem; top: -0.1rem;
left: 9.2rem; left: 9.2rem;
.other-li { .other-li {
display: flex; display: flex;
@ -794,7 +848,7 @@ export default {
align-items: center; align-items: center;
position: absolute; position: absolute;
top: 4.15rem; top: 4.15rem;
right: 2.28rem; right: 2.63rem;
.pump-text { .pump-text {
margin-top: 0.03rem; margin-top: 0.03rem;
padding: 0.02rem 0.05rem; padding: 0.02rem 0.05rem;

Write Preview
Loading…
Cancel
Save