|
|
@@ -1,610 +1,622 @@
|
|
|
<template>
|
|
|
- <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
|
|
|
- <div class="ventilateWarn">
|
|
|
- <div class="ventilate-top">
|
|
|
- <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="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>
|
|
|
+ <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
|
|
|
+ <div class="ventilateWarn">
|
|
|
+ <div class="ventilate-top">
|
|
|
+ <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="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="ventilate-content">
|
|
|
+ <div class="work-nav">
|
|
|
+ <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
|
|
|
+ <div class="pic" v-if="item.imgSrc"></div>
|
|
|
+ <div class="content" v-if="item.label && item.value">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <span>{{ item.value }}</span>
|
|
|
</div>
|
|
|
- <div class="ventilate-content">
|
|
|
- <div class="work-nav">
|
|
|
- <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
|
|
|
- <div class="pic" v-if="item.imgSrc"></div>
|
|
|
- <div class="content" v-if="item.label && item.value">
|
|
|
- <span>{{ item.label }}</span>
|
|
|
- <span>{{ item.value }}</span>
|
|
|
- </div>
|
|
|
- <div :style="{color:item.text=='正常' ? '#00d8ff' : '#ff2313'}" style="width:100%;padding: 0px 10px;text-align: center;font-weight: bold" v-if="item.text">{{ item.text }}</div>
|
|
|
- <div class="percent" v-if="item.list.length != 0">
|
|
|
- <div class="title">{{ item.label }}</div>
|
|
|
- <div class="value">
|
|
|
- <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
|
|
|
- <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
|
|
|
- <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bot-area">
|
|
|
- <div class="title-t">
|
|
|
- <div class="text-t">通风信息状态监测</div>
|
|
|
- </div>
|
|
|
- <div class="echart-boxd">
|
|
|
- <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ :style="{ color: item.text == '正常' ? '#00d8ff' : '#ff2313' }"
|
|
|
+ style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold"
|
|
|
+ v-if="item.text"
|
|
|
+ >{{ item.text }}</div
|
|
|
+ >
|
|
|
+ <div class="percent" v-if="item.list.length != 0">
|
|
|
+ <div class="title">{{ item.label }}</div>
|
|
|
+ <div class="value">
|
|
|
+ <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
|
|
|
+ <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
|
|
|
+ <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="ventilate-bottom">
|
|
|
- <div class="bot-area">
|
|
|
- <div class="title-b">
|
|
|
- <div class="text-b">通风监控测点信息</div>
|
|
|
- </div>
|
|
|
- <div class="content-b">
|
|
|
- <div class="card-b" v-for="(item, index) in cardListTf" :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}${items.dw}` }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="bot-area">
|
|
|
+ <div class="title-t">
|
|
|
+ <div class="text-t">通风信息状态监测</div>
|
|
|
+ </div>
|
|
|
+ <div class="echart-boxd">
|
|
|
+ <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ventilate-bottom">
|
|
|
+ <div class="bot-area">
|
|
|
+ <div class="title-b">
|
|
|
+ <div class="text-b">通风监控测点信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-b">
|
|
|
+ <div class="card-b" v-for="(item, index) in cardListTf" :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}${items.dw}` }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
|
|
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import { sysTypeWarnList, sysWarn, getDevice } from '../common.api'
|
|
|
-import { ventilateTopList } from '../common.data';
|
|
|
-import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
-import echartLine from '../common/echartLine.vue';
|
|
|
-
|
|
|
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
|
|
|
-let router = useRouter()
|
|
|
-//左侧数据列表
|
|
|
-let menuList = reactive<any[]>([])
|
|
|
-//当前左侧激活菜单的索引
|
|
|
-let activeIndex1 = ref(0);
|
|
|
-let maxY = ref(0)
|
|
|
-let echartDw = ref('(m³/min)')
|
|
|
-//通风图表数据
|
|
|
-const echartDataFc1 = reactive({
|
|
|
+ import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
|
|
+ import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
+ import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
|
|
|
+ import { ventilateTopList } from '../common.data';
|
|
|
+ import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import echartLine from '../common/echartLine.vue';
|
|
|
+
|
|
|
+ const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
|
|
|
+ let router = useRouter();
|
|
|
+ //左侧数据列表
|
|
|
+ let menuList = reactive<any[]>([]);
|
|
|
+ //当前左侧激活菜单的索引
|
|
|
+ let activeIndex1 = ref(0);
|
|
|
+ let maxY = ref(0);
|
|
|
+ let echartDw = ref('(m³/min)');
|
|
|
+ //通风图表数据
|
|
|
+ const echartDataFc1 = reactive({
|
|
|
maxData: {
|
|
|
- lengedData: '进风量',
|
|
|
- data: []
|
|
|
+ lengedData: '进风量',
|
|
|
+ data: [],
|
|
|
},
|
|
|
minData: {
|
|
|
- lengedData: '回风量',
|
|
|
- data: []
|
|
|
+ lengedData: '回风量',
|
|
|
+ data: [],
|
|
|
},
|
|
|
aveValue: {
|
|
|
- lengedData: '需风量',
|
|
|
- data: []
|
|
|
+ lengedData: '需风量',
|
|
|
+ data: [],
|
|
|
},
|
|
|
xData: [],
|
|
|
-});
|
|
|
-let cardListTf = reactive<any[]>([])
|
|
|
+ });
|
|
|
+ let cardListTf = reactive<any[]>([]);
|
|
|
|
|
|
-// https获取监测数据
|
|
|
-let timer: null | NodeJS.Timeout = null;
|
|
|
-function getMonitor(deviceID, flag?) {
|
|
|
+ // https获取监测数据
|
|
|
+ let timer: null | NodeJS.Timeout = null;
|
|
|
+ function getMonitor(deviceID, flag?) {
|
|
|
timer = setTimeout(
|
|
|
- async () => {
|
|
|
- await getSysWarnList(deviceID, 'vent');
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor(deviceID);
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
+ async () => {
|
|
|
+ await getSysWarnList(deviceID, 'vent');
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor(deviceID);
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
);
|
|
|
-}
|
|
|
-//返回首页
|
|
|
-function getBack() {
|
|
|
- router.push('/monitorChannel/monitor-alarm-home')
|
|
|
-}
|
|
|
-//获取左侧数据列表
|
|
|
-async function getMenuList() {
|
|
|
- let res = await sysTypeWarnList({ type: 'vent' })
|
|
|
- console.log(res, '通风预警监测左侧列表数据-------------')
|
|
|
+ }
|
|
|
+ //返回首页
|
|
|
+ function getBack() {
|
|
|
+ router.push('/monitorChannel/monitor-alarm-home');
|
|
|
+ }
|
|
|
+ //获取左侧数据列表
|
|
|
+ async function getMenuList() {
|
|
|
+ let res = await sysTypeWarnList({ type: 'vent' });
|
|
|
+ console.log(res, '通风预警监测左侧列表数据-------------');
|
|
|
if (res.length != 0) {
|
|
|
- menuList.length = 0
|
|
|
- res.forEach((el) => {
|
|
|
- menuList.push({
|
|
|
- name: el.deviceName,
|
|
|
- warn: '低风险',
|
|
|
- deviceID: el.deviceID,
|
|
|
- strtype: el.deviceType,
|
|
|
- });
|
|
|
+ menuList.length = 0;
|
|
|
+ res.forEach((el) => {
|
|
|
+ menuList.push({
|
|
|
+ name: el.deviceName,
|
|
|
+ warn: '低风险',
|
|
|
+ deviceID: el.deviceID,
|
|
|
+ strtype: el.deviceType,
|
|
|
});
|
|
|
- getMonitor(menuList[0].deviceID, true);
|
|
|
+ });
|
|
|
+ getMonitor(menuList[0].deviceID, true);
|
|
|
}
|
|
|
-}
|
|
|
-//菜单选项切换
|
|
|
-function cardClick(ind, item) {
|
|
|
+ }
|
|
|
+ //菜单选项切换
|
|
|
+ function cardClick(ind, item) {
|
|
|
activeIndex1.value = ind;
|
|
|
clearTimeout(timer);
|
|
|
getMonitor(item.deviceID, true);
|
|
|
-}
|
|
|
-function formatRoundNum(num) {
|
|
|
- let interger = Math.ceil(num)
|
|
|
- let leng = String(interger).length
|
|
|
- return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
|
|
|
-}
|
|
|
-//获取预警详情弹窗右侧数据
|
|
|
-function getSysWarnList(id, type) {
|
|
|
+ }
|
|
|
+ function formatRoundNum(num) {
|
|
|
+ let interger = Math.ceil(num);
|
|
|
+ let leng = String(interger).length;
|
|
|
+ return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
|
|
|
+ }
|
|
|
+ //获取预警详情弹窗右侧数据
|
|
|
+ function getSysWarnList(id, type) {
|
|
|
sysWarn({ sysid: id, type: type }).then((res) => {
|
|
|
- echartDataFc1.maxData.data.length = 0;
|
|
|
- echartDataFc1.minData.data.length = 0;
|
|
|
- echartDataFc1.aveValue.data.length = 0;
|
|
|
- echartDataFc1.xData.length = 0;
|
|
|
- if (JSON.stringify(res) != '{}') {
|
|
|
-
|
|
|
-
|
|
|
- ventilateTopList[0].value = res.jin || '--';
|
|
|
- ventilateTopList[1].value = res.hui || '--';
|
|
|
- ventilateTopList[2].value = res.xufengliang || '--';
|
|
|
- ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
|
|
|
-
|
|
|
- if (res.history.length != 0) {
|
|
|
- res.history.forEach((v) => {
|
|
|
- echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
- echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
- if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
- echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
- } else {
|
|
|
- echartDataFc1.aveValue.data.push(0);
|
|
|
- }
|
|
|
-
|
|
|
- echartDataFc1.xData.push(v.time);
|
|
|
- });
|
|
|
+ echartDataFc1.maxData.data.length = 0;
|
|
|
+ echartDataFc1.minData.data.length = 0;
|
|
|
+ echartDataFc1.aveValue.data.length = 0;
|
|
|
+ echartDataFc1.xData.length = 0;
|
|
|
+ if (JSON.stringify(res) != '{}') {
|
|
|
+ ventilateTopList[0].value = res.jin || '--';
|
|
|
+ ventilateTopList[1].value = res.hui || '--';
|
|
|
+ ventilateTopList[2].value = res.xufengliang || '--';
|
|
|
+ ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
|
|
|
+
|
|
|
+ if (res.history.length != 0) {
|
|
|
+ res.history.forEach((v) => {
|
|
|
+ echartDataFc1.maxData.data.push(parseFloat(v.jin));
|
|
|
+ echartDataFc1.minData.data.push(parseFloat(v.hui));
|
|
|
+ if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
|
|
|
+ echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
|
|
|
+ } else {
|
|
|
+ echartDataFc1.aveValue.data.push(0);
|
|
|
}
|
|
|
|
|
|
- let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
|
|
|
- return acr > cur ? acr : cur
|
|
|
- })
|
|
|
- let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
|
|
|
- return acr1 > cur1 ? acr1 : cur1
|
|
|
- })
|
|
|
- maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2)
|
|
|
+ echartDataFc1.xData.push(v.time);
|
|
|
+ });
|
|
|
}
|
|
|
+
|
|
|
+ let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
|
|
|
+ return acr > cur ? acr : cur;
|
|
|
+ });
|
|
|
+ let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
|
|
|
+ return acr1 > cur1 ? acr1 : cur1;
|
|
|
+ });
|
|
|
+ maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2);
|
|
|
+ }
|
|
|
});
|
|
|
-}
|
|
|
-//获取通风监控测点信息
|
|
|
-async function getWindDeviceList() {
|
|
|
- cardListTf.length = 0
|
|
|
- let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' })
|
|
|
+ }
|
|
|
+ //获取通风监控测点信息
|
|
|
+ async function getWindDeviceList() {
|
|
|
+ cardListTf.length = 0;
|
|
|
+ let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
|
|
|
if (res && res.msgTxt[0]) {
|
|
|
- let list = res.msgTxt[0].datalist || [];
|
|
|
- if (list.length > 0) {
|
|
|
- list.forEach((el: any) => {
|
|
|
- const readData = el.readData;
|
|
|
- el = Object.assign(el, readData);
|
|
|
- cardListTf.push({
|
|
|
- label: '通信状态',
|
|
|
- value: el.netStatus == '0' ? '断开' : '连接',
|
|
|
- listR: [
|
|
|
- { id: 0, label: '安装位置',dw:'', value: el.strinstallpos },
|
|
|
- { id: 1, label: '风量',dw:'(m³/min)', value: el.m3 },
|
|
|
- { id: 2, label: '风速',dw:'(m/s)', value: el.va },
|
|
|
- { id: 4, label: '时间',dw:'', value: el.readTime },
|
|
|
- { id: 3, label: '是否报警',dw:'', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
|
|
|
- ],
|
|
|
- })
|
|
|
- });
|
|
|
- }
|
|
|
+ let list = res.msgTxt[0].datalist || [];
|
|
|
+ if (list.length > 0) {
|
|
|
+ list.forEach((el: any) => {
|
|
|
+ const readData = el.readData;
|
|
|
+ el = Object.assign(el, readData);
|
|
|
+ cardListTf.push({
|
|
|
+ label: '通信状态',
|
|
|
+ value: el.netStatus == '0' ? '断开' : '连接',
|
|
|
+ listR: [
|
|
|
+ { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
|
|
|
+ { id: 1, label: '风量', dw: '(m³/min)', value: el.m3 },
|
|
|
+ { id: 2, label: '风速', dw: '(m/s)', value: el.va },
|
|
|
+ { id: 4, label: '时间', dw: '', value: el.readTime },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: '是否报警',
|
|
|
+ dw: '',
|
|
|
+ value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- getMenuList()
|
|
|
- getWindDeviceList()
|
|
|
-})
|
|
|
-onUnmounted(() => {
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ getMenuList();
|
|
|
+ getWindDeviceList();
|
|
|
+ });
|
|
|
+ onUnmounted(() => {
|
|
|
if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
}
|
|
|
-});
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.ventilateWarn {
|
|
|
+ .ventilateWarn {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 80px 10px 15px 10px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.ventilate-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 50%;
|
|
|
- margin-bottom: 15px;
|
|
|
- background: url('../../../../../assets/images/fire/border.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 50%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: url('../../../../../assets/images/fire/border.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .alarm-menu {
|
|
|
+ height: 100%;
|
|
|
+ width: 15%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .alarm-menu {
|
|
|
- height: 100%;
|
|
|
- width: 15%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .card-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: relative;
|
|
|
+ width: 81%;
|
|
|
+ height: 24%;
|
|
|
+ margin-bottom: 6%;
|
|
|
+ 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: 14px;
|
|
|
+ color: #01fefc;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
|
|
|
- .card-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .btn {
|
|
|
- position: relative;
|
|
|
- width: 81%;
|
|
|
- height: 24%;
|
|
|
- margin-bottom: 6%;
|
|
|
- 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: 14px;
|
|
|
- color: #01fefc;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .warn {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 11px;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- }
|
|
|
- }
|
|
|
+ .warn {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 11px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn1 {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 24%;
|
|
|
+ margin-bottom: 6%;
|
|
|
+ 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: 14px;
|
|
|
+ color: #01fefc;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-62%, 0);
|
|
|
+ }
|
|
|
|
|
|
- .btn1 {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 24%;
|
|
|
- margin-bottom: 6%;
|
|
|
- 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: 14px;
|
|
|
- color: #01fefc;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-62%, 0);
|
|
|
- }
|
|
|
-
|
|
|
- .warn {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 11px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-60%, 0);
|
|
|
- }
|
|
|
- }
|
|
|
+ .warn {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 11px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate(-60%, 0);
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .ventilate-content {
|
|
|
+ height: 100%;
|
|
|
+ width: 85%;
|
|
|
+ padding: 10px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .work-nav {
|
|
|
+ height: 30%;
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 3px solid;
|
|
|
+ border-image: linear-gradient(to bottom, rgba(45, 116, 160, 1), rgba(45, 116, 160, 0.2), rgba(45, 116, 160, 1)) 1 1 1;
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ flex: 0.6;
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-size: 16px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- .ventilate-content {
|
|
|
- height: 100%;
|
|
|
- width: 85%;
|
|
|
- padding: 10px 0px;
|
|
|
- box-sizing: border-box;
|
|
|
+ &:nth-child(5) {
|
|
|
+ flex: 1.4;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .work-nav {
|
|
|
- height: 30%;
|
|
|
+ .percent {
|
|
|
width: 100%;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ height: 82%;
|
|
|
+ padding: 0px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 3px solid;
|
|
|
- border-image: linear-gradient(to bottom, rgba(45, 116, 160, 1), rgba(45, 116, 160, .2), rgba(45, 116, 160, 1)) 1 1 1;
|
|
|
-
|
|
|
- .nav {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(3) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(4) {
|
|
|
- flex: 0.6;
|
|
|
- color: #b3b8cc;
|
|
|
- font-size: 16px;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(5) {
|
|
|
- flex: 1.4;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .percent {
|
|
|
- width: 100%;
|
|
|
- height: 82%;
|
|
|
- padding: 0px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 14px;
|
|
|
- padding: 5px 0px;
|
|
|
- color: #b3b8cc;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- span {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pic {
|
|
|
- width: 30%;
|
|
|
- height: 82%;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- height: 82%;
|
|
|
- margin-left: 15px;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- padding: 5px 0px;
|
|
|
- color: #b3b8cc;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
- .nav:nth-child(1) .pic {
|
|
|
- background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ .value {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .nav:nth-child(2) .pic {
|
|
|
- background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ span {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .nav:nth-child(3) .pic {
|
|
|
- background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ .pic {
|
|
|
+ width: 30%;
|
|
|
+ height: 82%;
|
|
|
}
|
|
|
|
|
|
- .bot-area {
|
|
|
- height: calc(100% - 30% - 3px);
|
|
|
- padding: 10px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
+ .content {
|
|
|
+ height: 82%;
|
|
|
+ margin-left: 15px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .title-t {
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text-t {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- .echart-boxd {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 30px);
|
|
|
+ &:nth-child(1) {
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
}
|
|
|
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav:nth-child(1) .pic {
|
|
|
+ background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
+ .nav:nth-child(2) .pic {
|
|
|
+ background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav:nth-child(3) .pic {
|
|
|
+ background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .bot-area {
|
|
|
+ height: calc(100% - 30% - 3px);
|
|
|
+ padding: 10px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .title-t {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text-t {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .echart-boxd {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.ventilate-bottom {
|
|
|
- height: calc(50% - 15px);
|
|
|
- background: url('../../../../../assets/images/fire/border.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ height: calc(50% - 15px);
|
|
|
+ background: url('../../../../../assets/images/fire/border.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .bot-area {
|
|
|
+ height: 100%;
|
|
|
padding: 10px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
- .bot-area {
|
|
|
- height: 100%;
|
|
|
- padding: 10px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ .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 {
|
|
|
+ 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: 24%;
|
|
|
+ height: 128px;
|
|
|
+ margin: 0px 9px 10px 9px;
|
|
|
+ background: url(/src/assets/images/fire/bot-area.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;
|
|
|
+ .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;
|
|
|
|
|
|
- .text-b {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .label-l {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-l {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3df6ff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .content-b {
|
|
|
- height: calc(100% - 40px);
|
|
|
+ .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: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .card-b {
|
|
|
- position: relative;
|
|
|
- width: 24%;
|
|
|
- height: 128px;
|
|
|
- margin: 0px 9px 10px 9px;
|
|
|
- background: url(/src/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 {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 7px;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .value-l {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 50px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #3df6ff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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);
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- /* 不换行 */
|
|
|
-
|
|
|
- /* 超出部分隐藏 */
|
|
|
- text-overflow: ellipsis;
|
|
|
- /* 使用省略符号 */
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-f {
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
-
|
|
|
- .status-l {
|
|
|
- color: #3df6ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ display: inline-block;
|
|
|
+ width: calc(100% - 68px);
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 不换行 */
|
|
|
+
|
|
|
+ /* 超出部分隐藏 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 使用省略符号 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+ }
|
|
|
+</style>
|
hongrunxia