|
@@ -13,57 +13,57 @@
|
|
|
<div class="base-box">
|
|
|
<div class="base-item">
|
|
|
<span class="title">所属区域:</span>
|
|
|
- <span class="value">采区水泵房</span>
|
|
|
+ <span class="value">{{ posMonitor['beltName'] ? posMonitor['beltName'] : '-' }}</span>
|
|
|
</div>
|
|
|
<div class="base-item">
|
|
|
<span class="title">当前区域名称:</span>
|
|
|
- <span class="value">分区1</span>
|
|
|
+ <span class="value">{{ posMonitor['areaName'] ? posMonitor['areaName'] : '-' }}</span>
|
|
|
</div>
|
|
|
<div class="base-item">
|
|
|
<span class="title">设备编号:</span>
|
|
|
- <span class="value">001</span>
|
|
|
+ <span class="value">{{ posMonitor['deviceNum'] ? posMonitor['deviceNum'] : '-' }}</span>
|
|
|
</div>
|
|
|
<div class="base-item">
|
|
|
<span class="title">监测区域范围:</span>
|
|
|
- <span class="value">{{ 0 }}m - {{ 1 }}m</span>
|
|
|
+ <span class="value">{{ posMonitor['startArea'] ? posMonitor['startArea'] : '-' }}m - {{ posMonitor['engArea'] ? posMonitor['engArea'] : '-' }}m</span>
|
|
|
</div>
|
|
|
<div class="base-item">
|
|
|
<span class="title">开启温度:</span>
|
|
|
- <span class="value">{{ 60 }}℃</span>
|
|
|
+ <span class="value">{{ (posMonitor['tempStart'] !== undefined && posMonitor['tempStart'] !== null) ? posMonitor['tempStart'] : '-' }}℃</span>
|
|
|
</div>
|
|
|
<div class="base-item">
|
|
|
<span class="title">关闭温度:</span>
|
|
|
- <span class="value">{{ 30 }}℃</span>
|
|
|
+ <span class="value">{{ (posMonitor['tempStop'] !== undefined && posMonitor['tempStop'] !== null) ? posMonitor['tempStop'] : '-' }}℃</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span class="base-title">实时监测参数</span>
|
|
|
<div class="right-top">
|
|
|
<!-- 温度 -->
|
|
|
- <div class="top-item">
|
|
|
+ <div class="top-item">
|
|
|
<div class="icon">
|
|
|
- <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
|
|
|
+ <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">最高温度</div>
|
|
|
- <div class="value">{{ posMonitor.fmax }} <span>℃</span> </div>
|
|
|
+ <div class="title">平均温度</div>
|
|
|
+ <div class="value">{{ (posMonitor['tempAvg'] !== undefined && posMonitor['tempAvg'] !== null) ? posMonitor['tempAvg'] : '-' }} <span>℃</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="top-item">
|
|
|
+ <div class="top-item">
|
|
|
<div class="icon">
|
|
|
- <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
|
|
|
+ <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">最低温度</div>
|
|
|
- <div class="value">{{ posMonitor.fmin }} <span>℃</span></div>
|
|
|
+ <div class="title">最高温度</div>
|
|
|
+ <div class="value">{{ (posMonitor['tempMax'] !== undefined && posMonitor['tempMax'] !== null) ? posMonitor['tempMax'] : '-' }} <span>℃</span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item">
|
|
|
<div class="icon">
|
|
|
- <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
|
|
|
+ <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">平均温度</div>
|
|
|
- <div class="value">{{ posMonitor.favg }} <span>℃</span></div>
|
|
|
+ <div class="title">最低温度</div>
|
|
|
+ <div class="value">{{ (posMonitor['tempMin'] !== undefined && posMonitor['tempMin'] !== null) ? posMonitor['tempMin'] : '-' }} <span>℃</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item warning-box">
|
|
@@ -71,8 +71,8 @@
|
|
|
<SvgIcon class="icon-style" size="38" name="risk-level" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">风险等级</div>
|
|
|
- <div class="warning-value">低风险</div>
|
|
|
+ <div class="title">设备状态</div>
|
|
|
+ <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item item-data">
|
|
@@ -80,58 +80,52 @@
|
|
|
<SvgIcon class="icon-style" name="temp" style="width: 62px; height: 38px; margin-top: 10px;" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">温度监测</div>
|
|
|
- <div class="value">{{ (posMonitor.coval !== undefined && posMonitor.coval !== null) ? posMonitor.coval : '-'
|
|
|
- }} <span>ppm</span> </div>
|
|
|
+ <div class="title">温度监测<span :class="{'state-close': posMonitor['devicesSTAT'] == 0, 'state-open': posMonitor['devicesSTAT'] == 1, 'state-offline': posMonitor['devicesSTAT'] == 2 }">({{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : posMonitor['devicesSTAT'] == 2 ? '离线' :'' }})</span></div>
|
|
|
+ <div class="value" :class="{'alarm-value': posMonitor['isWarn'] == 2 }">{{ (posMonitor['tempRealtime'] !== undefined && posMonitor['tempRealtime'] !== null) ? posMonitor['tempRealtime'] : '-'
|
|
|
+ }} <span>℃</span> </div>
|
|
|
</div>
|
|
|
- <div class="rang">报警阈值:小于-10或大于100</div>
|
|
|
+ <div class="rang">报警阈值:小于<span class="rang-data">{{ posMonitor['warmLow'] ? posMonitor['warmLow'] : '-' }}</span>或大于<span class="rang-data">{{ posMonitor['warnUp'] ? posMonitor['warnUp'] : '-' }}</span></div>
|
|
|
</div>
|
|
|
<div class="top-item item-data">
|
|
|
<div class="icon">
|
|
|
<SvgIcon class="icon-style" name="coval" style="width: 62px; height: 38px; margin-top: 10px;" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">CO监测</div>
|
|
|
- <div class="value">{{ (posMonitor.coval !== undefined && posMonitor.coval !== null) ? posMonitor.coval : '-'
|
|
|
+ <div class="title">CO监测<span :class="{ 'state-close': posMonitor['COSensorSTAT'] == 0, 'state-open': posMonitor['COSensorSTAT'] == 1, 'state-offline': posMonitor['COSensorSTAT'] == 2 }">({{ posMonitor['COSensorSTAT'] == 0 ? '关闭' : posMonitor['COSensorSTAT'] == 1 ? '开启' : posMonitor['COSensorSTAT'] == 2 ? '离线' : '' }})</span></div>
|
|
|
+ <div class="value" :class="{ 'alarm-value': posMonitor['COSensorStatus'] == 2 }">{{ (posMonitor['CORealtime'] !== undefined && posMonitor['CORealtime'] !== null) ? posMonitor['CORealtime'] : '-'
|
|
|
}} <span>ppm</span> </div>
|
|
|
</div>
|
|
|
- <div class="rang">报警阈值:12</div>
|
|
|
+ <div class="rang">报警阈值:<span class="rang-data">{{ posMonitor['COWarn'] ? posMonitor['COWarn'] : '-' }}</span></div>
|
|
|
</div>
|
|
|
<div class="top-item item-data">
|
|
|
<div class="icon">
|
|
|
<SvgIcon class="icon-style" name="smoke" style="width: 72px; height: 46px;" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">烟雾监测</div>
|
|
|
- <div class="value">{{ (posMonitor.co2val !== undefined && posMonitor.co2val !== null) ? posMonitor.co2val :
|
|
|
- '-' }} <span>%</span></div>
|
|
|
+ <div class="title">烟雾监测<span :class="{ 'state-close': posMonitor['SmokeSTAT485'] == 0, 'state-open': posMonitor['SmokeSTAT485'] == 1, 'state-offline': posMonitor['SmokeSTAT485'] == 2 }">({{ posMonitor['SmokeSTAT485'] == 0 ? '关闭' : posMonitor['SmokeSTAT485'] == 1 ? '开启' : posMonitor['SmokeSTAT485'] == 2 ? '离线' : '' }})</span></div>
|
|
|
+ <div class="value" :class="{ 'alarm-value': posMonitor['SmokeStatus485'] == 2 }">{{ (posMonitor['SmokeRealtime485'] !== undefined && posMonitor['SmokeRealtime485'] !== null) ? posMonitor['SmokeRealtime485'] : '-' }} <span>%</span></div>
|
|
|
</div>
|
|
|
- <div class="rang">报警阈值:12</div>
|
|
|
+ <div class="rang">报警阈值:<span class="rang-data">{{ posMonitor['SmokeWarn485'] ? posMonitor['SmokeWarn485'] : '-' }}</span></div>
|
|
|
</div>
|
|
|
<div class="top-item item-data">
|
|
|
<div class="icon">
|
|
|
<SvgIcon class="icon-style" name="pressure" style="width: 62px; height: 38px;" />
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
- <div class="title">压力监测</div>
|
|
|
- <div class="value">{{ (posMonitor.gasval !== undefined && posMonitor.gasval !== null) ? posMonitor.gasval :
|
|
|
- '-' }} <span>%</span></div>
|
|
|
+ <div class="title">压力监测<span :class="{ 'state-close': posMonitor['PressureSensorSTAT'] == 0, 'state-open': posMonitor['PressureSensorSTAT'] == 1, 'state-offline': posMonitor['PressureSensorSTAT'] == 2 }">({{ posMonitor['PressureSensorSTAT'] == 0 ? '关闭' : posMonitor['PressureSensorSTAT'] == 1 ? '开启' : posMonitor['PressureSensorSTAT'] == 2 ? '离线' : '' }})</span></div>
|
|
|
+ <div class="value" :class="{ 'alarm-value': posMonitor['PressureSensorStatus'] == 2 }">{{ (posMonitor['PressureRealtime'] !== undefined && posMonitor['PressureRealtime'] !== null) ? posMonitor['PressureRealtime'] : '-' }} <span>%</span></div>
|
|
|
</div>
|
|
|
- <div class="rang">报警阈值:12</div>
|
|
|
+ <div class="rang">报警阈值:<span class="rang-data">{{ posMonitor['PressureWarn'] ? posMonitor['PressureWarn'] : '-' }}</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-bottom">
|
|
|
<span class="base-title">设备监测曲线</span>
|
|
|
- <!-- <div class="echarts-box">
|
|
|
- <BarAndLine class="echarts-line" xAxisPropType="time" :dataSource="historyList" height="100%"
|
|
|
- :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
|
|
|
- </div> -->
|
|
|
<a-table
|
|
|
size="small"
|
|
|
:columns="ballvalveColumns"
|
|
|
:data-source="[]"
|
|
|
:pagination="false"
|
|
|
- :scroll="{ y: 200 }"
|
|
|
+ :scroll="{ y: 300 }"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -163,94 +157,7 @@ export default defineComponent({
|
|
|
const posList = ref<any[]>([])
|
|
|
const posMonitor = shallowRef({})
|
|
|
|
|
|
- const echatsOption = {
|
|
|
- grid: {
|
|
|
- top: '25%',
|
|
|
- left: '30',
|
|
|
- right: '45',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {}
|
|
|
- },
|
|
|
- }
|
|
|
|
|
|
- const chartsColumns = [
|
|
|
- {
|
|
|
- legend: '一氧化碳',
|
|
|
- seriesName: '(ppm)',
|
|
|
- ymax: 10,
|
|
|
- yname: 'ppm',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#FDB146',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'coval',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '乙炔',
|
|
|
- seriesName: '',
|
|
|
- ymax: 10,
|
|
|
- yname: 'ppm',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#00FFA8',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'chval',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '乙烯',
|
|
|
- seriesName: '',
|
|
|
- ymax: 10,
|
|
|
- yname: 'ppm',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#AE19FF',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'ch2val',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '二氧化碳',
|
|
|
- seriesName: '(%)',
|
|
|
- ymax: 20,
|
|
|
- yname: '1%',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'right',
|
|
|
- color: '#9C83D9',
|
|
|
- sort: 2,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'co2val',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '甲烷',
|
|
|
- seriesName: '',
|
|
|
- ymax: 20,
|
|
|
- yname: '1%',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'right',
|
|
|
- color: '#DA3914',
|
|
|
- sort: 2,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'gasval',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '氧气',
|
|
|
- seriesName: '(氧气%)',
|
|
|
- ymax: 30,
|
|
|
- yname: '2%',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'right',
|
|
|
- color: '#03C2EC',
|
|
|
- sort: 3,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'o2val',
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
const [register, { setModalProps, closeModal }] = useModalInner();
|
|
|
|
|
|
function handleVisibleChange(visible) {
|
|
@@ -301,7 +208,7 @@ export default defineComponent({
|
|
|
})
|
|
|
})
|
|
|
|
|
|
- return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, historyList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns };
|
|
|
+ return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, ballvalveColumns, deviceList, historyList, activeDeviceID, posMonitor };
|
|
|
},
|
|
|
|
|
|
});
|
|
@@ -457,7 +364,13 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+ .alarm-value{
|
|
|
+ text-shadow: 0 0 25px #fe1500;
|
|
|
+ background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.item-data{
|
|
@@ -465,22 +378,39 @@ export default defineComponent({
|
|
|
height: 130px;
|
|
|
padding-top: 0;
|
|
|
.icon{
|
|
|
- margin-right: 30px;
|
|
|
- margin-top: 25px;
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 30px;
|
|
|
+ // margin-right: 30px;
|
|
|
+ // margin-top: 25px;
|
|
|
}
|
|
|
.item-container{
|
|
|
+ width: 140px;
|
|
|
+ position: absolute;
|
|
|
padding-top: 18px;
|
|
|
justify-content: flex-start;
|
|
|
+ right: 0;
|
|
|
.value{
|
|
|
top: 0px;
|
|
|
}
|
|
|
-
|
|
|
+ .state-close{
|
|
|
+ color: #b9b9b9;
|
|
|
+ }
|
|
|
+ .state-open{
|
|
|
+ color: #00ff88;
|
|
|
+ }
|
|
|
+ .state-offline{
|
|
|
+ color: #ffd000;
|
|
|
+ }
|
|
|
}
|
|
|
.rang{
|
|
|
position: absolute;
|
|
|
color: #ff8331;
|
|
|
bottom: 10px;
|
|
|
right: 20px;
|
|
|
+ .rang-data{
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|