|
|
@@ -1,582 +1,581 @@
|
|
|
<template>
|
|
|
- <div class="gasPage">
|
|
|
- <div class="top-area" v-if="topAreaListWs.length != 0">
|
|
|
- <div class="title-t">
|
|
|
- <div class="text-t">瓦斯抽采泵信息</div>
|
|
|
+ <div class="gasPage">
|
|
|
+ <div class="top-area" v-if="topAreaListWs.length != 0">
|
|
|
+ <div class="title-t">
|
|
|
+ <div class="text-t">瓦斯抽采泵信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="top-bt">
|
|
|
+ <div class="bt-box">
|
|
|
+ <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
|
|
|
+ <div class="box-label">{{ item.label }}</div>
|
|
|
+ <div class="box-values">
|
|
|
+ <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
|
|
|
+ <span>{{ `${items.name} : ` }}</span>
|
|
|
+ <span>{{ items.val }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="top-bt">
|
|
|
- <div class="bt-box">
|
|
|
- <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
|
|
|
- <div class="box-label">{{ item.label }}</div>
|
|
|
- <div class="box-values">
|
|
|
- <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
|
|
|
- <span>{{ `${items.name} : ` }}</span>
|
|
|
- <span>{{ items.val }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bt-box">
|
|
|
- <div :class="{
|
|
|
- 'box-value': warnText == 0,
|
|
|
- 'box-value1': warnText == 101,
|
|
|
- 'box-value2': warnText == 102,
|
|
|
- 'box-value3': warnText == 103,
|
|
|
- 'box-value4': warnText == 104,
|
|
|
- 'box-value5': warnText == 201,
|
|
|
- }">{{ warnText == 0 ? '正常' : warnText == 101 ? '较低风险'
|
|
|
- : warnText == 102 ? '低风险' : warnText == 103 ? '中风险' :
|
|
|
- warnText == 104 ? '高风险' : warnText == 201 ? '报警' : warnText }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="bt-box">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ 'box-value': warnText == 0,
|
|
|
+ 'box-value1': warnText == 101,
|
|
|
+ 'box-value2': warnText == 102,
|
|
|
+ 'box-value3': warnText == 103,
|
|
|
+ 'box-value4': warnText == 104,
|
|
|
+ 'box-value5': warnText == 201,
|
|
|
+ }"
|
|
|
+ >{{
|
|
|
+ warnText == 0
|
|
|
+ ? '正常'
|
|
|
+ : warnText == 101
|
|
|
+ ? '较低风险'
|
|
|
+ : warnText == 102
|
|
|
+ ? '低风险'
|
|
|
+ : warnText == 103
|
|
|
+ ? '中风险'
|
|
|
+ : warnText == 104
|
|
|
+ ? '高风险'
|
|
|
+ : warnText == 201
|
|
|
+ ? '报警'
|
|
|
+ : warnText
|
|
|
+ }}</div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
|
|
|
- <div class="title-b">
|
|
|
- <div class="text-b">安全监控测点信息</div>
|
|
|
- </div>
|
|
|
- <div class="content-b">
|
|
|
- <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
|
|
|
- <div class="item-l">
|
|
|
- <div class="label-l">{{ item.label }}</div>
|
|
|
- <div class="value-l">{{ `${item.value}%` }}</div>
|
|
|
- </div>
|
|
|
- <div class="item-r">
|
|
|
- <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
|
|
|
- <span>{{ `${items.label} : ` }}</span>
|
|
|
- <span :class="{
|
|
|
- 'status-f': items.value == 1,
|
|
|
- 'status-l': items.value == 0,
|
|
|
- }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
|
|
|
+ <div class="title-b">
|
|
|
+ <div class="text-b">安全监控测点信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-b">
|
|
|
+ <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
|
|
|
+ <div class="item-l">
|
|
|
+ <div class="label-l">{{ item.label }}</div>
|
|
|
+ <div class="value-l">{{ `${item.value}%` }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-r">
|
|
|
+ <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
|
|
|
+ <span>{{ `${items.label} : ` }}</span>
|
|
|
+ <span
|
|
|
+ :class="{
|
|
|
+ 'status-f': items.value == 1,
|
|
|
+ 'status-l': items.value == 0,
|
|
|
+ }"
|
|
|
+ >{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
|
|
|
+ import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
|
|
|
|
|
|
-let props = defineProps({
|
|
|
+ let props = defineProps({
|
|
|
listData: Object,
|
|
|
-});
|
|
|
-
|
|
|
-//瓦斯顶部区域数据
|
|
|
-let topAreaListWs = reactive<any[]>([])
|
|
|
-
|
|
|
-//瓦斯监控列表数据
|
|
|
-let cardListWs = reactive<any[]>([])
|
|
|
-
|
|
|
-let warnText = ref(0)
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-watch(() => props.listData, (val) => {
|
|
|
- console.log(val, '瓦斯详情数据-------')
|
|
|
- topAreaListWs.length = 0
|
|
|
- cardListWs.length = 0
|
|
|
- if (JSON.stringify(val.common) != '{}') {
|
|
|
- warnText.value = val.common.pump[0].warnLevel || 0
|
|
|
- val.common.pump.forEach(v => {
|
|
|
- topAreaListWs.push({
|
|
|
- label: v.strinstallpos || '--',
|
|
|
- list: [
|
|
|
- // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
|
|
|
- // { name: '报警状态', val: v.warnLevel || 0 },
|
|
|
- { name: "输入管道内一氧化碳(ppm)", val: v.coVal || 0 },
|
|
|
- { name: "管路出口处瓦斯(%CH4)", val: v.gas1 || 0 },
|
|
|
- { name: '泵站内瓦斯(%CH4)', val: v.gas2 || 0 },
|
|
|
- { name: "输入管道内瓦斯(%CH4)", val: v.gas3 || 0 },
|
|
|
- { name: '管道输出瓦斯(%CH4)', val: v.gas4 || 0 },
|
|
|
- { name: '输入管道内工混流量(m³/min)', val: v.mixedTraffic || 0 },
|
|
|
- { name: '输入管道内标况流量(m³/min)', val: v.standardTraffic || 0 },
|
|
|
- { name: '瓦斯抽放量(m³)', val: v.gas4 || 0 },
|
|
|
-
|
|
|
- ]
|
|
|
- })
|
|
|
- })
|
|
|
-
|
|
|
- val.common.gas.forEach(el => {
|
|
|
- el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'))
|
|
|
- cardListWs.push({
|
|
|
- label: '甲烷',
|
|
|
- value: el.readData.gasC || '--',
|
|
|
- listR: [
|
|
|
- { id: 0, label: '测点类型', value: el.typeName || '--' },
|
|
|
- { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
|
|
|
- { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
|
|
|
- { id: 3, label: '测点状态', value: el.warnFlag },
|
|
|
- ]
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
-}, { immediate: true, deep: true })
|
|
|
-
|
|
|
+ });
|
|
|
+
|
|
|
+ //瓦斯顶部区域数据
|
|
|
+ let topAreaListWs = reactive<any[]>([]);
|
|
|
+
|
|
|
+ //瓦斯监控列表数据
|
|
|
+ let cardListWs = reactive<any[]>([]);
|
|
|
+
|
|
|
+ let warnText = ref(0);
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.listData,
|
|
|
+ (val) => {
|
|
|
+ console.log(val, '瓦斯详情数据-------');
|
|
|
+ topAreaListWs.length = 0;
|
|
|
+ cardListWs.length = 0;
|
|
|
+ if (JSON.stringify(val.common) != '{}') {
|
|
|
+ warnText.value = val.common.pump[0].warnLevel || 0;
|
|
|
+ val.common.pump.forEach((v) => {
|
|
|
+ topAreaListWs.push({
|
|
|
+ label: v.strinstallpos || '--',
|
|
|
+ list: [
|
|
|
+ // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
|
|
|
+ // { name: '报警状态', val: v.warnLevel || 0 },
|
|
|
+ { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal || 0 },
|
|
|
+ { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 || 0 },
|
|
|
+ { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 || 0 },
|
|
|
+ { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 || 0 },
|
|
|
+ { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 || 0 },
|
|
|
+ { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic || 0 },
|
|
|
+ { name: '输入管道内标况流量(m³/min)', val: v.readData.standardTraffic || 0 },
|
|
|
+ { name: '瓦斯抽放量(m³)', val: v.readData.gas4 || 0 },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ val.common.gas.forEach((el) => {
|
|
|
+ el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
|
|
|
+ cardListWs.push({
|
|
|
+ label: '甲烷',
|
|
|
+ value: el.readData.gasC || '--',
|
|
|
+ listR: [
|
|
|
+ { id: 0, label: '测点类型', value: '监测传感器' },
|
|
|
+ { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
|
|
|
+ { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
|
|
|
+ { id: 3, label: '测点状态', value: el.warnFlag },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+ );
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@font-face {
|
|
|
+ @font-face {
|
|
|
font-family: 'douyuFont';
|
|
|
src: url('../../../../assets/font/douyuFont.otf');
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-.gasPage {
|
|
|
+ .gasPage {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.top-area {
|
|
|
- height: 356px;
|
|
|
+ height: 356px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title-t {
|
|
|
+ height: 30px;
|
|
|
margin-bottom: 10px;
|
|
|
- padding: 10px 15px;
|
|
|
- // display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .title-t {
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text-t {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .top-bt {
|
|
|
+ .text-t {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-bt {
|
|
|
+ height: 276px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .bt-box {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ position: relative;
|
|
|
+ width: 524px;
|
|
|
height: 276px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .box-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 198px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 80%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ word-wrap: break-word;
|
|
|
+ }
|
|
|
|
|
|
- .bt-box {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
+ .box-values {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 26px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 84%;
|
|
|
+ // height: 26px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .value-b {
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: 32px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
- .top-box {
|
|
|
- position: relative;
|
|
|
- width: 524px;
|
|
|
- height: 276px;
|
|
|
- background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .box-label {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 198px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 80%;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 24px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- word-wrap: break-word;
|
|
|
- }
|
|
|
-
|
|
|
- .box-values {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 26px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 84%;
|
|
|
- // height: 26px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .value-b {
|
|
|
- width: calc(50% - 10px);
|
|
|
- height: 32px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- font-family: 'douyuFont';
|
|
|
-
|
|
|
- color: rgb(0, 242, 255);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
+ &:last-child {
|
|
|
+ font-family: 'douyuFont';
|
|
|
|
|
|
+ color: rgb(0, 242, 255);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgb(145, 230, 9) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value1 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgb(0, 242, 255) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value2 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ffff35 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value3 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ffbe69 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value4 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ff6f00 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value5 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ff0000 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .box-value {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 24px;
|
|
|
- color: rgb(145, 230, 9) !important;
|
|
|
+ .bot-area {
|
|
|
+ height: calc(100% - 356px);
|
|
|
+ padding: 10px 15px 0px 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title-b {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text-b {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-b {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .card-b {
|
|
|
+ position: relative;
|
|
|
+ width: 23%;
|
|
|
+ height: 128px;
|
|
|
+ margin: 0px 15px 15px 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 32px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ width: 89px;
|
|
|
+ height: 98px;
|
|
|
+ background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
|
|
|
+
|
|
|
+ .label-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 7px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1920px) {
|
|
|
+ .item-r {
|
|
|
+ position: absolute;
|
|
|
+ left: 132px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ height: 128px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .content-r {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .box-value1 {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 24px;
|
|
|
- color: rgb(0, 242, 255) !important;
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
}
|
|
|
|
|
|
- .box-value2 {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 24px;
|
|
|
- color: #ffff35 !important;
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (min-width: 1921px) and (max-width: 2560px) {
|
|
|
+ .item-r {
|
|
|
+ position: absolute;
|
|
|
+ left: 138px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ width: calc(100% - 138px);
|
|
|
+ height: 128px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .content-r {
|
|
|
+ display: flex;
|
|
|
|
|
|
- .box-value3 {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 24px;
|
|
|
- color: #ffbe69 !important;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .box-value4 {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 24px;
|
|
|
- color: #ff6f00 !important;
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
}
|
|
|
|
|
|
- .box-value5 {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 24px;
|
|
|
- color: #ff0000 !important;
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ .bot-area1 {
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 15px 0px 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title-b {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
+ .text-b {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
|
|
|
- .bot-area {
|
|
|
- height: calc(100% - 356px);
|
|
|
- padding: 10px 15px 0px 15px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
+ // .select-b {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: flex-start;
|
|
|
+ // align-items: center;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-b {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .card-b {
|
|
|
+ position: relative;
|
|
|
+ width: 23%;
|
|
|
+ height: 128px;
|
|
|
+ margin: 0px 15px 15px 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 32px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ width: 89px;
|
|
|
+ height: 98px;
|
|
|
+ background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
|
|
|
+
|
|
|
+ .label-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 7px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content-b {
|
|
|
- height: calc(100% - 40px);
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .card-b {
|
|
|
- position: relative;
|
|
|
- width: 23%;
|
|
|
- height: 128px;
|
|
|
- margin: 0px 15px 15px 15px;
|
|
|
- background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .item-l {
|
|
|
- position: absolute;
|
|
|
- left: 32px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- width: 89px;
|
|
|
- height: 98px;
|
|
|
- background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
|
|
|
-
|
|
|
- .label-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 7px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .value-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
+ .value-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1920px) {
|
|
|
+ .item-r {
|
|
|
+ position: absolute;
|
|
|
+ left: 132px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ height: 128px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .content-r {
|
|
|
+ display: flex;
|
|
|
|
|
|
- @media screen and (max-width:1920px) {
|
|
|
- .item-r {
|
|
|
- position: absolute;
|
|
|
- left: 132px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- height: 128px;
|
|
|
- padding: 5px 0px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
|
|
|
- @media screen and (min-width: 1921px) and (max-width:2560px) {
|
|
|
- .item-r {
|
|
|
- position: absolute;
|
|
|
- left: 138px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- width: calc(100% - 138px);
|
|
|
- height: 128px;
|
|
|
- padding: 5px 0px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
|
|
|
- .bot-area1 {
|
|
|
- height: 100%;
|
|
|
- padding: 10px 15px 0px 15px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (min-width: 1921px) and (max-width: 2560px) {
|
|
|
+ .item-r {
|
|
|
+ position: absolute;
|
|
|
+ left: 138px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ width: calc(100% - 138px);
|
|
|
+ height: 128px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .content-r {
|
|
|
+ display: flex;
|
|
|
|
|
|
- // .select-b {
|
|
|
- // display: flex;
|
|
|
- // justify-content: flex-start;
|
|
|
- // align-items: center;
|
|
|
- // }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- .content-b {
|
|
|
- height: calc(100% - 40px);
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .card-b {
|
|
|
- position: relative;
|
|
|
- width: 23%;
|
|
|
- height: 128px;
|
|
|
- margin: 0px 15px 15px 15px;
|
|
|
- background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .item-l {
|
|
|
- position: absolute;
|
|
|
- left: 32px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- width: 89px;
|
|
|
- height: 98px;
|
|
|
- background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
|
|
|
-
|
|
|
- .label-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 7px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .value-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
|
|
|
- @media screen and (max-width:1920px) {
|
|
|
- .item-r {
|
|
|
- position: absolute;
|
|
|
- left: 132px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- height: 128px;
|
|
|
- padding: 5px 0px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- @media screen and (min-width: 1921px) and (max-width:2560px) {
|
|
|
- .item-r {
|
|
|
- position: absolute;
|
|
|
- left: 138px;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -50%);
|
|
|
- width: calc(100% - 138px);
|
|
|
- height: 128px;
|
|
|
- padding: 5px 0px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
}
|
|
|
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+ }
|
|
|
+</style>
|
lxh