|
|
@@ -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,17 +13,51 @@
|
|
|
<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">
|
|
|
- <img src="/@/assets/images/fire/pie.png" alt="" />
|
|
|
+ <div class="text">
|
|
|
+ <div class="text-label">位置: </div>
|
|
|
+ <div class="text-value">
|
|
|
+ <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
|
|
|
+ <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
|
|
|
+ }}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="text">
|
|
|
+ <span class="text-label">时间 : </span>
|
|
|
+ <span class="text-value">{{ topContent.time }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="contents">
|
|
|
+ <img src="@/assets/images/fire/pie.png" alt="" />
|
|
|
<span class="text">{{ topContent.temperature }}</span>
|
|
|
<span class="dw">°C</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content-box">
|
|
|
- <div class="text1">{{ topContent.warn }}</div>
|
|
|
+ <div class="text1">
|
|
|
+ <span>预警等级 : </span>
|
|
|
+ <span :class="{
|
|
|
+ value1: topContent.warnLevel == '绿色预警',
|
|
|
+ value2: topContent.warnLevel == '黄色预警',
|
|
|
+ value3: topContent.warnLevel == '红色预警',
|
|
|
+ }">{{ topContent.warnLevel || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="text1">
|
|
|
+ <span>煤自燃阶段 : </span>
|
|
|
+ <span>{{ topContent.smokeJd || '-' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pl-10px pr-10px">
|
|
|
+ <div class="mb-10px">
|
|
|
+ <AButton class="w-full" type="primary" @click="controlDevice('dianwei', 'zhi')">应急启动</AButton>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <AButton class="w-full" type="primary" @click="controlDevice('dianwei', 'zhi')">应急关闭</AButton>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -107,7 +141,7 @@
|
|
|
<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">
|
|
|
@@ -199,7 +233,7 @@
|
|
|
<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">
|
|
|
@@ -257,7 +291,9 @@
|
|
|
</div>
|
|
|
<div class="echart-box">
|
|
|
<div class="title-f">
|
|
|
- <div class="title-text">{{ `${type}趋势` }}</div>
|
|
|
+ <div class="title-text">
|
|
|
+ {{ `${type}趋势` }} <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="echarts-box">
|
|
|
<echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
|
|
|
@@ -268,23 +304,28 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, computed, reactive, watch, defineProps } from 'vue';
|
|
|
+import { ref, computed, reactive, watch, defineProps, h } 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';
|
|
|
+import { Modal, Input } from 'ant-design-vue';
|
|
|
|
|
|
let props = defineProps({
|
|
|
listData: Object,
|
|
|
strType: String,
|
|
|
});
|
|
|
-
|
|
|
+let selectData = ref('');
|
|
|
+let selectList = reactive<any[]>([]);
|
|
|
+let selectSj = ref<any[]>([]);
|
|
|
+let netStatus = ref(0);
|
|
|
//束管监测-顶部区域数据
|
|
|
let topContent = reactive({
|
|
|
- temperature: '0',
|
|
|
+ temperature: 0,
|
|
|
position: '',
|
|
|
time: '',
|
|
|
- warn: '',
|
|
|
+ warnLevel: '',
|
|
|
+ smokeJd: '',
|
|
|
});
|
|
|
//束管监测当前密闭参数激活选项
|
|
|
let activeIndex = ref(0);
|
|
|
@@ -298,7 +339,7 @@ let mbList = reactive([
|
|
|
label1: '浓度',
|
|
|
label2: '时间',
|
|
|
label3: '位置',
|
|
|
- nd: 0,
|
|
|
+ nd: '0',
|
|
|
time1: '',
|
|
|
address: '',
|
|
|
},
|
|
|
@@ -308,7 +349,7 @@ let mbList = reactive([
|
|
|
label1: '浓度',
|
|
|
label2: '时间',
|
|
|
label3: '位置',
|
|
|
- nd: 0,
|
|
|
+ nd: '0',
|
|
|
time1: '',
|
|
|
address: '',
|
|
|
},
|
|
|
@@ -318,7 +359,7 @@ let mbList = reactive([
|
|
|
label1: '浓度',
|
|
|
label2: '时间',
|
|
|
label3: '位置',
|
|
|
- nd: 0,
|
|
|
+ nd: '0',
|
|
|
time1: '',
|
|
|
address: '',
|
|
|
},
|
|
|
@@ -328,7 +369,7 @@ let mbList = reactive([
|
|
|
label1: '浓度',
|
|
|
label2: '时间',
|
|
|
label3: '位置',
|
|
|
- nd: 0,
|
|
|
+ nd: '0',
|
|
|
time1: '',
|
|
|
address: '',
|
|
|
},
|
|
|
@@ -338,7 +379,7 @@ let mbList = reactive([
|
|
|
label1: '浓度',
|
|
|
label2: '时间',
|
|
|
label3: '位置',
|
|
|
- nd: 0,
|
|
|
+ nd: '0',
|
|
|
time1: '',
|
|
|
address: '',
|
|
|
},
|
|
|
@@ -348,7 +389,7 @@ let mbList = reactive([
|
|
|
label1: '浓度',
|
|
|
label2: '时间',
|
|
|
label3: '位置',
|
|
|
- nd: 0,
|
|
|
+ nd: '0',
|
|
|
time1: '',
|
|
|
address: '',
|
|
|
},
|
|
|
@@ -394,6 +435,26 @@ let monitorlistPl = reactive([]);
|
|
|
//温度传感器列表数据
|
|
|
let monitorlistWd = reactive([]);
|
|
|
|
|
|
+function changeSelect(val) {
|
|
|
+ selectData.value = val;
|
|
|
+ let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
|
|
|
+ topContent.time = data.readTime || '--';
|
|
|
+ topContent.warnLevel = data.syswarnLevel_str;
|
|
|
+ topContent.smokeJd = data.syswarnLevel_des;
|
|
|
+
|
|
|
+ mbList[0].nd = data.readData.o2val || '--';
|
|
|
+ mbList[1].nd = data.readData.coval || '--';
|
|
|
+ mbList[2].nd = data.readData.co2val || '--';
|
|
|
+ mbList[3].nd = data.readData.gasval || '--';
|
|
|
+ mbList[4].nd = data.readData.chval || '--';
|
|
|
+ mbList[5].nd = data.readData.ch2val || '--';
|
|
|
+ mbList.forEach((el) => {
|
|
|
+ el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
|
|
|
+ el.address = data ? data.strinstallpos : '--';
|
|
|
+ });
|
|
|
+ netStatus.value = data['netStatus'];
|
|
|
+}
|
|
|
+
|
|
|
//束管监测密闭参数选项切换
|
|
|
function btnClick(item, ind) {
|
|
|
activeIndex.value = ind;
|
|
|
@@ -442,7 +503,49 @@ function btnClick(item, ind) {
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+// 设备控制
|
|
|
+function controlDevice(code, value?) {
|
|
|
+ const passWord = ref('');
|
|
|
+ Modal.confirm({
|
|
|
+ title: '是否确认执行该操作？',
|
|
|
+ maskClosable: true,
|
|
|
+ content: () => {
|
|
|
+ return h(Input, {
|
|
|
+ placeholder: '请输入密码',
|
|
|
+ type: 'password',
|
|
|
+ modelValue: passWord.value,
|
|
|
+ 'onUpdate:value'(val) {
|
|
|
+ passWord.value = val;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onOk() {
|
|
|
+ console.log('OK', passWord);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // Promise.all(
|
|
|
+ // [].map(({ deviceID, deviceType }) => {
|
|
|
+ // return deviceControlApi({
|
|
|
+ // deviceid: deviceID,
|
|
|
+ // devicetype: deviceType,
|
|
|
+ // paramcode: code,
|
|
|
+ // value,
|
|
|
+ // // password: passWord || globalConfig?.simulatedPassword,
|
|
|
+ // });
|
|
|
+ // })
|
|
|
+ // ).then((res) => {
|
|
|
+ // // 模拟时开启
|
|
|
+ // if (res.success) {
|
|
|
+ // if (globalConfig.History_Type == 'remote') {
|
|
|
+ // message.success('指令已下发至生产管控平台成功！');
|
|
|
+ // } else {
|
|
|
+ // message.success('指令已下发成功！');
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // message.error(res.message);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+}
|
|
|
watch(
|
|
|
() => props.listData,
|
|
|
(val) => {
|
|
|
@@ -461,6 +564,7 @@ watch(
|
|
|
monitorlistHy.length = 0;
|
|
|
monitorlistPl.length = 0;
|
|
|
monitorlistWd.length = 0;
|
|
|
+ selectList.length = 0;
|
|
|
if (val.fiber.length != 0) {
|
|
|
const fiber: any = val.fiber[0];
|
|
|
topOutList[0].value = fiber.readData.fmax;
|
|
|
@@ -483,24 +587,29 @@ watch(
|
|
|
}
|
|
|
|
|
|
if (val.bundletube.length != 0) {
|
|
|
+ selectSj.value = val.bundletube;
|
|
|
+ selectSj.value.forEach((el) => {
|
|
|
+ selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
|
|
|
+ });
|
|
|
+ selectData.value = selectData.value ? selectData.value : selectList[0].value;
|
|
|
+ let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[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) => {
|
|
|
+ topContent.time = dataVal.readTime || '--';
|
|
|
+ topContent.warnLevel = dataVal.syswarnLevel_str;
|
|
|
+ topContent.smokeJd = dataVal.syswarnLevel_des;
|
|
|
+
|
|
|
+ mbList[0].nd = dataVal.readData.o2val || '--';
|
|
|
+ mbList[1].nd = dataVal.readData.coval || '--';
|
|
|
+ mbList[2].nd = dataVal.readData.co2val || '--';
|
|
|
+ mbList[3].nd = dataVal.readData.gasval || '--';
|
|
|
+ mbList[4].nd = dataVal.readData.chval || '--';
|
|
|
+ mbList[5].nd = dataVal.readData.ch2val || '--';
|
|
|
+ mbList.forEach((el) => {
|
|
|
+ el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
|
|
|
+ el.address = dataVal ? dataVal.strinstallpos : '--';
|
|
|
+ });
|
|
|
+ netStatus.value = dataVal['netStatus'];
|
|
|
+ dataVal.history.forEach((v) => {
|
|
|
echartDataSg1.xData.push(v.time);
|
|
|
if (echartDataSg1.lengedData == 'O₂') {
|
|
|
echartDataSg1.yData.push(v.o2val);
|
|
|
@@ -518,10 +627,11 @@ watch(
|
|
|
echartDataSgList.push(v);
|
|
|
});
|
|
|
} else {
|
|
|
- topContent.temperature = '--';
|
|
|
- topContent.position = '--';
|
|
|
+ topContent.temperature = 0;
|
|
|
+ // topContent.position = '--';
|
|
|
topContent.time = '--';
|
|
|
- topContent.warn = '正常';
|
|
|
+ topContent.warnLevel = '--';
|
|
|
+ topContent.smokeJd = '--';
|
|
|
}
|
|
|
|
|
|
if (val.smoke.length != 0) {
|
|
|
@@ -705,8 +815,9 @@ watch(
|
|
|
display: flex;
|
|
|
|
|
|
&:nth-child(1) {
|
|
|
- justify-content: space-around;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ padding: 0px 40px;
|
|
|
flex: 2;
|
|
|
height: 100%;
|
|
|
border-right: 2px solid;
|
|
|
@@ -714,27 +825,54 @@ watch(
|
|
|
}
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
+ flex-direction: column;
|
|
|
flex: 1;
|
|
|
- justify-content: center;
|
|
|
+ justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- height: 100%;
|
|
|
+ height: 73%;
|
|
|
+ border-right: 2px solid;
|
|
|
+ border-image: var(--border-image-2) 1 1 1;
|
|
|
}
|
|
|
|
|
|
.contents {
|
|
|
height: 73%;
|
|
|
|
|
|
&:nth-child(1) {
|
|
|
- width: 40%;
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text-label {
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-value {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 50%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
img {
|
|
|
position: relative;
|
|
|
- width: 23%;
|
|
|
+ width: 90px;
|
|
|
height: 100%;
|
|
|
background: var(--image-pj) no-repeat center;
|
|
|
- background-size: 50% 50%;
|
|
|
+ background-size: 90px 50%;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
@@ -749,35 +887,58 @@ watch(
|
|
|
color: #b3b8cc;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &:nth-child(2) {
|
|
|
- width: 60%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
+ .text1 {
|
|
|
+ width: 90%;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b3b8cc;
|
|
|
+ font-weight: bold;
|
|
|
|
|
|
- .text {
|
|
|
- font-size: 18px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
|
|
|
- .text-label {
|
|
|
- color: #b3b8cc;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 160px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
|
|
|
- .text-value {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: var(--vent-table-action-link);
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .text1 {
|
|
|
- font-size: 16px;
|
|
|
- color: #b3b8cc;
|
|
|
- font-weight: bold;
|
|
|
+ .value1 {
|
|
|
+ color: rgb(145, 230, 9) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ // color: rgb(0, 242, 255) !important;
|
|
|
+ color: #ffff35 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value3 {
|
|
|
+ // color: #ffff35 !important;
|
|
|
+ color: #ff0000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value4 {
|
|
|
+ color: #ffbe69 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value5 {
|
|
|
+ color: #ff6f00 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value6 {
|
|
|
+ color: #ff0000 !important;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1154,7 +1315,7 @@ watch(
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
top: 38px;
|
|
|
- height: calc(100% - 48px);
|
|
|
+ height: calc(100% - 48px);
|
|
|
overflow-y: auto;
|
|
|
|
|
|
.container-content-box {
|
|
|
@@ -1503,4 +1664,17 @@ watch(
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-select-arrow) {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
</style>
|
