|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="mainWell">
|
|
<div class="mainWell">
|
|
<!-- 光钎测温 -->
|
|
<!-- 光钎测温 -->
|
|
- <div class="work-nav" v-if="listData.bundletube.length == 0 && strType!='sys_coalseam'">
|
|
|
|
|
|
+ <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="nav" v-for="(item, index) in topOutList" :key="index">
|
|
<div class="pic" v-if="item.imgSrc">
|
|
<div class="pic" v-if="item.imgSrc">
|
|
<img :src="imgUrl" alt="" />
|
|
<img :src="imgUrl" alt="" />
|
|
@@ -14,7 +14,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 束管监测 -->
|
|
<!-- 束管监测 -->
|
|
- <div class="work-nav" v-if="listData.bundletube.length!=0 && strType!='sys_coalseam'">
|
|
|
|
|
|
+ <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
|
|
<div class="content-box">
|
|
<div class="content-box">
|
|
<div class="contents">
|
|
<div class="contents">
|
|
<img src="../../../../../assets/images/fire/pie.png" alt="" />
|
|
<img src="../../../../../assets/images/fire/pie.png" alt="" />
|
|
@@ -23,12 +23,12 @@
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
<div class="contents">
|
|
<div class="text">
|
|
<div class="text">
|
|
- <span class="label">位置 : </span>
|
|
|
|
- <span class="value">{{ topContent.position }}</span>
|
|
|
|
|
|
+ <span class="text-label">位置 : </span>
|
|
|
|
+ <span class="text-value">{{ topContent.position }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
<div class="text">
|
|
- <span class="label">时间 : </span>
|
|
|
|
- <span class="value">{{ topContent.time }}</span>
|
|
|
|
|
|
+ <span class="text-label">时间 : </span>
|
|
|
|
+ <span class="text-value">{{ topContent.time }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -38,10 +38,10 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
- <div class="center-box" v-if="strType!='sys_coalseam'">
|
|
|
|
|
|
+ <div class="center-box" v-if="strType != 'sys_coalseam'">
|
|
<div class="content-box" v-for="(items, index) in tabList" :key="index">
|
|
<div class="content-box" v-for="(items, index) in tabList" :key="index">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <span class="label">{{ items.label }}</span>
|
|
|
|
|
|
+ <span class="title-label">{{ items.label }}</span>
|
|
<span class="details">{{ `${items.details}>>` }}</span>
|
|
<span class="details">{{ `${items.details}>>` }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content">
|
|
@@ -61,34 +61,37 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div :class="listData.fiber.length!=0 ? 'center-box1' : 'center-box2'" v-if="strType=='sys_coalseam'">
|
|
|
|
|
|
+ <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
|
|
<div class="content-box" v-for="(items, index) in tabLists" :key="index">
|
|
<div class="content-box" v-for="(items, index) in tabLists" :key="index">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <span class="label">{{ items.label }}</span>
|
|
|
|
|
|
+ <span class="title-label">{{ items.label }}</span>
|
|
<span class="details">{{ `${items.details}>>` }}</span>
|
|
<span class="details">{{ `${items.details}>>` }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content">
|
|
- <a-table v-if="index == 0" ref="table" size="small" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320 }" :columns="columns"
|
|
|
|
|
|
+ <a-table v-if="index == 0" ref="table" size="small"
|
|
|
|
+ :scroll="{ y: listData.fiber.length != 0 ? 160 : 320 }" :columns="columns"
|
|
:data-source="monitorlistYw" :pagination="false">
|
|
:data-source="monitorlistYw" :pagination="false">
|
|
<span slot="action" slot-scope="text, record"></span>
|
|
<span slot="action" slot-scope="text, record"></span>
|
|
</a-table>
|
|
</a-table>
|
|
<a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
|
|
<a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
|
|
- :pagination="false" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320}">
|
|
|
|
|
|
+ :pagination="false" :scroll="{ y: listData.fiber.length != 0 ? 160 : 320 }">
|
|
<span slot="action" slot-scope="text, record"> </span>
|
|
<span slot="action" slot-scope="text, record"> </span>
|
|
</a-table>
|
|
</a-table>
|
|
- <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320 }" :columns="columns"
|
|
|
|
|
|
+ <a-table v-if="index == 2" ref="table" size="small"
|
|
|
|
+ :scroll="{ y: listData.fiber.length != 0 ? 160 : 320 }" :columns="columns"
|
|
:data-source="monitorlistPl" :pagination="false">
|
|
:data-source="monitorlistPl" :pagination="false">
|
|
<span slot="action" slot-scope="text, record"> </span>
|
|
<span slot="action" slot-scope="text, record"> </span>
|
|
</a-table>
|
|
</a-table>
|
|
|
|
|
|
- <a-table v-if="index == 3" ref="table" size="small" :scroll="{ y: listData.fiber.length!=0 ? 160 : 320}" :columns="columns"
|
|
|
|
- :data-source="monitorlistWd" :pagination="false">
|
|
|
|
|
|
+ <a-table v-if="index == 3" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 160 : 320 }"
|
|
|
|
+ :columns="columns" :data-source="monitorlistWd" :pagination="false">
|
|
<span slot="action" slot-scope="text, record"> </span>
|
|
<span slot="action" slot-scope="text, record"> </span>
|
|
</a-table>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div :class="strType=='sys_coalseam' ? 'footer-box1' : 'footer-box'" v-if="listData.bundletube.length == 0 && listData.fiber.length!=0">
|
|
|
|
|
|
+ <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
|
|
|
|
+ v-if="listData.bundletube.length == 0 || strType == 'sys_coalseam' && listData.fiber.length != 0">
|
|
<div class="footer-title">
|
|
<div class="footer-title">
|
|
<div class="echart-label">光钎测温系统实时温度监测</div>
|
|
<div class="echart-label">光钎测温系统实时温度监测</div>
|
|
</div>
|
|
</div>
|
|
@@ -98,15 +101,18 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 束管监测 -->
|
|
<!-- 束管监测 -->
|
|
- <div class="content-s" v-if="listData.bundletube.length!=0 && strType!='sys_coalseam'">
|
|
|
|
|
|
+ <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
|
|
<div class="title-b">采空区密闭参数</div>
|
|
<div class="title-b">采空区密闭参数</div>
|
|
<div class="card-btn">
|
|
<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="label">{{ item.label }}</div>
|
|
|
|
|
|
+ <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>
|
|
|
|
+ </div>
|
|
<div class="box-item box-item1">
|
|
<div class="box-item box-item1">
|
|
<span class="text-t">{{ `${item.label1}:` }}</span>
|
|
<span class="text-t">{{ `${item.label1}:` }}</span>
|
|
- <span class="text-v">{{ `${item.nd}%` }}</span>
|
|
|
|
|
|
+ <span class="text-v">{{ item.nd }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="box-item box-item2">
|
|
<div class="box-item box-item2">
|
|
<span class="text-t">{{ `${item.label2}:` }}</span>
|
|
<span class="text-t">{{ `${item.label2}:` }}</span>
|
|
@@ -132,20 +138,20 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
import { ref, computed, reactive, watch, defineProps } from 'vue';
|
|
import { ref, computed, reactive, watch, defineProps } from 'vue';
|
|
-import { topOutList, tabList,tabLists, columns, } from '../fire.data'
|
|
|
|
|
|
+import { topOutList, tabList, tabLists, columns, } from '../fire.data'
|
|
import imgUrl from '../../../../../assets/images/fire/pie.png'
|
|
import imgUrl from '../../../../../assets/images/fire/pie.png'
|
|
import echartLine2 from './common/echartLine2.vue'
|
|
import echartLine2 from './common/echartLine2.vue'
|
|
import echartLine1 from './common/echartLine1.vue'
|
|
import echartLine1 from './common/echartLine1.vue'
|
|
|
|
|
|
let props = defineProps({
|
|
let props = defineProps({
|
|
listData: Object,
|
|
listData: Object,
|
|
- strType:String
|
|
|
|
|
|
+ strType: String
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
//束管监测-顶部区域数据
|
|
//束管监测-顶部区域数据
|
|
let topContent = reactive({
|
|
let topContent = reactive({
|
|
- temperature: 0,
|
|
|
|
|
|
+ temperature: '0',
|
|
position: '',
|
|
position: '',
|
|
time: '',
|
|
time: '',
|
|
warn: '',
|
|
warn: '',
|
|
@@ -158,6 +164,7 @@ let type = ref('O₂')
|
|
let mbList = reactive([
|
|
let mbList = reactive([
|
|
{
|
|
{
|
|
label: 'O₂',
|
|
label: 'O₂',
|
|
|
|
+ dw: '(%)',
|
|
label1: '浓度',
|
|
label1: '浓度',
|
|
label2: '时间',
|
|
label2: '时间',
|
|
label3: '位置',
|
|
label3: '位置',
|
|
@@ -167,6 +174,7 @@ let mbList = reactive([
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: 'CO',
|
|
label: 'CO',
|
|
|
|
+ dw: '(ppm)',
|
|
label1: '浓度',
|
|
label1: '浓度',
|
|
label2: '时间',
|
|
label2: '时间',
|
|
label3: '位置',
|
|
label3: '位置',
|
|
@@ -176,6 +184,7 @@ let mbList = reactive([
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: 'CO₂',
|
|
label: 'CO₂',
|
|
|
|
+ dw: '(%)',
|
|
label1: '浓度',
|
|
label1: '浓度',
|
|
label2: '时间',
|
|
label2: '时间',
|
|
label3: '位置',
|
|
label3: '位置',
|
|
@@ -185,6 +194,7 @@ let mbList = reactive([
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: 'CH₄',
|
|
label: 'CH₄',
|
|
|
|
+ dw: '(%)',
|
|
label1: '浓度',
|
|
label1: '浓度',
|
|
label2: '时间',
|
|
label2: '时间',
|
|
label3: '位置',
|
|
label3: '位置',
|
|
@@ -194,6 +204,7 @@ let mbList = reactive([
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: 'C₂H₂',
|
|
label: 'C₂H₂',
|
|
|
|
+ dw: '(ppm)',
|
|
label1: '浓度',
|
|
label1: '浓度',
|
|
label2: '时间',
|
|
label2: '时间',
|
|
label3: '位置',
|
|
label3: '位置',
|
|
@@ -203,6 +214,7 @@ let mbList = reactive([
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: 'C₂H₄',
|
|
label: 'C₂H₄',
|
|
|
|
+ dw: '(ppm)',
|
|
label1: '浓度',
|
|
label1: '浓度',
|
|
label2: '时间',
|
|
label2: '时间',
|
|
label3: '位置',
|
|
label3: '位置',
|
|
@@ -239,7 +251,7 @@ let monitorlistHy = reactive([])
|
|
let monitorlistPl = reactive([])
|
|
let monitorlistPl = reactive([])
|
|
|
|
|
|
//温度传感器列表数据
|
|
//温度传感器列表数据
|
|
-let monitorlistWd=reactive([])
|
|
|
|
|
|
+let monitorlistWd = reactive([])
|
|
|
|
|
|
//束管监测密闭参数选项切换
|
|
//束管监测密闭参数选项切换
|
|
function btnClick(item, ind) {
|
|
function btnClick(item, ind) {
|
|
@@ -308,7 +320,7 @@ watch(() => props.listData, (val) => {
|
|
monitorlistYw.length = 0
|
|
monitorlistYw.length = 0
|
|
monitorlistHy.length = 0
|
|
monitorlistHy.length = 0
|
|
monitorlistPl.length = 0
|
|
monitorlistPl.length = 0
|
|
- monitorlistWd.length=0
|
|
|
|
|
|
+ monitorlistWd.length = 0
|
|
if (val.fiber.length != 0) {
|
|
if (val.fiber.length != 0) {
|
|
topOutList[0].value = val.fiber[0].readData.fmax
|
|
topOutList[0].value = val.fiber[0].readData.fmax
|
|
topOutList[1].value = val.fiber[0].readData.fmin
|
|
topOutList[1].value = val.fiber[0].readData.fmin
|
|
@@ -318,6 +330,11 @@ watch(() => props.listData, (val) => {
|
|
echartDataWd.xData.push(el.pos)
|
|
echartDataWd.xData.push(el.pos)
|
|
echartDataWd.maxData.data.push(el.value)
|
|
echartDataWd.maxData.data.push(el.value)
|
|
})
|
|
})
|
|
|
|
+ } else {
|
|
|
|
+ topOutList[0].value = '--'
|
|
|
|
+ topOutList[1].value = '--'
|
|
|
|
+ topOutList[2].value = '--'
|
|
|
|
+ topOutList[3].text = '正常'
|
|
}
|
|
}
|
|
|
|
|
|
if (val.bundletube.length != 0) {
|
|
if (val.bundletube.length != 0) {
|
|
@@ -342,6 +359,11 @@ watch(() => props.listData, (val) => {
|
|
}
|
|
}
|
|
echartDataSgList.push(v)
|
|
echartDataSgList.push(v)
|
|
})
|
|
})
|
|
|
|
+ } else {
|
|
|
|
+ topContent.temperature = '--'
|
|
|
|
+ topContent.position = '--'
|
|
|
|
+ topContent.time = '--'
|
|
|
|
+ topContent.warn = '正常'
|
|
}
|
|
}
|
|
|
|
|
|
if (val.smoke.length != 0) {
|
|
if (val.smoke.length != 0) {
|
|
@@ -363,8 +385,8 @@ watch(() => props.listData, (val) => {
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
- if(val.temperature.length!=0){
|
|
|
|
- val.temperature.forEach(el=>{
|
|
|
|
|
|
+ if (val.temperature.length != 0) {
|
|
|
|
+ val.temperature.forEach(el => {
|
|
monitorlistWd.push(el)
|
|
monitorlistWd.push(el)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
@@ -488,7 +510,7 @@ watch(() => props.listData, (val) => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
.content-box {
|
|
.content-box {
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
|
@@ -547,12 +569,12 @@ watch(() => props.listData, (val) => {
|
|
.text {
|
|
.text {
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
|
|
|
|
- .label {
|
|
|
|
|
|
+ .text-label {
|
|
color: #b3b8cc;
|
|
color: #b3b8cc;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
|
|
- .value {
|
|
|
|
|
|
+ .text-value {
|
|
font-family: 'douyuFont';
|
|
font-family: 'douyuFont';
|
|
color: #3df6ff;
|
|
color: #3df6ff;
|
|
margin-left: 10px;
|
|
margin-left: 10px;
|
|
@@ -599,7 +621,7 @@ watch(() => props.listData, (val) => {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
- .label {
|
|
|
|
|
|
+ .title-label {
|
|
// font-family: 'douyuFont';
|
|
// font-family: 'douyuFont';
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
color: #fff;
|
|
@@ -630,15 +652,16 @@ watch(() => props.listData, (val) => {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
width: calc(50% - 10px);
|
|
width: calc(50% - 10px);
|
|
- height:calc(50% - 10px);
|
|
|
|
|
|
+ height: calc(50% - 10px);
|
|
background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
|
|
|
|
&:nth-child(1) {
|
|
&:nth-child(1) {
|
|
- margin:0px 20px 20px 0px;
|
|
|
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
}
|
|
}
|
|
|
|
+
|
|
&:nth-child(3) {
|
|
&:nth-child(3) {
|
|
- margin:0px 20px 0px 0px;
|
|
|
|
|
|
+ margin: 0px 20px 0px 0px;
|
|
}
|
|
}
|
|
|
|
|
|
.title {
|
|
.title {
|
|
@@ -652,7 +675,7 @@ watch(() => props.listData, (val) => {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
- .label {
|
|
|
|
|
|
+ .title-label {
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
@@ -681,15 +704,16 @@ watch(() => props.listData, (val) => {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
width: calc(50% - 10px);
|
|
width: calc(50% - 10px);
|
|
- height:calc(50% - 10px);
|
|
|
|
|
|
+ height: calc(50% - 10px);
|
|
background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
|
|
|
|
&:nth-child(1) {
|
|
&:nth-child(1) {
|
|
- margin:0px 20px 20px 0px;
|
|
|
|
|
|
+ margin: 0px 20px 20px 0px;
|
|
}
|
|
}
|
|
|
|
+
|
|
&:nth-child(3) {
|
|
&:nth-child(3) {
|
|
- margin:0px 20px 0px 0px;
|
|
|
|
|
|
+ margin: 0px 20px 0px 0px;
|
|
}
|
|
}
|
|
|
|
|
|
.title {
|
|
.title {
|
|
@@ -703,7 +727,7 @@ watch(() => props.listData, (val) => {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
- .label {
|
|
|
|
|
|
+ .title-label {
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
@@ -767,13 +791,14 @@ watch(() => props.listData, (val) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .content-s{
|
|
|
|
|
|
+ .content-s {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 608px;
|
|
height: 608px;
|
|
padding: 15px 20px 0px 20px;
|
|
padding: 15px 20px 0px 20px;
|
|
background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
+
|
|
.title-b {
|
|
.title-b {
|
|
height: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
line-height: 30px;
|
|
@@ -796,7 +821,7 @@ watch(() => props.listData, (val) => {
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
|
- .label {
|
|
|
|
|
|
+ .btn-label {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
top: 0;
|
|
top: 0;
|
|
@@ -834,7 +859,7 @@ watch(() => props.listData, (val) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
.box-item1 {
|
|
.box-item1 {
|
|
top: 24%;
|
|
top: 24%;
|
|
}
|
|
}
|
|
@@ -856,7 +881,7 @@ watch(() => props.listData, (val) => {
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
|
|
- .label {
|
|
|
|
|
|
+ .btn-label {
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
top: 0;
|
|
top: 0;
|
|
@@ -932,5 +957,4 @@ watch(() => props.listData, (val) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+}</style>
|