|
@@ -25,12 +25,8 @@
|
|
|
<div class="content">
|
|
|
<div class="title-b">采空区密闭参数</div>
|
|
|
<div class="card-btn">
|
|
|
- <div
|
|
|
- :class="activeIndex == index ? 'box-container1' : 'box-container'"
|
|
|
- v-for="(item, index) in mbList"
|
|
|
- :key="index"
|
|
|
- @click="btnClick(item, index)"
|
|
|
- >
|
|
|
+ <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
|
|
|
+ :key="index" @click="btnClick(item, index)">
|
|
|
<div class="box-label">
|
|
|
<span> {{ item.label }}</span>
|
|
|
<span>{{ item.dw }}</span>
|
|
@@ -62,483 +58,485 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { onMounted, ref, reactive, watch, defineProps } from 'vue';
|
|
|
- import echartLine1 from './echartLine1.vue';
|
|
|
-
|
|
|
- let props = defineProps({
|
|
|
- listData: Object,
|
|
|
- });
|
|
|
-
|
|
|
- //密闭-顶部区域数据
|
|
|
- let topContent = reactive({
|
|
|
- temperature: 0,
|
|
|
- position: '',
|
|
|
- time: '',
|
|
|
- warn: '',
|
|
|
- });
|
|
|
- //密闭参数列表
|
|
|
- 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 activeIndex = ref(0);
|
|
|
- //当前激活密闭参数类型
|
|
|
- let type = ref('O₂');
|
|
|
-
|
|
|
- let echartDataSg1 = reactive({
|
|
|
- xData: [],
|
|
|
- yData: [],
|
|
|
- lengedData: 'O₂',
|
|
|
- lengedDataName: '(%)',
|
|
|
- });
|
|
|
- let echartDataSgList = reactive<any[]>([]);
|
|
|
-
|
|
|
- //密闭参数选项切换
|
|
|
- function btnClick(item, ind) {
|
|
|
- activeIndex.value = ind;
|
|
|
- type.value = item.label;
|
|
|
+import { onMounted, ref, reactive, watch, defineProps } from 'vue';
|
|
|
+import echartLine1 from './echartLine1.vue';
|
|
|
+
|
|
|
+let props = defineProps({
|
|
|
+ listData: Object,
|
|
|
+});
|
|
|
+
|
|
|
+//密闭-顶部区域数据
|
|
|
+let topContent = reactive({
|
|
|
+ temperature: 0,
|
|
|
+ position: '',
|
|
|
+ time: '',
|
|
|
+ warn: '',
|
|
|
+});
|
|
|
+//密闭参数列表
|
|
|
+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 activeIndex = ref(0);
|
|
|
+//当前激活密闭参数类型
|
|
|
+let type = ref('O₂');
|
|
|
+
|
|
|
+let echartDataSg1 = reactive({
|
|
|
+ xData: [],
|
|
|
+ yData: [],
|
|
|
+ lengedData: 'O₂',
|
|
|
+ lengedDataName: '(%)',
|
|
|
+});
|
|
|
+let echartDataSgList = reactive<any[]>([]);
|
|
|
+
|
|
|
+//密闭参数选项切换
|
|
|
+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.chval);
|
|
|
+ });
|
|
|
+ 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.gasval);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => props.listData,
|
|
|
+ (val) => {
|
|
|
+ console.log(val, 'val---');
|
|
|
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.chval);
|
|
|
+ echartDataSgList.length = 0;
|
|
|
+ if (JSON.stringify(val) != '{}') {
|
|
|
+ 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].warnLevel == 1001
|
|
|
+ ? '网络异常'
|
|
|
+ : '正常';
|
|
|
+ mbList[0].nd = val.bundletube[0].readData.o2val || '--';
|
|
|
+ mbList[1].nd = val.bundletube[0].readData.coval || '--';
|
|
|
+ mbList[2].nd = val.bundletube[0].readData.co2val || '--';
|
|
|
+ mbList[3].nd = val.bundletube[0].readData.chval || '--';
|
|
|
+ mbList[4].nd = val.bundletube[0].readData.ch2val || '--';
|
|
|
+ mbList[5].nd = val.bundletube[0].readData.gasval || '--';
|
|
|
+ mbList.forEach((el) => {
|
|
|
+ el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
|
|
|
+ el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
|
|
|
});
|
|
|
- break;
|
|
|
- case 'CO₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.co2val);
|
|
|
+
|
|
|
+ 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);
|
|
|
});
|
|
|
- break;
|
|
|
- case 'C₂H₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.gasval);
|
|
|
+ } else {
|
|
|
+ topContent.temperature = 0;
|
|
|
+ topContent.position = '--';
|
|
|
+ topContent.time = '--';
|
|
|
+ topContent.warn = '正常';
|
|
|
+ mbList[0].nd = '--';
|
|
|
+ mbList[1].nd = '--';
|
|
|
+ mbList[2].nd = '--';
|
|
|
+ mbList[3].nd = '--';
|
|
|
+ mbList[4].nd = '--';
|
|
|
+ mbList[5].nd = '--';
|
|
|
+ mbList.forEach((el) => {
|
|
|
+ el.time1 = '--';
|
|
|
+ el.address = '--';
|
|
|
});
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- watch(
|
|
|
- () => props.listData,
|
|
|
- (val) => {
|
|
|
- console.log(val, 'val---');
|
|
|
- echartDataSg1.xData.length = 0;
|
|
|
- echartDataSg1.yData.length = 0;
|
|
|
- echartDataSgList.length = 0;
|
|
|
- if (JSON.stringify(val) != '{}') {
|
|
|
- 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
|
|
|
- ? '报警'
|
|
|
- : '正常';
|
|
|
- mbList[0].nd = val.bundletube[0].readData.o2val || '--';
|
|
|
- mbList[1].nd = val.bundletube[0].readData.coval || '--';
|
|
|
- mbList[2].nd = val.bundletube[0].readData.co2val || '--';
|
|
|
- mbList[3].nd = val.bundletube[0].readData.chval || '--';
|
|
|
- mbList[4].nd = val.bundletube[0].readData.ch2val || '--';
|
|
|
- mbList[5].nd = val.bundletube[0].readData.gasval || '--';
|
|
|
- mbList.forEach((el) => {
|
|
|
- el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
|
|
|
- el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
|
|
|
- });
|
|
|
-
|
|
|
- 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 = 0;
|
|
|
- topContent.position = '--';
|
|
|
- topContent.time = '--';
|
|
|
- topContent.warn = '正常';
|
|
|
- mbList[0].nd = '--';
|
|
|
- mbList[1].nd = '--';
|
|
|
- mbList[2].nd = '--';
|
|
|
- mbList[3].nd = '--';
|
|
|
- mbList[4].nd = '--';
|
|
|
- mbList[5].nd = '--';
|
|
|
- mbList.forEach((el) => {
|
|
|
- el.time1 = '--';
|
|
|
- el.address = '--';
|
|
|
- });
|
|
|
- }
|
|
|
}
|
|
|
- },
|
|
|
- { immediate: true, deep: true }
|
|
|
- );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .closeWall {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
+.closeWall {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 17%;
|
|
|
- margin-bottom: 20px;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 17%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .box-container {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- align-items: center;
|
|
|
|
|
|
- .box-container {
|
|
|
- display: flex;
|
|
|
+ &:nth-child(1) {
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ flex: 2;
|
|
|
+ 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;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contents {
|
|
|
+ height: 73%;
|
|
|
|
|
|
&:nth-child(1) {
|
|
|
- justify-content: space-around;
|
|
|
+ width: 40%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- flex: 2;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ width: 23%;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
|
|
|
+ background-size: 50% 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 28px;
|
|
|
+ margin: 0px 15px;
|
|
|
+ color: #3df6ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dw {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
- flex: 1;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ width: 60%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
|
|
|
- .contents {
|
|
|
- height: 73%;
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- &:nth-child(1) {
|
|
|
- width: 40%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- img {
|
|
|
- position: relative;
|
|
|
- width: 23%;
|
|
|
- height: 100%;
|
|
|
- background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
+ .text-label {
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
- .text {
|
|
|
+ .text-value {
|
|
|
font-family: 'douyuFont';
|
|
|
- font-size: 28px;
|
|
|
- margin: 0px 15px;
|
|
|
color: #3df6ff;
|
|
|
- }
|
|
|
-
|
|
|
- .dw {
|
|
|
- font-size: 14px;
|
|
|
- color: #b3b8cc;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- width: 60%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- .text-label {
|
|
|
- color: #b3b8cc;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .text-value {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #3df6ff;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .text1 {
|
|
|
- font-size: 16px;
|
|
|
- color: #b3b8cc;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: calc(83% - 20px);
|
|
|
- padding: 10px;
|
|
|
- background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- // color: #3df6ff;
|
|
|
- }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(83% - 20px);
|
|
|
+ padding: 10px;
|
|
|
+ background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .card-btn {
|
|
|
- height: 28%;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ .title-b {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ // color: #3df6ff;
|
|
|
+ }
|
|
|
|
|
|
- .box-container {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: url('../../../../../assets/images/fire/1.png') no-repeat center;
|
|
|
+ .card-btn {
|
|
|
+ height: 28%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .box-container {
|
|
|
+ position: relative;
|
|
|
+ width: 16%;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../../../assets/images/fire/1.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .box-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 2px;
|
|
|
+ transform: translate(-50%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
|
|
|
- .box-label {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 2px;
|
|
|
- transform: translate(-50%);
|
|
|
+ .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: #3df6ff;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background: url('../../../../../assets/images/fire/contetn.png') 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: #3df6ff;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .box-item1 {
|
|
|
- top: 24%;
|
|
|
- }
|
|
|
+ .box-item1 {
|
|
|
+ top: 24%;
|
|
|
+ }
|
|
|
|
|
|
- .box-item2 {
|
|
|
- top: 50%;
|
|
|
- }
|
|
|
+ .box-item2 {
|
|
|
+ top: 50%;
|
|
|
+ }
|
|
|
|
|
|
- .box-item3 {
|
|
|
- top: 75%;
|
|
|
- }
|
|
|
+ .box-item3 {
|
|
|
+ top: 75%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-container1 {
|
|
|
+ position: relative;
|
|
|
+ width: 16%;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../../../assets/images/fire/2.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .box-label {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 2px;
|
|
|
+ transform: translate(-50%);
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- .box-container1 {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: url('../../../../../assets/images/fire/2.png') 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: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
|
|
|
- .box-label {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 2px;
|
|
|
- transform: translate(-50%);
|
|
|
+ .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: #3df6ff;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background: url('../../../../../assets/images/fire/contetn.png') 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: #3df6ff;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
+ justify-content: flex-end;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .box-item1 {
|
|
|
- top: 19%;
|
|
|
- }
|
|
|
+ .box-item1 {
|
|
|
+ top: 19%;
|
|
|
+ }
|
|
|
|
|
|
- .box-item2 {
|
|
|
- top: 41%;
|
|
|
- }
|
|
|
+ .box-item2 {
|
|
|
+ top: 41%;
|
|
|
+ }
|
|
|
|
|
|
- .box-item3 {
|
|
|
- top: 63%;
|
|
|
- }
|
|
|
+ .box-item3 {
|
|
|
+ top: 63%;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .echart-box {
|
|
|
- height: calc(72% - 41px);
|
|
|
- border: 1px solid #114aac;
|
|
|
+ .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-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;
|
|
|
- // color: #3df6ff;
|
|
|
- }
|
|
|
+ .title-text {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ // color: #3df6ff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .echarts-box {
|
|
|
- height: calc(100% - 40px);
|
|
|
- }
|
|
|
+ .echarts-box {
|
|
|
+ height: calc(100% - 40px);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|