|
|
@@ -1,246 +1,256 @@
|
|
|
<template>
|
|
|
- <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
|
|
|
- <div class="gasWarn">
|
|
|
- <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
|
|
|
- style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
|
|
|
- <div class="alarm-menu">
|
|
|
- <div class="type-btn">
|
|
|
- <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas"
|
|
|
- :key="index" @click="btnClick(index)">
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card-btn">
|
|
|
- <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
|
|
|
- @click="cardClick(ind, item)">
|
|
|
- <div class="text">{{ item.name }}</div>
|
|
|
- <div class="warn">{{ item.warn }}</div>
|
|
|
+ <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
|
|
|
+ <div class="gasWarn">
|
|
|
+ <a-button
|
|
|
+ preIcon="ant-design:rollback-outlined"
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="position: absolute; left: 15px; top: 15px; color: #fff"
|
|
|
+ @click="getBack"
|
|
|
+ >返回</a-button
|
|
|
+ >
|
|
|
+ <div class="alarm-menu">
|
|
|
+ <div class="type-btn">
|
|
|
+ <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas" :key="index" @click="btnClick(index)">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-btn">
|
|
|
+ <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
|
|
|
+ <div class="text">{{ item.name }}</div>
|
|
|
+ <div class="warn">{{ item.warn }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="gas-content">
|
|
|
+ <div style="width: 100%; height: 100%" v-if="isShow == 'yjjc'">
|
|
|
+ <div class="top-area" v-if="topAreaListWs.length != 0">
|
|
|
+ <div class="title-t">
|
|
|
+ <div class="text-t">瓦斯抽采泵信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-t">
|
|
|
+ <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 || item.val == 1001) && 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 == 1001 && items.name == '报警状态'
|
|
|
+ ? '网络断开'
|
|
|
+ : items.val
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="gas-content">
|
|
|
- <div style="width:100%;height:100%" v-if="isShow=='yjjc'">
|
|
|
- <div class="top-area" v-if="topAreaListWs.length != 0">
|
|
|
- <div class="title-t">
|
|
|
- <div class="text-t">瓦斯抽采泵信息</div>
|
|
|
- </div>
|
|
|
- <div class="content-t">
|
|
|
- <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 || item.val == 1001) && 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 == 1001 && items.name == '报警状态' ? '网络断开'
|
|
|
- : items.val
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- </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>
|
|
|
+ <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 style="width:100%;height:100%" v-else-if="isShow=='yjzb'">
|
|
|
- <warnTargetGas></warnTargetGas>
|
|
|
- </div>
|
|
|
- <div style="width:100%;height:100%" v-else-if="isShow=='wscs'">
|
|
|
- <gasParamter></gasParamter>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%; height: 100%" v-else-if="isShow == 'yjzb'">
|
|
|
+ <warnTargetGas></warnTargetGas>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%; height: 100%" v-else-if="isShow == 'wscs'">
|
|
|
+ <gasParamter></gasParamter>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
|
-import { sysTypeWarnList, sysWarn } from '../common.api'
|
|
|
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
-import warnTargetGas from '../common/warnTargetGas.vue'
|
|
|
-import gasParamter from '../common/gasParamter.vue'
|
|
|
-import { typeMenuListGas } from '../common.data'
|
|
|
-
|
|
|
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
|
|
|
-//当前左侧激活菜单的索引
|
|
|
-let activeIndex1 = ref(0);
|
|
|
-//左侧数据列表
|
|
|
-let menuList = reactive<any[]>([])
|
|
|
-//瓦斯顶部区域数据
|
|
|
-let topAreaListWs = reactive<any[]>([]);
|
|
|
-//瓦斯监控列表数据
|
|
|
-let cardListWs = reactive<any[]>([]);
|
|
|
-let router = useRouter()
|
|
|
-//监测/指标激活索引
|
|
|
-let activeIndex = ref(0);
|
|
|
-let isShow = ref('')
|
|
|
-
|
|
|
-// https获取监测数据
|
|
|
-let timer: null | NodeJS.Timeout = null;
|
|
|
-function getMonitor(deviceID, flag?) {
|
|
|
+ import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
|
|
+ import { sysTypeWarnList, sysWarn } from '../common.api';
|
|
|
+ import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+ import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import warnTargetGas from '../common/warnTargetGas.vue';
|
|
|
+ import gasParamter from '../common/gasParamter.vue';
|
|
|
+ import { typeMenuListGas } from '../common.data';
|
|
|
+
|
|
|
+ const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
|
|
|
+ //当前左侧激活菜单的索引
|
|
|
+ let activeIndex1 = ref(0);
|
|
|
+ //左侧数据列表
|
|
|
+ let menuList = reactive<any[]>([]);
|
|
|
+ //瓦斯顶部区域数据
|
|
|
+ let topAreaListWs = reactive<any[]>([]);
|
|
|
+ //瓦斯监控列表数据
|
|
|
+ let cardListWs = reactive<any[]>([]);
|
|
|
+ let router = useRouter();
|
|
|
+ //监测/指标激活索引
|
|
|
+ let activeIndex = ref(0);
|
|
|
+ let isShow = ref('yjjc');
|
|
|
+
|
|
|
+ // https获取监测数据
|
|
|
+ let timer: null | NodeJS.Timeout = null;
|
|
|
+ function getMonitor(deviceID, flag?) {
|
|
|
timer = setTimeout(
|
|
|
- async () => {
|
|
|
- await getSysWarnList(deviceID, 'gas');
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor(deviceID);
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
+ async () => {
|
|
|
+ await getSysWarnList(deviceID, 'gas');
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor(deviceID);
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
);
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-//返回首页
|
|
|
-function getBack() {
|
|
|
- router.push('/monitorChannel/monitor-alarm-home')
|
|
|
-}
|
|
|
+ //返回首页
|
|
|
+ function getBack() {
|
|
|
+ router.push('/monitorChannel/monitor-alarm-home');
|
|
|
+ }
|
|
|
|
|
|
-//获取预警详情弹窗右侧数据
|
|
|
-function getSysWarnList(id, type) {
|
|
|
+ //获取预警详情弹窗右侧数据
|
|
|
+ function getSysWarnList(id, type) {
|
|
|
sysWarn({ sysid: id, type: type }).then((res) => {
|
|
|
- // listData.common = res;
|
|
|
- topAreaListWs.length = 0;
|
|
|
- cardListWs.length = 0;
|
|
|
- if (JSON.stringify(res) != '{}') {
|
|
|
- res.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 : '-' },
|
|
|
- ],
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- res.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 || '--',
|
|
|
- // value: 0,
|
|
|
- listR: [
|
|
|
- { id: 0, label: '测点类型', value: '瓦斯' },
|
|
|
- { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
|
|
|
- // { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
|
|
|
- { id: 2, label: '数据时间', value: el.readTime || '--' },
|
|
|
- { id: 3, label: '测点状态', value: el.warnFlag },
|
|
|
- ],
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
+ // listData.common = res;
|
|
|
+ topAreaListWs.length = 0;
|
|
|
+ cardListWs.length = 0;
|
|
|
+ if (JSON.stringify(res) != '{}') {
|
|
|
+ res.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 : '-' },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ res.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 || '--',
|
|
|
+ // value: 0,
|
|
|
+ listR: [
|
|
|
+ { id: 0, label: '测点类型', value: '瓦斯' },
|
|
|
+ { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
|
|
|
+ // { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
|
|
|
+ { id: 2, label: '数据时间', value: el.readTime || '--' },
|
|
|
+ { id: 3, label: '测点状态', value: el.warnFlag },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-//获取左侧菜单列表
|
|
|
-async function getMenuList() {
|
|
|
- let res = await sysTypeWarnList({ type: 'gas' })
|
|
|
+ //获取左侧菜单列表
|
|
|
+ async function getMenuList() {
|
|
|
+ let res = await sysTypeWarnList({ type: 'gas' });
|
|
|
if (res.length != 0) {
|
|
|
- menuList.length = 0
|
|
|
- res.forEach((el) => {
|
|
|
- menuList.push({
|
|
|
- name: el.systemname,
|
|
|
- warn: '低风险',
|
|
|
- deviceID: el.id,
|
|
|
- strtype: el.strtype,
|
|
|
- });
|
|
|
+ menuList.length = 0;
|
|
|
+ res.forEach((el) => {
|
|
|
+ menuList.push({
|
|
|
+ name: el.systemname,
|
|
|
+ warn: '低风险',
|
|
|
+ deviceID: el.id,
|
|
|
+ strtype: el.strtype,
|
|
|
});
|
|
|
- getMonitor(menuList[0].deviceID, true);
|
|
|
+ });
|
|
|
+ getMonitor(menuList[0].deviceID, true);
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-//监测/预警指标选项切换
|
|
|
-function btnClick(ind) {
|
|
|
+ //监测/预警指标选项切换
|
|
|
+ function btnClick(ind) {
|
|
|
activeIndex.value = ind;
|
|
|
clearTimeout(timer);
|
|
|
switch (ind) {
|
|
|
- case 0:
|
|
|
- activeIndex1.value = 0;
|
|
|
- isShow.value = 'yjjc'
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- activeIndex1.value = 0;
|
|
|
- isShow.value = 'yjzb'
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- activeIndex1.value=0
|
|
|
- isShow.value='wscs'
|
|
|
- break;
|
|
|
+ case 0:
|
|
|
+ activeIndex1.value = 0;
|
|
|
+ isShow.value = 'yjjc';
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ activeIndex1.value = 0;
|
|
|
+ isShow.value = 'yjzb';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ activeIndex1.value = 0;
|
|
|
+ isShow.value = 'wscs';
|
|
|
+ break;
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-//菜单选项切换
|
|
|
-function cardClick(ind, item) {
|
|
|
+ //菜单选项切换
|
|
|
+ function cardClick(ind, item) {
|
|
|
activeIndex1.value = ind;
|
|
|
clearTimeout(timer);
|
|
|
getMonitor(item.deviceID, true);
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- getMenuList()
|
|
|
-})
|
|
|
-onUnmounted(() => {
|
|
|
+ onMounted(() => {
|
|
|
+ getMenuList();
|
|
|
+ });
|
|
|
+ onUnmounted(() => {
|
|
|
if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
}
|
|
|
-});
|
|
|
-
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.gasWarn {
|
|
|
+ .gasWarn {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 80px 10px 15px 10px;
|
|
|
@@ -249,454 +259,453 @@ onUnmounted(() => {
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.alarm-menu {
|
|
|
- height: 100%;
|
|
|
- width: 15%;
|
|
|
+ height: 100%;
|
|
|
+ width: 15%;
|
|
|
+
|
|
|
+ .type-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ border: 1px solid #0058ee;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 33.33%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
|
|
|
- .type-btn {
|
|
|
+ .btn1 {
|
|
|
+ width: 33.33%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #0058ee;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 48px);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: relative;
|
|
|
+ width: 81%;
|
|
|
+ height: 14%;
|
|
|
+ margin-bottom: 10%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 80%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 28px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #01fefc;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .warn {
|
|
|
width: 100%;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- border: 1px solid #0058ee;
|
|
|
- margin-bottom: 20px;
|
|
|
- border-radius: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 33.33%;
|
|
|
- height: 100%;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .btn1 {
|
|
|
- width: 33.33%;
|
|
|
- height: 100%;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- border-radius: 2px;
|
|
|
- background: #0058ee;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .card-btn {
|
|
|
+ .btn1 {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 14%;
|
|
|
+ margin-bottom: 10%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ background: url('../../../../../assets/images/fire/choice.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ width: 80%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 28px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #01fefc;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-62%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .warn {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 48px);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .btn {
|
|
|
- position: relative;
|
|
|
- width: 81%;
|
|
|
- height: 14%;
|
|
|
- margin-bottom: 10%;
|
|
|
- font-family: 'douyuFont';
|
|
|
- background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .text {
|
|
|
- width: 80%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 28px;
|
|
|
- font-size: 16px;
|
|
|
- color: #01fefc;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .warn {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 14px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn1 {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 14%;
|
|
|
- margin-bottom: 10%;
|
|
|
- font-family: 'douyuFont';
|
|
|
- background: url('../../../../../assets/images/fire/choice.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .text {
|
|
|
- width: 80%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 28px;
|
|
|
- font-size: 16px;
|
|
|
- color: #01fefc;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-62%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .warn {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 14px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-60%, 0);
|
|
|
- }
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-60%, 0);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.gas-content {
|
|
|
- position: relative;
|
|
|
- width: calc(85% - 10px);
|
|
|
- height: 100%;
|
|
|
- margin-left: 10px;
|
|
|
- padding: 15px;
|
|
|
- background: url('../../../../../assets/images/fire/border.png') no-repeat;
|
|
|
+ position: relative;
|
|
|
+ width: calc(85% - 10px);
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/border.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .top-area {
|
|
|
+ height: 356px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
- .top-area {
|
|
|
- height: 356px;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 10px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ .title-t {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text-t {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 276px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .top-box {
|
|
|
+ position: relative;
|
|
|
+ width: 724px;
|
|
|
+ height: 100%;
|
|
|
+ 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: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ word-wrap: break-word;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-values {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 26px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 84%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .value-b {
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: 25px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- .text-t {
|
|
|
+ &:last-child {
|
|
|
font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
+ color: rgb(0, 242, 255);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content-t {
|
|
|
- width: 100%;
|
|
|
- height: 276px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .top-box {
|
|
|
- position: relative;
|
|
|
- width: 724px;
|
|
|
- height: 100%;
|
|
|
- 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: 16px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- word-wrap: break-word;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .box-values {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 26px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 84%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .value-b {
|
|
|
- width: calc(50% - 10px);
|
|
|
- height: 25px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: rgb(0, 242, 255);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-value {
|
|
|
- color: rgb(145, 230, 9) !important;
|
|
|
- }
|
|
|
-
|
|
|
- .box-value1 {
|
|
|
- color: rgb(0, 242, 255) !important;
|
|
|
- }
|
|
|
-
|
|
|
- .box-value2 {
|
|
|
- color: #ffff35 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .box-value3 {
|
|
|
- color: #ffbe69 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .box-value4 {
|
|
|
- color: #ff6f00 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .box-value5 {
|
|
|
- color: #ff0000 !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .box-value {
|
|
|
+ color: rgb(145, 230, 9) !important;
|
|
|
}
|
|
|
+
|
|
|
+ .box-value1 {
|
|
|
+ color: rgb(0, 242, 255) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value2 {
|
|
|
+ color: #ffff35 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value3 {
|
|
|
+ color: #ffbe69 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value4 {
|
|
|
+ color: #ff6f00 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-value5 {
|
|
|
+ color: #ff0000 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-area {
|
|
|
+ height: calc(100% - 356px);
|
|
|
+ padding: 10px;
|
|
|
+ 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: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .bot-area {
|
|
|
- height: calc(100% - 356px);
|
|
|
- padding: 10px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat 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: 30%;
|
|
|
+ height: 128px;
|
|
|
+ margin: 0px 15px 15px 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .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;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .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: 30%;
|
|
|
- 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;
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .value-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- &: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;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .bot-area1 {
|
|
|
- height: 100%;
|
|
|
- padding: 10px 15px 0px 15px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat 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;
|
|
|
+
|
|
|
+ .title-b {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text-b {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-b {
|
|
|
+ width: 100%;
|
|
|
+ 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: 30%;
|
|
|
+ height: 128px;
|
|
|
+ margin: 0px 15px 15px 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .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;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-l {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content-b {
|
|
|
- width: 100%;
|
|
|
- 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: 30%;
|
|
|
- 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;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .value-l {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- &: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>
|
