|
|
@@ -1,45 +1,71 @@
|
|
|
<template>
|
|
|
<customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 粉尘监测预警 </customHeader>
|
|
|
<div class="dustWarn">
|
|
|
- <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 class="top-dust">
|
|
|
+ <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>
|
|
|
- <div class="dust-content">
|
|
|
- <div class="top-area">
|
|
|
- <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList"
|
|
|
- :key="index" @click="topAreaClick(index)">
|
|
|
- <div class="top-title">{{ item.title }}</div>
|
|
|
- <div class="top-content">
|
|
|
- <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
|
|
|
- <span class="item-label">{{ items.label }}</span>
|
|
|
- <span class="item-value">{{ items.value }}</span>
|
|
|
+ <div class="dust-content">
|
|
|
+ <div class="content-left">
|
|
|
+ <div :class="activeIndex == index ? 'content-left-item' : 'content-left-item1'"
|
|
|
+ v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
|
|
|
+ <div class="content-title">{{ item.title }}</div>
|
|
|
+ <div class="content-items" v-for="(ite, ind) in item.content" :key="ind">
|
|
|
+ <span>{{ ite.label }}</span>
|
|
|
+ <span style="color:#01fefc">{{ ite.value }}</span>
|
|
|
</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="title-t">
|
|
|
+ <div class="text-t">粉尘信息状态监测</div>
|
|
|
+ </div>
|
|
|
+ <div class="echart-boxd">
|
|
|
+ <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" :gridV="gridV" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="bot-dust">
|
|
|
<div class="bot-area">
|
|
|
- <div class="title-t">
|
|
|
- <div class="text-t">粉尘信息状态监测</div>
|
|
|
+ <div class="title-b">
|
|
|
+ <div class="text-b">粉尘监控测点信息</div>
|
|
|
</div>
|
|
|
- <div class="echart-boxd">
|
|
|
- <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" />
|
|
|
+ <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 == 1 ? '异常' : 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 { sysTypeWarnList, sysWarn } from '../common.api'
|
|
|
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
|
+import { sysTypeWarnList, sysWarn, getDevice } from '../common.api'
|
|
|
import echartLine from '../common/echartLine.vue';
|
|
|
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
@@ -65,6 +91,14 @@ let echartDataFc = reactive({
|
|
|
});
|
|
|
let maxY = ref(0);
|
|
|
let echartDw = ref('(mg/m³)');
|
|
|
+let gridV = reactive({
|
|
|
+ top: '12%',
|
|
|
+ left: '1%',
|
|
|
+ bottom: '5%',
|
|
|
+ right: '2%',
|
|
|
+ containLabel: true,
|
|
|
+})
|
|
|
+let cardListTf = reactive<any[]>([])
|
|
|
let router = useRouter()
|
|
|
|
|
|
// https获取监测数据
|
|
|
@@ -81,12 +115,31 @@ function getMonitor(deviceID, flag?) {
|
|
|
flag ? 0 : 1000
|
|
|
);
|
|
|
}
|
|
|
-
|
|
|
//返回首页
|
|
|
function getBack() {
|
|
|
router.push('/monitorChannel/monitor-alarm-home')
|
|
|
}
|
|
|
-
|
|
|
+//菜单选项切换
|
|
|
+function cardClick(ind, item) {
|
|
|
+ activeIndex1.value = ind;
|
|
|
+ clearTimeout(timer);
|
|
|
+ getMonitor(item.deviceID, true);
|
|
|
+}
|
|
|
+//顶部区域选项切换
|
|
|
+function topAreaClick(index) {
|
|
|
+ activeIndex.value = index;
|
|
|
+ echartDataFc.maxData.data.length = 0;
|
|
|
+ echartDataFc.xData.length = 0;
|
|
|
+ choiceData[index].history.forEach((el) => {
|
|
|
+ echartDataFc.maxData.data.push(el.dustval);
|
|
|
+ echartDataFc.xData.push(el.time);
|
|
|
+ });
|
|
|
+}
|
|
|
+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);
|
|
|
+}
|
|
|
//获取左侧菜单列表
|
|
|
async function getMenuList() {
|
|
|
let res = await sysTypeWarnList({ type: 'dust' })
|
|
|
@@ -146,31 +199,34 @@ function getSysWarnList(id, type) {
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
-//菜单选项切换
|
|
|
-function cardClick(ind, item) {
|
|
|
- activeIndex1.value = ind;
|
|
|
- clearTimeout(timer);
|
|
|
- getMonitor(item.deviceID, true);
|
|
|
-}
|
|
|
-
|
|
|
-//顶部区域选项切换
|
|
|
-function topAreaClick(index) {
|
|
|
- activeIndex.value = index;
|
|
|
- echartDataFc.maxData.data.length = 0;
|
|
|
- echartDataFc.xData.length = 0;
|
|
|
- choiceData[index].history.forEach((el) => {
|
|
|
- echartDataFc.maxData.data.push(el.dustval);
|
|
|
- echartDataFc.xData.push(el.time);
|
|
|
- });
|
|
|
-}
|
|
|
-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);
|
|
|
+//获取粉尘监控测点信息
|
|
|
+async function getWindDeviceList() {
|
|
|
+ cardListTf.length = 0
|
|
|
+ let res = await getDevice({ devicetype: 'dusting', 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:'(mg/m³)', value: el.dustval },
|
|
|
+ { id: 2, label: '巷道湿度',dw:'(RH)', value: el.humidity },
|
|
|
+ { id: 4, label: '巷道温度',dw:'(℃)', value: el.temperature },
|
|
|
+ { id: 3, label: '是否报警',dw:'', value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测' },
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
getMenuList()
|
|
|
+ getWindDeviceList()
|
|
|
})
|
|
|
onUnmounted(() => {
|
|
|
if (timer) {
|
|
|
@@ -186,263 +242,369 @@ onUnmounted(() => {
|
|
|
height: 100%;
|
|
|
padding: 80px 10px 15px 10px;
|
|
|
box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
- .alarm-menu {
|
|
|
- height: 100%;
|
|
|
- width: 15%;
|
|
|
+ .top-dust {
|
|
|
+ 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%;
|
|
|
|
|
|
- .card-btn {
|
|
|
- width: 100%;
|
|
|
+ .alarm-menu {
|
|
|
height: 100%;
|
|
|
- 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);
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 15%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .btn1 {
|
|
|
- position: relative;
|
|
|
+ .card-btn {
|
|
|
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);
|
|
|
+ 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 {
|
|
|
+ .btn1 {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 14px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- transform: translate(-60%, 0);
|
|
|
+ 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);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .dust-content {
|
|
|
- width: calc(85% - 10px);
|
|
|
- height: 100%;
|
|
|
- margin-left: 10px;
|
|
|
- padding: 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: url('../../../../../assets/images/fire/border.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .top-area {
|
|
|
- width: 100%;
|
|
|
- height: 24%;
|
|
|
+ .dust-content {
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-end;
|
|
|
- margin-bottom: 10px;
|
|
|
- overflow-x: auto;
|
|
|
- transform: scaleY(-1);
|
|
|
-
|
|
|
- .top-box {
|
|
|
- position: relative;
|
|
|
- width: 474px;
|
|
|
- height: 88%;
|
|
|
- flex-shrink: 0;
|
|
|
- background: url('../../../../../assets/images/fire/fc-t.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin: 0px 20px;
|
|
|
- transform: scaleY(-1);
|
|
|
-
|
|
|
- .top-title {
|
|
|
- width: 80%;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 8px;
|
|
|
- font-size: 14px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+ width: 85%;
|
|
|
+ padding: 10px 0px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .top-content {
|
|
|
- position: absolute;
|
|
|
- top: 17%;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 83%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- cursor: pointer;
|
|
|
+ .content-left {
|
|
|
+ width: 280px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: flex-start;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+
|
|
|
+ .content-left-item {
|
|
|
+ position: relative;
|
|
|
+ width: 272px;
|
|
|
+ height: 173px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: url('../../../../../assets/images/fire/dust-choice.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 5px 0px;
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-78%, 0);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .content-item {
|
|
|
- position: relative;
|
|
|
- width: 50%;
|
|
|
- height: 50%;
|
|
|
- background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
|
|
|
- background-size: 88% 50%;
|
|
|
+ .content-items {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-54%, 0);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 240px;
|
|
|
+ height: 26px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0px 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('../../../../../assets/images/fire/dust-content.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ top: 32px;
|
|
|
+ }
|
|
|
|
|
|
- .item-label {
|
|
|
- position: absolute;
|
|
|
- left: 14%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -44%);
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- // font-size: 12px;
|
|
|
+ &:nth-child(3) {
|
|
|
+ top: 67px;
|
|
|
}
|
|
|
|
|
|
- .item-value {
|
|
|
- position: absolute;
|
|
|
- right: 14%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -38%);
|
|
|
- // font-size: 12px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #3df6ff;
|
|
|
+ &:nth-child(4) {
|
|
|
+ top: 102px;
|
|
|
}
|
|
|
+
|
|
|
+ &:nth-child(5) {
|
|
|
+ top: 136px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .top-box1 {
|
|
|
- position: relative;
|
|
|
- width: 474px;
|
|
|
- height: 100%;
|
|
|
- flex-shrink: 0;
|
|
|
- background: url('../../../../../assets/images/fire/fc-t1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin: 0px 20px;
|
|
|
- transform: scaleY(-1);
|
|
|
-
|
|
|
- .top-title {
|
|
|
- width: 80%;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 8px;
|
|
|
- font-size: 14px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .content-left-item1 {
|
|
|
+ position: relative;
|
|
|
+ width: 250px;
|
|
|
+ height: 173px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: url('../../../../../assets/images/fire/dust-choice1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 5px 0px;
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-60%, 0);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .top-content {
|
|
|
- position: absolute;
|
|
|
- top: 17%;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 83%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding-bottom: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- cursor: pointer;
|
|
|
+ .content-items {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-54%, 0);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 215px;
|
|
|
+ height: 26px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0px 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url('../../../../../assets/images/fire/dust-content.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ top: 32px;
|
|
|
+ }
|
|
|
|
|
|
- .content-item {
|
|
|
- position: relative;
|
|
|
- width: 50%;
|
|
|
- height: 50%;
|
|
|
- background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
|
|
|
- background-size: 88% 50%;
|
|
|
+ &:nth-child(3) {
|
|
|
+ top: 67px;
|
|
|
+ }
|
|
|
|
|
|
- .item-label {
|
|
|
- position: absolute;
|
|
|
- left: 14%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -44%);
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- // font-size: 12px;
|
|
|
+ &:nth-child(4) {
|
|
|
+ top: 102px;
|
|
|
}
|
|
|
|
|
|
- .item-value {
|
|
|
- position: absolute;
|
|
|
- right: 14%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(0, -38%);
|
|
|
- // font-size: 12px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #3df6ff;
|
|
|
+ &:nth-child(5) {
|
|
|
+ top: 136px;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .content-right {
|
|
|
+ width: calc(100% - 280px);
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .echart-boxd {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .bot-dust {
|
|
|
+ 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: calc(76% - 10px);
|
|
|
+ height: 100%;
|
|
|
padding: 10px;
|
|
|
background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
- .title-t {
|
|
|
+ .title-b {
|
|
|
height: 30px;
|
|
|
margin-bottom: 10px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
- .text-t {
|
|
|
+ .text-b {
|
|
|
font-family: 'douyuFont';
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .echart-boxd {
|
|
|
- width: 100%;
|
|
|
+ .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%;
|
|
|
+
|
|
|
+ .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);
|
|
|
+ color: #01fefc;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 不换行 */
|
|
|
+
|
|
|
+ /* 超出部分隐藏 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 使用省略符号 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-f {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-l {
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
</style>
|
