|
@@ -151,7 +151,7 @@
|
|
|
</div>
|
|
|
<div class="data-show-box" v-if="!loading">
|
|
|
<div class="data-item" v-if="leftColumns.length > 0">
|
|
|
- <div class="item-header">环境监测</div>
|
|
|
+ <div class="item-header">设备监测</div>
|
|
|
<div class="item-container">
|
|
|
<div class="tab">
|
|
|
<div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
|
|
@@ -251,59 +251,58 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="data-item" v-if="rightColumns.length > 0">
|
|
|
- <div class="item-header">设备监测</div>
|
|
|
- <div class="item-container">
|
|
|
- <div class="tab">
|
|
|
- <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
|
|
|
- >主机</div
|
|
|
- >
|
|
|
- <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
|
|
|
- >备机</div
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="container-group container-group-l">
|
|
|
- <!-- <div class="warning-header">
|
|
|
- <div class="header-item">
|
|
|
- <div class="header-title"> 未处理数</div>
|
|
|
- <div class="header-value">{{ selectData['warnLogNotOkCount'] }} </div>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <div class="warning-group">
|
|
|
- <template v-if="deviceType">
|
|
|
- <div v-for="(state, index) in rightColumns" :key="index">
|
|
|
- <template
|
|
|
- v-if="selectData[state.dataIndex.replace('Fan', 'Fan1')] == 0.0 || selectData[state.dataIndex.replace('Fan', 'Fan1')] > 1"
|
|
|
- >
|
|
|
- <div class="container-item">
|
|
|
- <div class="item-icon">
|
|
|
- <CaretRightOutlined class="icon-style" />
|
|
|
- </div>
|
|
|
- <div class="item-name">{{ state.title }}</div>
|
|
|
- <div v-if="state.dataIndex.startsWith('Fan')">
|
|
|
- <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
|
|
|
- selectData[state.dataIndex.replace('Fan', 'Fan1')] ? selectData[state.dataIndex.replace('Fan', 'Fan1')] : '-'
|
|
|
- }}</div>
|
|
|
- <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
|
|
|
- selectData[state.dataIndex.replace('Fan', 'Fan2')] ? selectData[state.dataIndex.replace('Fan', 'Fan2')] : '-'
|
|
|
- }}</div>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <div class="item-value">{{ selectData[state.dataIndex] ? selectData[state.dataIndex] : '-' }}</div>
|
|
|
+ <div>
|
|
|
+ <div class="data-item" v-if="rightColumns.length > 0">
|
|
|
+ <div class="item-header">环境监测/设备报警</div>
|
|
|
+ <div class="item-container">
|
|
|
+ <div class="tab">
|
|
|
+ <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"
|
|
|
+ >主机</div
|
|
|
+ >
|
|
|
+ <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 1 }" @click="selectDevice('dataMonitorRowIndex', 1)"
|
|
|
+ >备机</div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="container-group container-group-l">
|
|
|
+ <div class="warning-group" style="max-height: 200px; overflow-y: auto">
|
|
|
+ <template v-if="deviceType">
|
|
|
+ <div v-for="(state, index) in rightColumns" :key="index">
|
|
|
+ <template v-if="!state.dataIndex.endsWith('_w')">
|
|
|
+ <div class="container-item">
|
|
|
+ <div class="item-icon">
|
|
|
+ <CaretRightOutlined class="icon-style" />
|
|
|
+ </div>
|
|
|
+ <div class="item-name">{{ state.title }}</div>
|
|
|
+ <div v-if="state.dataIndex.startsWith('Fan')">
|
|
|
+ <div class="item-value" v-if="dataMonitorRowIndex == 0">{{
|
|
|
+ selectData[state.dataIndex.replace('Fan', 'Fan1')] ? selectData[state.dataIndex.replace('Fan', 'Fan1')] : '-'
|
|
|
+ }}</div>
|
|
|
+ <div class="item-value" v-if="dataMonitorRowIndex == 1">{{
|
|
|
+ selectData[state.dataIndex.replace('Fan', 'Fan2')] ? selectData[state.dataIndex.replace('Fan', 'Fan2')] : '-'
|
|
|
+ }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="item-value">{{ selectData[state.dataIndex] ? selectData[state.dataIndex] : '-' }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div class="warning-item">
|
|
|
- <div class="item-name"> <div class="icon"></div> {{ state.title }} </div>
|
|
|
- <div v-if="state.dataIndex.startsWith('Fan')">
|
|
|
- <div class="signal-item" v-if="warningMonitorRowIndex == 0">
|
|
|
- <template v-if="selectData['Fan1StartStatus'] == '0' && globalConfig?.simulatedPassword">
|
|
|
- <div class="signal-round signal-round-gry"></div>
|
|
|
- <div class="vent-margin-l-8">无状态</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="warning-group" style="max-height: 200px; overflow-y: auto">
|
|
|
+ <div class="warning-header">
|
|
|
+ <div class="header-item">
|
|
|
+ <div class="header-title">报警数量</div>
|
|
|
+ <div class="header-value">{{ selectData['warnLogNotOkCount'] }} </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="deviceType">
|
|
|
+ <div v-for="(state, index) in leftColumns" :key="index">
|
|
|
+ <template v-if="state.dataIndex.endsWith('_w')">
|
|
|
+ <div class="warning-item">
|
|
|
+ <div class="item-name"> <div class="icon"></div> {{ state.title }} </div>
|
|
|
+ <div v-if="state.dataIndex.startsWith('Fan')">
|
|
|
+ <div class="signal-item" v-if="warningMonitorRowIndex == 0">
|
|
|
<div
|
|
|
class="signal-round"
|
|
|
:class="{
|
|
@@ -321,14 +320,8 @@
|
|
|
? '正常'
|
|
|
: '异常'
|
|
|
}}</div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="signal-item" v-if="warningMonitorRowIndex == 1">
|
|
|
- <template v-if="selectData['Fan2StartStatus'] == '0' && globalConfig?.simulatedPassword">
|
|
|
- <div class="signal-round signal-round-gry"></div>
|
|
|
- <div class="vent-margin-l-8">无状态</div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
+ </div>
|
|
|
+ <div class="signal-item" v-if="warningMonitorRowIndex == 1">
|
|
|
<div
|
|
|
class="signal-round"
|
|
|
:class="{
|
|
@@ -346,28 +339,28 @@
|
|
|
? '正常'
|
|
|
: '异常'
|
|
|
}}</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- <div class="signal-item">
|
|
|
- <div
|
|
|
- class="signal-round vent-margin-l-8"
|
|
|
- :class="{
|
|
|
- 'signal-round-run': selectData[state.dataIndex] == '0',
|
|
|
- 'signal-round-warning': selectData[state.dataIndex] !== undefined && selectData[state.dataIndex] == '1',
|
|
|
- 'signal-round-gry': selectData[state.dataIndex] === undefined,
|
|
|
- }"
|
|
|
- ></div>
|
|
|
- <div class="vent-margin-l-8">{{
|
|
|
- selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] == '0' ? '正常' : '异常'
|
|
|
- }}</div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="signal-item">
|
|
|
+ <div
|
|
|
+ class="signal-round vent-margin-l-8"
|
|
|
+ :class="{
|
|
|
+ 'signal-round-run': selectData[state.dataIndex] == '0',
|
|
|
+ 'signal-round-warning': selectData[state.dataIndex] !== undefined && selectData[state.dataIndex] == '1',
|
|
|
+ 'signal-round-gry': selectData[state.dataIndex] === undefined,
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ <div class="vent-margin-l-8">{{
|
|
|
+ selectData[state.dataIndex] === undefined ? '无状态' : selectData[state.dataIndex] == '0' ? '正常' : '异常'
|
|
|
+ }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -1630,16 +1623,15 @@
|
|
|
.header-item {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin: 5px 10px;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.header-title {
|
|
|
color: #39e7fe;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
.header-value {
|
|
|
- width: 133px;
|
|
|
- height: 56px;
|
|
|
+ // width: 133px;
|
|
|
+ height: 36px;
|
|
|
font-weight: 600;
|
|
|
font-family: 'douyuFont';
|
|
|
font-size: 16px;
|
|
@@ -1647,6 +1639,8 @@
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-left: 8px;
|
|
|
// background: url('/@/assets/images/vent/count-header-bg.png') no-repeat;
|
|
|
}
|
|
|
}
|
|
@@ -1662,6 +1656,9 @@
|
|
|
align-items: center;
|
|
|
height: 38px;
|
|
|
.item-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // padding-left: 5px;
|
|
|
.icon {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
@@ -1669,7 +1666,7 @@
|
|
|
background-color: #1cd5ff;
|
|
|
border-radius: 3px;
|
|
|
position: relative;
|
|
|
- margin-right: 5px;
|
|
|
+ margin-right: 8px;
|
|
|
&::before {
|
|
|
content: '';
|
|
|
width: 10px;
|
|
@@ -1682,6 +1679,15 @@
|
|
|
left: -2px;
|
|
|
}
|
|
|
}
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 1px;
|
|
|
+ height: 38px;
|
|
|
+ position: absolute;
|
|
|
+ left: 12px;
|
|
|
+ background-color: #00f5fe;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|