|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="mainWell">
|
|
|
- <!-- 光钎测温 -->
|
|
|
+ <!-- 光钎测温-->
|
|
|
<div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
|
|
|
<div class="nav" v-for="(item, index) in topOutList" :key="index">
|
|
|
<div class="pic" v-if="item.imgSrc">
|
|
|
@@ -13,7 +13,7 @@
|
|
|
<div class="text" v-if="item.text">{{ item.text }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 束管监测 -->
|
|
|
+ <!-- 束管监测 -->
|
|
|
<div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
|
|
|
<div class="content-box">
|
|
|
<div class="contents">
|
|
|
@@ -21,16 +21,6 @@
|
|
|
<span class="text">{{ topContent.temperature }}</span>
|
|
|
<span class="dw">°C</span>
|
|
|
</div>
|
|
|
- <!-- <div class="contents">
|
|
|
- <div class="text">
|
|
|
- <span class="text-label">位置 : </span>
|
|
|
- <span class="text-value">{{ topContent.position }}</span>
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <span class="text-label">时间 : </span>
|
|
|
- <span class="text-value">{{ topContent.time }}</span>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
<div class="content-box">
|
|
|
<div class="text1">{{ topContent.warn }}</div>
|
|
|
@@ -38,139 +28,168 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="center-box" v-if="strType != 'sys_coalseam'">
|
|
|
- <div class="content-box" v-for="(items, index) in tabList" :key="index">
|
|
|
- <div class="title">
|
|
|
- <span class="title-label">{{ items.label }}</span>
|
|
|
- <span class="details">{{ `${items.details}>>` }}</span>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="container-title">{{ tabLists.yw }}</div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="container-content-box" v-for="(item, index) in monitorlistYw" :key="index">
|
|
|
+ <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
|
|
|
+ <div class="content-box-text">
|
|
|
+ <div class="box-text-z">
|
|
|
+ <div class="text-label">值</div>
|
|
|
+ <div class="text-val">{{ item.val || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-zt">
|
|
|
+ <div class="text-label">状态</div>
|
|
|
+ <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-time">
|
|
|
+ <div class="text-label">时间</div>
|
|
|
+ <div class="text-val">{{ item.readTime || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="container-title">{{ tabLists.pl }}</div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="container-content-box" v-for="(item, index) in monitorlistPl" :key="index">
|
|
|
+ <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
|
|
|
+ <div class="content-box-text">
|
|
|
+ <div class="box-text-z">
|
|
|
+ <div class="text-label">值</div>
|
|
|
+ <div class="text-val">{{ item.readData.sprayval || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-zt">
|
|
|
+ <div class="text-label">状态</div>
|
|
|
+ <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-time">
|
|
|
+ <div class="text-label">时间</div>
|
|
|
+ <div class="text-val">{{ item.readTime || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="content">
|
|
|
- <a-table
|
|
|
- v-if="index == 0"
|
|
|
- ref="table"
|
|
|
- size="small"
|
|
|
- :scroll="{ x: 0, y: 273 }"
|
|
|
- :columns="columnsSmoke"
|
|
|
- :data-source="monitorlistYw"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
- <template #bodyCell="{ column, text }">
|
|
|
- <template v-if="column.dataIndex === 'warnLevel_str'">
|
|
|
- <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <span slot="action" slot-scope="text, record"></span>
|
|
|
- </a-table>
|
|
|
- <a-table
|
|
|
- v-if="index == 1"
|
|
|
- ref="table1"
|
|
|
- size="small"
|
|
|
- :columns="columns"
|
|
|
- :data-source="monitorlistHy"
|
|
|
- :pagination="false"
|
|
|
- :scroll="{ y: 273 }"
|
|
|
- >
|
|
|
- <template #bodyCell="{ column, text }">
|
|
|
- <template v-if="column.dataIndex === 'warnLevel_str'">
|
|
|
- <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
- <a-table
|
|
|
- v-if="index == 2"
|
|
|
- ref="table"
|
|
|
- size="small"
|
|
|
- :scroll="{ y: 273 }"
|
|
|
- :columns="columns"
|
|
|
- :data-source="monitorlistPl"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
- <template #bodyCell="{ column, text }">
|
|
|
- <template v-if="column.dataIndex === 'warnLevel_str'">
|
|
|
- <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="container-title">{{ tabLists.co }}</div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="container-content-box" v-for="(item, index) in monitorlistHy" :key="index">
|
|
|
+ <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
|
|
|
+ <div class="content-box-text">
|
|
|
+
|
|
|
+ <div class="box-text-zt1">
|
|
|
+ <div class="text-label-hy">状态</div>
|
|
|
+ <div :class="item.warnLevel_str == '报警' ? 'text-val-hy1' : 'text-val-hy2'">{{ item.warnLevel_str || '--'
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-time1">
|
|
|
+ <div class="text-label-hy">时间</div>
|
|
|
+ <div class="text-val-hy">{{ item.readTime || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
|
|
|
- <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'" :key="index">
|
|
|
- <div class="title">
|
|
|
- <span class="title-label">{{ items.label }}</span>
|
|
|
- <span class="details">{{ `${items.details}>>` }}</span>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="container-title">{{ tabLists.yw }}</div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="container-content-box" v-for="(item, index) in monitorlistYw" :key="index">
|
|
|
+ <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
|
|
|
+ <div class="content-box-text">
|
|
|
+ <div class="box-text-z">
|
|
|
+ <div class="text-label">值</div>
|
|
|
+ <div class="text-val">{{ item.val || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-zt">
|
|
|
+ <div class="text-label">状态</div>
|
|
|
+ <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-time">
|
|
|
+ <div class="text-label">时间</div>
|
|
|
+ <div class="text-val">{{ item.readTime || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="container-title">{{ tabLists.wd }}</div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="container-content-box" v-for="(item, index) in monitorlistWd" :key="index">
|
|
|
+ <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
|
|
|
+ <div class="content-box-text">
|
|
|
+ <div class="box-text-z">
|
|
|
+ <div class="text-label">值</div>
|
|
|
+ <div class="text-val">{{ item.val || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-zt">
|
|
|
+ <div class="text-label">状态</div>
|
|
|
+ <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-time">
|
|
|
+ <div class="text-label">时间</div>
|
|
|
+ <div class="text-val">{{ item.readTime || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="container-title">{{ tabLists.pl }}</div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="container-content-box" v-for="(item, index) in monitorlistPl" :key="index">
|
|
|
+ <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
|
|
|
+ <div class="content-box-text">
|
|
|
+ <div class="box-text-z">
|
|
|
+ <div class="text-label">值</div>
|
|
|
+ <div class="text-val">{{ item.readData.sprayval || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-zt">
|
|
|
+ <div class="text-label">状态</div>
|
|
|
+ <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str || '--' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-time">
|
|
|
+ <div class="text-label">时间</div>
|
|
|
+ <div class="text-val">{{ item.readTime || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="content">
|
|
|
- <a-table
|
|
|
- v-if="index == 0"
|
|
|
- ref="table"
|
|
|
- size="small"
|
|
|
- :scroll="{ y: listData.fiber.length != 0 ? 290 : 295 }"
|
|
|
- :columns="columnsSmoke"
|
|
|
- :data-source="monitorlistYw"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
- <template #bodyCell="{ column, text }">
|
|
|
- <template v-if="column.dataIndex === 'warnLevel_str'">
|
|
|
- <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <span slot="action" slot-scope="text, record"></span>
|
|
|
- </a-table>
|
|
|
-
|
|
|
- <a-table
|
|
|
- v-if="index == 1"
|
|
|
- ref="table"
|
|
|
- size="small"
|
|
|
- :scroll="{ y: listData.fiber.length != 0 ? 290 : 295 }"
|
|
|
- :columns="columnsSmoke"
|
|
|
- :data-source="monitorlistWd"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
- <template #bodyCell="{ column, text }">
|
|
|
- <template v-if="column.dataIndex === 'warnLevel_str'">
|
|
|
- <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
- <a-table
|
|
|
- v-if="index == 2"
|
|
|
- ref="table"
|
|
|
- size="small"
|
|
|
- :scroll="{ y: listData.fiber.length != 0 ? 290 : 295 }"
|
|
|
- :columns="columns"
|
|
|
- :data-source="monitorlistPl"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
- <template #bodyCell="{ column, text }">
|
|
|
- <template v-if="column.dataIndex === 'warnLevel_str'">
|
|
|
- <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
- <a-table
|
|
|
- v-if="index == 3"
|
|
|
- ref="table1"
|
|
|
- size="small"
|
|
|
- :columns="columns"
|
|
|
- :data-source="monitorlistHy"
|
|
|
- :pagination="false"
|
|
|
- :scroll="{ y: listData.fiber.length != 0 ? 290 : 295 }"
|
|
|
- >
|
|
|
- <template #bodyCell="{ column, text }">
|
|
|
- <template v-if="column.dataIndex === 'warnLevel_str'">
|
|
|
- <div :style="{ color: text == '报警' ? '#ff0000' : '#91e609' }">{{ text }}</div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <span slot="action" slot-scope="text, record"> </span>
|
|
|
- </a-table>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="container-title">{{ tabLists.co }}</div>
|
|
|
+ <div class="container-content">
|
|
|
+ <div class="container-content-box" v-for="(item, index) in monitorlistHy" :key="index">
|
|
|
+ <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
|
|
|
+ <div class="content-box-text">
|
|
|
+
|
|
|
+ <div class="box-text-zt1">
|
|
|
+ <div class="text-label-hy">状态</div>
|
|
|
+ <div :class="item.warnLevel_str == '报警' ? 'text-val-hy1' : 'text-val-hy2'">{{ item.warnLevel_str || '--'
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-text-time1">
|
|
|
+ <div class="text-label-hy">时间</div>
|
|
|
+ <div class="text-val-hy">{{ item.readTime || '--' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
|
|
|
+ <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
|
|
|
+ v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
|
|
|
<div class="footer-title">
|
|
|
<div class="echart-label">光纤测温系统实时温度监测</div>
|
|
|
</div>
|
|
|
@@ -178,7 +197,9 @@
|
|
|
<echartLine2 :echartDataWd="echartDataWd" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
|
|
|
+
|
|
|
+ <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
|
|
|
+ v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
|
|
|
<div class="footer-title">
|
|
|
<div class="echart-label">光纤测温系统实时温度监测</div>
|
|
|
</div>
|
|
|
@@ -187,16 +208,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 束管监测 -->
|
|
|
+ <!-- 束管监测 -->
|
|
|
<div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
|
|
|
<div class="title-b">采空区密闭参数</div>
|
|
|
<div class="card-btn">
|
|
|
- <div
|
|
|
- :class="activeIndex == index ? 'content-box1' : 'content-box'"
|
|
|
- v-for="(item, index) in mbList"
|
|
|
- :key="index"
|
|
|
- @click="btnClick(item, index)"
|
|
|
- >
|
|
|
+ <div :class="activeIndex == index ? 'content-box1' : 'content-box'" v-for="(item, index) in mbList" :key="index"
|
|
|
+ @click="btnClick(item, index)">
|
|
|
<div class="btn-label">
|
|
|
<span>{{ item.label }}</span>
|
|
|
<span>{{ item.dw }}</span>
|
|
|
@@ -228,969 +245,1327 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, computed, reactive, watch, defineProps } from 'vue';
|
|
|
- import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
|
|
|
- import imgUrl from '/@/assets/images/fire/pie.png';
|
|
|
- import echartLine2 from './echartLine2.vue';
|
|
|
- import echartLine1 from './echartLine1.vue';
|
|
|
-
|
|
|
- let props = defineProps({
|
|
|
- listData: Object,
|
|
|
- strType: String,
|
|
|
- });
|
|
|
-
|
|
|
- //束管监测-顶部区域数据
|
|
|
- let topContent = reactive({
|
|
|
- temperature: '0',
|
|
|
- position: '',
|
|
|
- time: '',
|
|
|
- warn: '',
|
|
|
- });
|
|
|
- //束管监测当前密闭参数激活选项
|
|
|
- let activeIndex = ref(0);
|
|
|
- //束管监测当前激活密闭参数类型
|
|
|
- let type = ref('O₂');
|
|
|
- //束管监测密闭参数列表
|
|
|
- let mbList = reactive([
|
|
|
- {
|
|
|
- label: 'O₂',
|
|
|
- dw: '(%)',
|
|
|
- label1: '浓度',
|
|
|
- label2: '时间',
|
|
|
- label3: '位置',
|
|
|
- nd: 0,
|
|
|
- time1: '',
|
|
|
- address: '',
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'CO',
|
|
|
- dw: '(ppm)',
|
|
|
- label1: '浓度',
|
|
|
- label2: '时间',
|
|
|
- label3: '位置',
|
|
|
- nd: 0,
|
|
|
- time1: '',
|
|
|
- address: '',
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'CO₂',
|
|
|
- dw: '(%)',
|
|
|
- label1: '浓度',
|
|
|
- label2: '时间',
|
|
|
- label3: '位置',
|
|
|
- nd: 0,
|
|
|
- time1: '',
|
|
|
- address: '',
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'CH₄',
|
|
|
- dw: '(%)',
|
|
|
- label1: '浓度',
|
|
|
- label2: '时间',
|
|
|
- label3: '位置',
|
|
|
- nd: 0,
|
|
|
- time1: '',
|
|
|
- address: '',
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'C₂H₂',
|
|
|
- dw: '(ppm)',
|
|
|
- label1: '浓度',
|
|
|
- label2: '时间',
|
|
|
- label3: '位置',
|
|
|
- nd: 0,
|
|
|
- time1: '',
|
|
|
- address: '',
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'C₂H₄',
|
|
|
- dw: '(ppm)',
|
|
|
- label1: '浓度',
|
|
|
- label2: '时间',
|
|
|
- label3: '位置',
|
|
|
- nd: 0,
|
|
|
- time1: '',
|
|
|
- address: '',
|
|
|
- },
|
|
|
- ]);
|
|
|
- let echartDataSg1 = reactive({
|
|
|
- xData: [],
|
|
|
- yData: [],
|
|
|
- lengedData: 'O₂',
|
|
|
- lengedDataName: '(%)',
|
|
|
- });
|
|
|
- let echartDataSgList = reactive<any[]>([]);
|
|
|
-
|
|
|
- //外因火灾温度监测-图表数据
|
|
|
- let echartDataWd = reactive({
|
|
|
- xData: [],
|
|
|
- curData: {
|
|
|
- lengedData: '实时温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- maxData: {
|
|
|
- lengedData: '最大温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- minData: {
|
|
|
- lengedData: '最小温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- avgData: {
|
|
|
- lengedData: '平均温度',
|
|
|
- data: [],
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- //烟雾传感器列表数据
|
|
|
- let monitorlistYw = reactive([]);
|
|
|
-
|
|
|
- //火焰传感器列表数据
|
|
|
- let monitorlistHy = reactive([]);
|
|
|
-
|
|
|
- //喷淋装置列表数据
|
|
|
- let monitorlistPl = reactive([]);
|
|
|
-
|
|
|
- //温度传感器列表数据
|
|
|
- let monitorlistWd = reactive([]);
|
|
|
-
|
|
|
- //束管监测密闭参数选项切换
|
|
|
- function btnClick(item, ind) {
|
|
|
- activeIndex.value = ind;
|
|
|
- type.value = item.label;
|
|
|
+import { ref, computed, reactive, watch, defineProps } from 'vue';
|
|
|
+import { topOutList, tabLists, } from '../common.data';
|
|
|
+import imgUrl from '/@/assets/images/fire/pie.png';
|
|
|
+import echartLine2 from './echartLine2.vue';
|
|
|
+import echartLine1 from './echartLine1.vue';
|
|
|
+
|
|
|
+let props = defineProps({
|
|
|
+ listData: Object,
|
|
|
+ strType: String,
|
|
|
+});
|
|
|
+
|
|
|
+//束管监测-顶部区域数据
|
|
|
+let topContent = reactive({
|
|
|
+ temperature: '0',
|
|
|
+ position: '',
|
|
|
+ time: '',
|
|
|
+ warn: '',
|
|
|
+});
|
|
|
+//束管监测当前密闭参数激活选项
|
|
|
+let activeIndex = ref(0);
|
|
|
+//束管监测当前激活密闭参数类型
|
|
|
+let type = ref('O₂');
|
|
|
+//束管监测密闭参数列表
|
|
|
+let mbList = reactive([
|
|
|
+ {
|
|
|
+ label: 'O₂',
|
|
|
+ dw: '(%)',
|
|
|
+ label1: '浓度',
|
|
|
+ label2: '时间',
|
|
|
+ label3: '位置',
|
|
|
+ nd: 0,
|
|
|
+ time1: '',
|
|
|
+ address: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'CO',
|
|
|
+ dw: '(ppm)',
|
|
|
+ label1: '浓度',
|
|
|
+ label2: '时间',
|
|
|
+ label3: '位置',
|
|
|
+ nd: 0,
|
|
|
+ time1: '',
|
|
|
+ address: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'CO₂',
|
|
|
+ dw: '(%)',
|
|
|
+ label1: '浓度',
|
|
|
+ label2: '时间',
|
|
|
+ label3: '位置',
|
|
|
+ nd: 0,
|
|
|
+ time1: '',
|
|
|
+ address: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'CH₄',
|
|
|
+ dw: '(%)',
|
|
|
+ label1: '浓度',
|
|
|
+ label2: '时间',
|
|
|
+ label3: '位置',
|
|
|
+ nd: 0,
|
|
|
+ time1: '',
|
|
|
+ address: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'C₂H₂',
|
|
|
+ dw: '(ppm)',
|
|
|
+ label1: '浓度',
|
|
|
+ label2: '时间',
|
|
|
+ label3: '位置',
|
|
|
+ nd: 0,
|
|
|
+ time1: '',
|
|
|
+ address: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'C₂H₄',
|
|
|
+ dw: '(ppm)',
|
|
|
+ label1: '浓度',
|
|
|
+ label2: '时间',
|
|
|
+ label3: '位置',
|
|
|
+ nd: 0,
|
|
|
+ time1: '',
|
|
|
+ address: '',
|
|
|
+ },
|
|
|
+]);
|
|
|
+let echartDataSg1 = reactive({
|
|
|
+ xData: [],
|
|
|
+ yData: [],
|
|
|
+ lengedData: 'O₂',
|
|
|
+ lengedDataName: '(%)',
|
|
|
+});
|
|
|
+let echartDataSgList = reactive<any[]>([]);
|
|
|
+
|
|
|
+//外因火灾温度监测-图表数据
|
|
|
+let echartDataWd = reactive({
|
|
|
+ xData: [],
|
|
|
+ curData: {
|
|
|
+ lengedData: '实时温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ maxData: {
|
|
|
+ lengedData: '最大温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ minData: {
|
|
|
+ lengedData: '最小温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ avgData: {
|
|
|
+ lengedData: '平均温度',
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+//烟雾传感器列表数据
|
|
|
+let monitorlistYw = reactive([]);
|
|
|
+
|
|
|
+//火焰传感器列表数据
|
|
|
+let monitorlistHy = reactive([]);
|
|
|
+
|
|
|
+//喷淋装置列表数据
|
|
|
+let monitorlistPl = reactive([]);
|
|
|
+
|
|
|
+//温度传感器列表数据
|
|
|
+let monitorlistWd = reactive([]);
|
|
|
+
|
|
|
+//束管监测密闭参数选项切换
|
|
|
+function btnClick(item, ind) {
|
|
|
+ activeIndex.value = ind;
|
|
|
+ type.value = item.label;
|
|
|
+ echartDataSg1.xData.length = 0;
|
|
|
+ echartDataSg1.yData.length = 0;
|
|
|
+ echartDataSg1.lengedData = type.value;
|
|
|
+ echartDataSg1.lengedDataName = item.dw;
|
|
|
+
|
|
|
+ switch (type.value) {
|
|
|
+ case 'O₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg1.xData.push(el.time);
|
|
|
+ echartDataSg1.yData.push(el.o2val);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'C₂H₄':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg1.xData.push(el.time);
|
|
|
+ echartDataSg1.yData.push(el.ch2val);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'CO':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg1.xData.push(el.time);
|
|
|
+ echartDataSg1.yData.push(el.coval);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'CH₄':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg1.xData.push(el.time);
|
|
|
+ echartDataSg1.yData.push(el.gasval);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'CO₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg1.xData.push(el.time);
|
|
|
+ echartDataSg1.yData.push(el.co2val);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 'C₂H₂':
|
|
|
+ echartDataSgList.forEach((el) => {
|
|
|
+ echartDataSg1.xData.push(el.time);
|
|
|
+ echartDataSg1.yData.push(el.chval);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.listData,
|
|
|
+ (val) => {
|
|
|
+ console.log(val, 'val---------------');
|
|
|
+ props.listData = val;
|
|
|
+ if (JSON.stringify(val) === '{}') return;
|
|
|
echartDataSg1.xData.length = 0;
|
|
|
echartDataSg1.yData.length = 0;
|
|
|
- echartDataSg1.lengedData = type.value;
|
|
|
- echartDataSg1.lengedDataName = item.dw;
|
|
|
-
|
|
|
- switch (type.value) {
|
|
|
- case 'O₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.o2val);
|
|
|
- });
|
|
|
- break;
|
|
|
- case 'C₂H₄':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.ch2val);
|
|
|
- });
|
|
|
- break;
|
|
|
- case 'CO':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.coval);
|
|
|
- });
|
|
|
- break;
|
|
|
- case 'CH₄':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.gasval);
|
|
|
- });
|
|
|
- break;
|
|
|
- case 'CO₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.co2val);
|
|
|
- });
|
|
|
- break;
|
|
|
- case 'C₂H₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.chval);
|
|
|
- });
|
|
|
- break;
|
|
|
+ echartDataSgList.length = 0;
|
|
|
+ echartDataWd.xData.length = 0;
|
|
|
+ echartDataWd.avgData.data.length = 0;
|
|
|
+ echartDataWd.maxData.data.length = 0;
|
|
|
+ echartDataWd.minData.data.length = 0;
|
|
|
+ echartDataWd.curData.data.length = 0;
|
|
|
+ monitorlistYw.length = 0;
|
|
|
+ monitorlistHy.length = 0;
|
|
|
+ monitorlistPl.length = 0;
|
|
|
+ monitorlistWd.length = 0;
|
|
|
+ if (val.fiber.length != 0) {
|
|
|
+ const fiber: any = val.fiber[0];
|
|
|
+ topOutList[0].value = fiber.readData.fmax;
|
|
|
+ topOutList[1].value = fiber.readData.fmin;
|
|
|
+ topOutList[2].value = fiber.readData.favg;
|
|
|
+ topOutList[3].text = fiber.warnFlag ? '存在风险' : '正常';
|
|
|
+ const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
|
|
|
+ arr.forEach((el) => {
|
|
|
+ echartDataWd.xData.push(el.pos);
|
|
|
+ echartDataWd.curData.data.push(el.value);
|
|
|
+ echartDataWd.maxData.data.push(fiber.avgParam?.max_temperature_value || 0);
|
|
|
+ echartDataWd.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
|
|
|
+ echartDataWd.avgData.data.push(fiber.avgParam?.avg_temperature_value || 0);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ topOutList[0].value = '--';
|
|
|
+ topOutList[1].value = '--';
|
|
|
+ topOutList[2].value = '--';
|
|
|
+ topOutList[3].text = '正常';
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- watch(
|
|
|
- () => props.listData,
|
|
|
- (val) => {
|
|
|
- console.log(val, 'val---------------');
|
|
|
- props.listData = val;
|
|
|
- if (JSON.stringify(val) === '{}') return;
|
|
|
- echartDataSg1.xData.length = 0;
|
|
|
- echartDataSg1.yData.length = 0;
|
|
|
- echartDataSgList.length = 0;
|
|
|
- echartDataWd.xData.length = 0;
|
|
|
- echartDataWd.avgData.data.length = 0;
|
|
|
- echartDataWd.maxData.data.length = 0;
|
|
|
- echartDataWd.minData.data.length = 0;
|
|
|
- echartDataWd.curData.data.length = 0;
|
|
|
- monitorlistYw.length = 0;
|
|
|
- monitorlistHy.length = 0;
|
|
|
- monitorlistPl.length = 0;
|
|
|
- monitorlistWd.length = 0;
|
|
|
- if (val.fiber.length != 0) {
|
|
|
- const fiber: any = val.fiber[0];
|
|
|
- topOutList[0].value = fiber.readData.fmax;
|
|
|
- topOutList[1].value = fiber.readData.fmin;
|
|
|
- topOutList[2].value = fiber.readData.favg;
|
|
|
- topOutList[3].text = fiber.warnFlag ? '存在风险' : '正常';
|
|
|
- const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
|
|
|
- arr.forEach((el) => {
|
|
|
- echartDataWd.xData.push(el.pos);
|
|
|
- echartDataWd.curData.data.push(el.value);
|
|
|
- echartDataWd.maxData.data.push(fiber.avgParam?.max_temperature_value || 0);
|
|
|
- echartDataWd.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
|
|
|
- echartDataWd.avgData.data.push(fiber.avgParam?.avg_temperature_value || 0);
|
|
|
- });
|
|
|
- } else {
|
|
|
- topOutList[0].value = '--';
|
|
|
- topOutList[1].value = '--';
|
|
|
- topOutList[2].value = '--';
|
|
|
- topOutList[3].text = '正常';
|
|
|
- }
|
|
|
|
|
|
- if (val.bundletube.length != 0) {
|
|
|
- topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
|
|
|
- topContent.position = val.bundletube[0].strinstallpos || '--';
|
|
|
- topContent.time = val.bundletube[0].readTime || '--';
|
|
|
- topContent.warn =
|
|
|
- val.bundletube[0].warnLevel == 0
|
|
|
- ? '正常'
|
|
|
- : val.bundletube[0].warnLevel == 101
|
|
|
+ if (val.bundletube.length != 0) {
|
|
|
+ topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
|
|
|
+ topContent.position = val.bundletube[0].strinstallpos || '--';
|
|
|
+ topContent.time = val.bundletube[0].readTime || '--';
|
|
|
+ topContent.warn =
|
|
|
+ val.bundletube[0].warnLevel == 0
|
|
|
+ ? '正常'
|
|
|
+ : val.bundletube[0].warnLevel == 101
|
|
|
? '较低风险'
|
|
|
: val.bundletube[0].warnLevel == 102
|
|
|
- ? '低风险'
|
|
|
- : val.bundletube[0].warnLevel == 103
|
|
|
- ? '中风险'
|
|
|
- : val.bundletube[0].warnLevel == 104
|
|
|
- ? '高风险'
|
|
|
- : val.bundletube[0].warnLevel == 201
|
|
|
- ? '报警'
|
|
|
- : '正常';
|
|
|
- val.bundletube[0].history.forEach((v) => {
|
|
|
- echartDataSg1.xData.push(v.time);
|
|
|
- if (echartDataSg1.lengedData == 'O₂') {
|
|
|
- echartDataSg1.yData.push(v.o2val);
|
|
|
- } else if (echartDataSg1.lengedData == 'C₂H₄') {
|
|
|
- echartDataSg1.yData.push(v.ch2val);
|
|
|
- } else if (echartDataSg1.lengedData == 'CO') {
|
|
|
- echartDataSg1.yData.push(v.coval);
|
|
|
- } else if (echartDataSg1.lengedData == 'CH₄') {
|
|
|
- echartDataSg1.yData.push(v.chval);
|
|
|
- } else if (echartDataSg1.lengedData == 'CO₂') {
|
|
|
- echartDataSg1.yData.push(v.co2val);
|
|
|
- } else if (echartDataSg1.lengedData == 'C₂H₂') {
|
|
|
- echartDataSg1.yData.push(v.gasval);
|
|
|
- }
|
|
|
- echartDataSgList.push(v);
|
|
|
- });
|
|
|
- } else {
|
|
|
- topContent.temperature = '--';
|
|
|
- topContent.position = '--';
|
|
|
- topContent.time = '--';
|
|
|
- topContent.warn = '正常';
|
|
|
- }
|
|
|
+ ? '低风险'
|
|
|
+ : val.bundletube[0].warnLevel == 103
|
|
|
+ ? '中风险'
|
|
|
+ : val.bundletube[0].warnLevel == 104
|
|
|
+ ? '高风险'
|
|
|
+ : val.bundletube[0].warnLevel == 201
|
|
|
+ ? '报警'
|
|
|
+ : '正常';
|
|
|
+ val.bundletube[0].history.forEach((v) => {
|
|
|
+ echartDataSg1.xData.push(v.time);
|
|
|
+ if (echartDataSg1.lengedData == 'O₂') {
|
|
|
+ echartDataSg1.yData.push(v.o2val);
|
|
|
+ } else if (echartDataSg1.lengedData == 'C₂H₄') {
|
|
|
+ echartDataSg1.yData.push(v.ch2val);
|
|
|
+ } else if (echartDataSg1.lengedData == 'CO') {
|
|
|
+ echartDataSg1.yData.push(v.coval);
|
|
|
+ } else if (echartDataSg1.lengedData == 'CH₄') {
|
|
|
+ echartDataSg1.yData.push(v.chval);
|
|
|
+ } else if (echartDataSg1.lengedData == 'CO₂') {
|
|
|
+ echartDataSg1.yData.push(v.co2val);
|
|
|
+ } else if (echartDataSg1.lengedData == 'C₂H₂') {
|
|
|
+ echartDataSg1.yData.push(v.gasval);
|
|
|
+ }
|
|
|
+ echartDataSgList.push(v);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ topContent.temperature = '--';
|
|
|
+ topContent.position = '--';
|
|
|
+ topContent.time = '--';
|
|
|
+ topContent.warn = '正常';
|
|
|
+ }
|
|
|
|
|
|
- if (val.smoke.length != 0) {
|
|
|
- val.smoke.forEach((el) => {
|
|
|
- el.smokeVal=el.readData.smokeval=='0' ? '无烟' : el.readData.smokeval=='1' ? '有烟' :el.readData.smokeval
|
|
|
- monitorlistYw.push({
|
|
|
- strinstallpos: el.strinstallpos,
|
|
|
- val: el.smokeVal,
|
|
|
- warnLevel_str: el.warnLevel_str,
|
|
|
- readTime: el.readTime,
|
|
|
- });
|
|
|
+ if (val.smoke.length != 0) {
|
|
|
+ val.smoke.forEach((el) => {
|
|
|
+ el.smokeVal = el.readData.smokeval == '0' ? '无烟' : el.readData.smokeval == '1' ? '有烟' : el.readData.smokeval
|
|
|
+ monitorlistYw.push({
|
|
|
+ strinstallpos: el.strinstallpos,
|
|
|
+ val: el.smokeVal,
|
|
|
+ warnLevel_str: el.warnLevel_str,
|
|
|
+ readTime: el.readTime,
|
|
|
});
|
|
|
- }
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- if (val.co.length != 0) {
|
|
|
- val.co.forEach((el) => {
|
|
|
- monitorlistHy.push(el);
|
|
|
- });
|
|
|
- }
|
|
|
+ if (val.co.length != 0) {
|
|
|
+ val.co.forEach((el) => {
|
|
|
+ monitorlistHy.push(el);
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- if (val.spray.length != 0) {
|
|
|
- val.spray.forEach((el) => {
|
|
|
- monitorlistPl.push(el);
|
|
|
- });
|
|
|
- }
|
|
|
+ if (val.spray.length != 0) {
|
|
|
+ val.spray.forEach((el) => {
|
|
|
+ monitorlistPl.push(el);
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- if (val.temperature.length != 0) {
|
|
|
- val.temperature.forEach((el) => {
|
|
|
- monitorlistWd.push({
|
|
|
- strinstallpos: el.strinstallpos,
|
|
|
- val: el.readData.fireval,
|
|
|
- warnLevel_str: el.warnLevel_str,
|
|
|
- readTime: el.readTime,
|
|
|
- });
|
|
|
+ if (val.temperature.length != 0) {
|
|
|
+ val.temperature.forEach((el) => {
|
|
|
+ monitorlistWd.push({
|
|
|
+ strinstallpos: el.strinstallpos,
|
|
|
+ val: el.readData.fireval,
|
|
|
+ warnLevel_str: el.warnLevel_str,
|
|
|
+ readTime: el.readTime,
|
|
|
});
|
|
|
- }
|
|
|
- },
|
|
|
- { immediate: true, deep: true }
|
|
|
- );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @import '/@/design/theme.less';
|
|
|
-
|
|
|
- @{theme-deepblue} {
|
|
|
- .mainWell {
|
|
|
- --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
- --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
|
|
|
- --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
|
|
|
- --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
|
|
|
- --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
|
|
|
- --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
|
|
|
- --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
|
|
|
- }
|
|
|
- }
|
|
|
+@import '/@/design/theme.less';
|
|
|
|
|
|
+@{theme-deepblue} {
|
|
|
.mainWell {
|
|
|
- --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
- --image-max: url('/@/assets/images/fire/max.svg');
|
|
|
- --image-min: url('/@/assets/images/fire/min.svg');
|
|
|
- --image-pj: url('/@/assets/images/fire/pj.svg');
|
|
|
- --image-1: url('/@/assets/images/fire/1.png');
|
|
|
- --image-contetn: url('/@/assets/images/fire/contetn.png');
|
|
|
- --image-2: url('/@/assets/images/fire/2.png');
|
|
|
- --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
+ --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
+ --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
|
|
|
+ --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
|
|
|
+ --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
|
|
|
+ --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
|
|
|
+ --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
|
|
|
+ --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.mainWell {
|
|
|
+ --image-z: url('/@/assets/images/fire/wy-z.png');
|
|
|
+ --image-zt: url('/@/assets/images/fire/wy-zt.png');
|
|
|
+ --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
|
|
|
+ --image-time: url('/@/assets/images/fire/wy-time.png');
|
|
|
+ --image-time1: url('/@/assets/images/fire/wy-time2.png');
|
|
|
+ --image-title: url('/@/assets/images/fire/wy-title.png');
|
|
|
+ --image-bj1: url('/@/assets/images/fire/wy-bj.png');
|
|
|
+ --image-max: url('/@/assets/images/fire/max.svg');
|
|
|
+ --image-min: url('/@/assets/images/fire/min.svg');
|
|
|
+ --image-pj: url('/@/assets/images/fire/pj.svg');
|
|
|
+ --image-1: url('/@/assets/images/fire/1.png');
|
|
|
+ --image-contetn: url('/@/assets/images/fire/contetn.png');
|
|
|
+ --image-2: url('/@/assets/images/fire/2.png');
|
|
|
+ --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .work-nav {
|
|
|
+ height: 15%;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .work-nav {
|
|
|
- height: 15%;
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .nav {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
- .nav {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ &:nth-child(1) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
+ &:nth-child(3) {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
+ &:nth-child(4) {
|
|
|
+ flex: 1.2;
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-size: 16px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(4) {
|
|
|
- flex: 1.2;
|
|
|
- color: #b3b8cc;
|
|
|
- font-size: 16px;
|
|
|
+ &:nth-child(5) {
|
|
|
+ flex: 0.8;
|
|
|
+ color: #2b87ff;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ width: 26%;
|
|
|
+ height: 84%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: 84%;
|
|
|
+ margin-left: 15px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- &:nth-child(5) {
|
|
|
- flex: 0.8;
|
|
|
- color: #2b87ff;
|
|
|
+ span {
|
|
|
font-size: 14px;
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ padding: 5px 0px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav:nth-child(1) .pic {
|
|
|
+ background: var(--image-max) no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav:nth-child(2) .pic {
|
|
|
+ background: var(--image-min) no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav:nth-child(3) .pic {
|
|
|
+ background: var(--image-pj) no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ flex: 2;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ flex: 1;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contents {
|
|
|
+ height: 73%;
|
|
|
|
|
|
- .pic {
|
|
|
- width: 26%;
|
|
|
- height: 84%;
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 40%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
img {
|
|
|
- width: 100%;
|
|
|
+ position: relative;
|
|
|
+ width: 23%;
|
|
|
height: 100%;
|
|
|
+ background: var(--image-pj) no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 28px;
|
|
|
+ margin: 0px 15px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dw {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b3b8cc;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
- height: 84%;
|
|
|
- margin-left: 15px;
|
|
|
- color: #fff;
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 60%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
+ .text {
|
|
|
+ font-size: 18px;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- padding: 5px 0px;
|
|
|
+ .text-label {
|
|
|
color: #b3b8cc;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
+ .text-value {
|
|
|
font-family: 'douyuFont';
|
|
|
- font-size: 16px;
|
|
|
color: var(--vent-table-action-link);
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .nav:nth-child(1) .pic {
|
|
|
- background: var(--image-max) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-box {
|
|
|
+ height: 47%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .nav:nth-child(2) .pic {
|
|
|
- background: var(--image-min) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
+ .content-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 32%;
|
|
|
+ height: 100%;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin: 0px 20px;
|
|
|
}
|
|
|
|
|
|
- .nav:nth-child(3) .pic {
|
|
|
- background: var(--image-pj) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
+
|
|
|
+ .container-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ top: 4px;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- .content-box {
|
|
|
- display: flex;
|
|
|
+ .container-content {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ top: 38px;
|
|
|
+ height: calc(100% - 48px);
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- flex: 2;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
+ .container-content-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: var(--image-title) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- flex: 1;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
+ .content-box-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- .contents {
|
|
|
- height: 73%;
|
|
|
+ .content-box-text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 22px;
|
|
|
+ width: 100%;
|
|
|
+ height: 58px;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- width: 40%;
|
|
|
+ .box-text-z {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 205px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-z) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- img {
|
|
|
- position: relative;
|
|
|
- width: 23%;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-pj) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 28px;
|
|
|
- margin: 0px 15px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- }
|
|
|
+ .box-text-zt {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 205px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-zt) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- .dw {
|
|
|
- font-size: 14px;
|
|
|
- color: #b3b8cc;
|
|
|
- }
|
|
|
+ .box-text-zt1 {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 258px;
|
|
|
+ background: var(--image-zt1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- width: 60%;
|
|
|
+ .box-text-time {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 18px;
|
|
|
-
|
|
|
- .text-label {
|
|
|
- color: #b3b8cc;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .text-value {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 305px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-time) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .text1 {
|
|
|
- font-size: 16px;
|
|
|
- color: #b3b8cc;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .box-text-time1 {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 298px;
|
|
|
+ background: var(--image-time1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- .center-box {
|
|
|
- height: 47%;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .text-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff
|
|
|
+ }
|
|
|
|
|
|
- .content-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 32%;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .text-label-hy {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- margin: 0px 20px;
|
|
|
- }
|
|
|
+ .text-val-hy {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- padding: 0px 15px;
|
|
|
- margin-bottom: 10px;
|
|
|
- border-bottom: 1px solid var(--vent-warn-tab-bg);
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .text-val-hy1 {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
+ color: #ff0000;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
|
|
|
- .title-label {
|
|
|
- // font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
+ .text-val-hy2 {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
+ color: #91e609;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- .details {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f81df;
|
|
|
+ .text-val {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- height: calc(100% - 40px);
|
|
|
- margin-bottom: 10px;
|
|
|
+ .text-val1 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ff0000
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-val2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #91e609
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .center-box1 {
|
|
|
- height: 70%;
|
|
|
- // margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-box1 {
|
|
|
+ height: 70%;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: calc(70% - 10px);
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .content-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: calc(50% - 10px);
|
|
|
- height: calc(70% - 10px);
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- margin: 0px 20px 20px 0px;
|
|
|
- }
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin: 0px 20px 0px 0px;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- margin: 0px 20px 0px 0px;
|
|
|
- }
|
|
|
+ .container-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ top: 4px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-content {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ top: 38px;
|
|
|
+ height: calc(100% - 48px);
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- .title {
|
|
|
+ .container-content-box {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
- height: 40px;
|
|
|
- padding: 0px 15px;
|
|
|
+ height: 80px;
|
|
|
margin-bottom: 10px;
|
|
|
- border-bottom: 1px solid var(--vent-warn-tab-bg);
|
|
|
- box-sizing: border-box;
|
|
|
+ background: var(--image-title) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-box-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-box-text {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: space-around;
|
|
|
align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 22px;
|
|
|
+ width: 100%;
|
|
|
+ height: 58px;
|
|
|
+
|
|
|
+ .box-text-z {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 205px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-z) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .title-label {
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
}
|
|
|
|
|
|
- .details {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f81df;
|
|
|
+ .box-text-zt {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 205px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-zt) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- height: calc(100% - 40px);
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .box-text-zt1 {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 258px;
|
|
|
+ background: var(--image-zt1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- .content-boxs {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: calc(50% - 10px);
|
|
|
- height: calc(30% - 30px);
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .box-text-time {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 305px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-time) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- margin: 0px 20px 20px 0px;
|
|
|
- }
|
|
|
+ .box-text-time1 {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 298px;
|
|
|
+ background: var(--image-time1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- margin: 0px 20px 20px 0px;
|
|
|
- }
|
|
|
+ .text-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- padding: 0px 15px;
|
|
|
- margin-bottom: 10px;
|
|
|
- border-bottom: 1px solid var(--vent-warn-tab-bg);
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .text-label-hy {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px
|
|
|
+ }
|
|
|
|
|
|
- .title-label {
|
|
|
- font-size: 16px;
|
|
|
+ .text-val-hy {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- .details {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f81df;
|
|
|
+ .text-val-hy1 {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
+ color: #ff0000;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- height: calc(100% - 40px);
|
|
|
- margin-bottom: 10px;
|
|
|
+ .text-val-hy2 {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
+ color: #91e609;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-val {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-val1 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ff0000
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-val2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #91e609
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .center-box2 {
|
|
|
- height: 100%;
|
|
|
+ .content-boxs {
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: calc(30% - 30px);
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .content-box {
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0px 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px solid var(--vent-warn-tab-bg);
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: calc(50% - 10px);
|
|
|
- height: calc(50% - 10px);
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- margin: 0px 20px 20px 0px;
|
|
|
+ .title-label {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- margin: 0px 20px 0px 0px;
|
|
|
+ .details {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1f81df;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-box2 {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: calc(70% - 10px);
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin: 0px 20px 0px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ top: 4px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
+ .container-content {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ top: 38px;
|
|
|
+ height: calc(100% - 48px);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .container-content-box {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
- height: 40px;
|
|
|
- padding: 0px 15px;
|
|
|
+ height: 80px;
|
|
|
margin-bottom: 10px;
|
|
|
- border-bottom: 1px solid var(--vent-warn-tab-bg);
|
|
|
- box-sizing: border-box;
|
|
|
+ background: var(--image-title) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-box-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 10px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-box-text {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: space-around;
|
|
|
align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 22px;
|
|
|
+ width: 100%;
|
|
|
+ height: 58px;
|
|
|
+
|
|
|
+ .box-text-z {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 205px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-z) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .title-label {
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
}
|
|
|
|
|
|
- .details {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f81df;
|
|
|
+ .box-text-zt {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 205px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-zt) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- height: calc(100% - 40px);
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .box-text-zt1 {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 258px;
|
|
|
+ background: var(--image-zt1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- .content-boxs {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: calc(50% - 10px);
|
|
|
- height: calc(50% - 30px);
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .box-text-time {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 305px;
|
|
|
+ padding: 0px 30px;
|
|
|
+ background: var(--image-time) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- margin: 0px 20px 20px 0px;
|
|
|
- }
|
|
|
+ .box-text-time1 {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ width: 298px;
|
|
|
+ background: var(--image-time1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(3) {
|
|
|
- margin: 0px 20px 20px 0px;
|
|
|
- }
|
|
|
+ .text-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- padding: 0px 15px;
|
|
|
- margin-bottom: 10px;
|
|
|
- border-bottom: 1px solid var(--vent-warn-tab-bg);
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .text-label-hy {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px
|
|
|
+ }
|
|
|
|
|
|
- .title-label {
|
|
|
- font-size: 16px;
|
|
|
+ .text-val-hy {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- .details {
|
|
|
- font-size: 14px;
|
|
|
- color: #1f81df;
|
|
|
+ .text-val-hy1 {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
+ color: #ff0000;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .content {
|
|
|
- height: calc(100% - 40px);
|
|
|
- margin-bottom: 10px;
|
|
|
+ .text-val-hy2 {
|
|
|
+ position: absolute;
|
|
|
+ left: 115px;
|
|
|
+ color: #91e609;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-val {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-val1 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ff0000
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-val2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #91e609
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .footer-box {
|
|
|
- height: calc(38% - 40px);
|
|
|
- padding: 10px;
|
|
|
+ .content-boxs {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ height: calc(50% - 30px);
|
|
|
background: var(--image-bj1) no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .footer-title {
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .echart-label {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
|
}
|
|
|
|
|
|
- .echart-content {
|
|
|
- height: calc(100% - 30px);
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .footer-box1 {
|
|
|
- height: calc(30% - 20px);
|
|
|
- padding: 10px 15px;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .footer-title {
|
|
|
- height: 30px;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0px 15px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-bottom: 1px solid var(--vent-warn-tab-bg);
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
- .echart-label {
|
|
|
- font-family: 'douyuFont';
|
|
|
+ .title-label {
|
|
|
font-size: 16px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
+ .details {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1f81df;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .echart-content {
|
|
|
- height: calc(100% - 30px);
|
|
|
+ .content {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .content-s {
|
|
|
- width: 100%;
|
|
|
- height: 608px;
|
|
|
- padding: 10px;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
+ .footer-box {
|
|
|
+ height: calc(38% - 40px);
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .footer-title {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
+ .echart-label {
|
|
|
font-family: 'douyuFont';
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .card-btn {
|
|
|
- height: 28%;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .echart-content {
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .content-box {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
+ .footer-box1 {
|
|
|
+ height: calc(30% - 20px);
|
|
|
+ padding: 10px 15px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .btn-label {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 0;
|
|
|
- transform: translate(-50%);
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .footer-title {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .box-item {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 89%;
|
|
|
- height: 16%;
|
|
|
- padding: 0px 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background: var(--image-contetn) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ .echart-label {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .text-t {
|
|
|
- width: 17%;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ .echart-content {
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .text-v {
|
|
|
- width: 83%;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 10px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- }
|
|
|
+ .content-s {
|
|
|
+ width: 100%;
|
|
|
+ height: 608px;
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .box-item1 {
|
|
|
- top: 24%;
|
|
|
- }
|
|
|
+ .title-b {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .box-item2 {
|
|
|
- top: 50%;
|
|
|
- }
|
|
|
+ .card-btn {
|
|
|
+ height: 28%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .box-item3 {
|
|
|
- top: 75%;
|
|
|
- }
|
|
|
+ .content-box {
|
|
|
+ position: relative;
|
|
|
+ width: 16%;
|
|
|
+ height: 100%;
|
|
|
+ background: var(--image-1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .btn-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%);
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- .content-box1 {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-2) no-repeat center;
|
|
|
+ .box-item {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 89%;
|
|
|
+ height: 16%;
|
|
|
+ padding: 0px 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: var(--image-contetn) no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
|
|
|
- .btn-label {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 0;
|
|
|
- transform: translate(-50%);
|
|
|
- font-size: 16px;
|
|
|
+ .text-t {
|
|
|
+ width: 17%;
|
|
|
color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- .box-item {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 89%;
|
|
|
- height: 16%;
|
|
|
- padding: 0px 10px;
|
|
|
+ .text-v {
|
|
|
+ width: 83%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 10px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background: var(--image-contetn) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
- .text-t {
|
|
|
- width: 17%;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .text-v {
|
|
|
- width: 83%;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 10px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .box-item1 {
|
|
|
- top: 19%;
|
|
|
- }
|
|
|
+ .box-item1 {
|
|
|
+ top: 24%;
|
|
|
+ }
|
|
|
|
|
|
- .box-item2 {
|
|
|
- top: 41%;
|
|
|
- }
|
|
|
+ .box-item2 {
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
|
|
|
- .box-item3 {
|
|
|
- top: 63%;
|
|
|
- }
|
|
|
+ .box-item3 {
|
|
|
+ top: 75%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .echart-box {
|
|
|
- height: calc(72% - 41px);
|
|
|
- border: 1px solid #114aac;
|
|
|
+ .content-box1 {
|
|
|
+ position: relative;
|
|
|
+ width: 16%;
|
|
|
+ height: 100%;
|
|
|
+ background: var(--image-2) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .btn-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ transform: translate(-50%);
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .title-f {
|
|
|
- height: 40px;
|
|
|
+ .box-item {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 89%;
|
|
|
+ height: 16%;
|
|
|
padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ background: var(--image-contetn) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- .title-text {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
+ .text-t {
|
|
|
+ width: 17%;
|
|
|
color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-v {
|
|
|
+ width: 83%;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 10px;
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .echarts-box {
|
|
|
- height: calc(100% - 40px);
|
|
|
+ .box-item1 {
|
|
|
+ top: 19%;
|
|
|
}
|
|
|
+
|
|
|
+ .box-item2 {
|
|
|
+ top: 41%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-item3 {
|
|
|
+ top: 63%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .echart-box {
|
|
|
+ height: calc(72% - 41px);
|
|
|
+ border: 1px solid #114aac;
|
|
|
+
|
|
|
+ .title-f {
|
|
|
+ height: 40px;
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title-text {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .echarts-box {
|
|
|
+ height: calc(100% - 40px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
