|
|
@@ -4,19 +4,31 @@
|
|
|
<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-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 :class="{
|
|
|
+ 'box-value': items.val == 0 && items.name == '报警状态',
|
|
|
+ 'box-value1': items.val == 101 && items.name == '报警状态',
|
|
|
+ 'box-value2': items.val == 102 && items.name == '报警状态',
|
|
|
+ 'box-value3': items.val == 103 && items.name == '报警状态',
|
|
|
+ 'box-value4': items.val == 104 && items.name == '报警状态',
|
|
|
+ 'box-value5': items.val == 201 && items.name == '报警状态',
|
|
|
+ }">{{ items.val == 0 && items.name == '报警状态' ? '正常' : items.val == 101 && items.name == '报警状态'
|
|
|
+ ? '较低风险'
|
|
|
+ : items.val == 102 && items.name == '报警状态' ? '低风险' : items.val == 103 && items.name == '报警状态' ?
|
|
|
+ '中风险' :
|
|
|
+ items.val == 104 && items.name == '报警状态' ? '高风险' : items.val == 201 && items.name == '报警状态' ?
|
|
|
+ '报警' :
|
|
|
+ items.val }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="bt-box">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="bt-box">
|
|
|
<div
|
|
|
:class="{
|
|
|
'box-value': warnText == 0,
|
|
|
@@ -42,8 +54,8 @@
|
|
|
: warnText
|
|
|
}}</div
|
|
|
>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
|
|
|
@@ -59,13 +71,10 @@
|
|
|
<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
|
|
|
- >
|
|
|
+ <span :class="{
|
|
|
+ 'status-f': items.value == 1,
|
|
|
+ 'status-l': items.value == 0,
|
|
|
+ }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -75,502 +84,474 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
|
|
|
-
|
|
|
- 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.length!=0 ? 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 && v.readData.coVal!='0' ? v.readData.coVal : '-' },
|
|
|
- { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 !='0' ? v.readData.gas1 : '-' }, //v.readData.gas1
|
|
|
- { name: '泵站内瓦斯(%CH4)', val:v.readData.gas2 && v.readData.gas2 !='0' ? v.readData.gas2 : '-' }, //v.readData.gas2
|
|
|
- { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3!='0' ? v.readData.gas3 : '-' }, //v.readData.gas3
|
|
|
- { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4!='0' ? v.readData.gas4 : '-' }, //v.readData.gas4
|
|
|
- { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic !='0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
|
|
|
- { name: '输入管道内标况流量(m³/min)', val: v.readData.standardTraffic && v.readData.standardTraffic !='0' ? v.readData.standardTraffic : '-' }, //v.readData.standardTraffic
|
|
|
- { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage!='0' ? v.readData.totalGasDrainage : '-' },
|
|
|
- ],
|
|
|
- });
|
|
|
+import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
|
|
|
+
|
|
|
+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.length != 0 && val.common.pump[0].warnLevel != null ? val.common.pump[0].warnLevel : 0;
|
|
|
+ console.log(warnText.value, ' warnText.value-------')
|
|
|
+ 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 && v.readData.coVal != '0' ? v.readData.coVal : '-' },
|
|
|
+ { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
|
|
|
+ { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
|
|
|
+ { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
|
|
|
+ { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
|
|
|
+ { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
|
|
|
+ { name: '输入管道内标况流量(m³/min)', val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-' }, //v.readData.standardTraffic
|
|
|
+ { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
|
|
|
+ ],
|
|
|
});
|
|
|
-
|
|
|
- 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 },
|
|
|
- ],
|
|
|
- });
|
|
|
+ });
|
|
|
+
|
|
|
+ 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 }
|
|
|
- );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @font-face {
|
|
|
- font-family: 'douyuFont';
|
|
|
- src: url('../../../../assets/font/douyuFont.otf');
|
|
|
- }
|
|
|
-
|
|
|
- .gasPage {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20px;
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+}
|
|
|
+
|
|
|
+.gasPage {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .top-area {
|
|
|
+ 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;
|
|
|
|
|
|
- .top-area {
|
|
|
- height: 356px;
|
|
|
+ .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;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text-t {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ position: relative;
|
|
|
+ width: 724px;
|
|
|
+ height: 276px;
|
|
|
+ background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .title-t {
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .box-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 198px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 80%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 24px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
-
|
|
|
- .text-t {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ word-wrap: break-word;
|
|
|
}
|
|
|
|
|
|
- .top-bt {
|
|
|
- height: 276px;
|
|
|
- width: 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;
|
|
|
|
|
|
- .bt-box {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
+ .value-b {
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: 25px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
- .top-box {
|
|
|
- position: relative;
|
|
|
- width: 724px;
|
|
|
- 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';
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- color: rgb(0, 242, 255);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &: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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .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;
|
|
|
+ .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;
|
|
|
+ .title-b {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ .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);
|
|
|
+ }
|
|
|
|
|
|
- .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%;
|
|
|
+ .value-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .item-l {
|
|
|
+ @media screen and (max-width: 1920px) {
|
|
|
+ .item-r {
|
|
|
position: absolute;
|
|
|
- left: 32px;
|
|
|
+ left: 132px;
|
|
|
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;
|
|
|
+ height: 128px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .content-r {
|
|
|
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;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
}
|
|
|
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ @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;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
}
|
|
|
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ .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;
|
|
|
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ .title-b {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- // .select-b {
|
|
|
- // display: flex;
|
|
|
- // justify-content: flex-start;
|
|
|
- // 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%;
|
|
|
+ // .select-b {
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: flex-start;
|
|
|
+ // align-items: center;
|
|
|
+ // }
|
|
|
+ }
|
|
|
|
|
|
- .item-l {
|
|
|
+ .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: 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);
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ @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;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
}
|
|
|
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ @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;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .content-r {
|
|
|
- display: flex;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- &:first-child {
|
|
|
- display: inline-block;
|
|
|
- width: 68px;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- display: inline-block;
|
|
|
- width: calc(100% - 68px);
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
}
|
|
|
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -578,4 +559,5 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
