|
|
@@ -1,881 +1,108 @@
|
|
|
<template>
|
|
|
- <div class="closeWall">
|
|
|
- <div class="title">
|
|
|
- <div class="box-container">
|
|
|
- <div class="contents">
|
|
|
- <div class="text">
|
|
|
- <div class="text-label">位置: </div>
|
|
|
- <!-- <div class="text-value">{{ topContent.position }}</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 class="closeWall">
|
|
|
+ <div class="top-area">
|
|
|
+ <internalFireTop1 :internalFireTopData="internalFireTopData" :temperatureData="temperatureData" @changeSelect="changeSelect" @changeWarnLevel="changeWarnLevel">
|
|
|
+ </internalFireTop1>
|
|
|
</div>
|
|
|
- <div class="box-container">
|
|
|
- <div class="text1">
|
|
|
- <span>预警等级 : </span>
|
|
|
- <span :class="{
|
|
|
- value1: topContent.warnLevel == '绿色预警',
|
|
|
- value2: topContent.warnLevel == '黄色预警',
|
|
|
- value3: topContent.warnLevel == '红色预警',
|
|
|
- value4: 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>
|
|
|
- <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="box-label">
|
|
|
- <span> {{ item.label }}</span>
|
|
|
- <span>{{ item.dw }}</span>
|
|
|
- </div>
|
|
|
- <div class="box-item box-item1">
|
|
|
- <span class="text-t">{{ `${item.label1}:` }}</span>
|
|
|
- <span class="text-v">{{ item.nd }}</span>
|
|
|
- </div>
|
|
|
- <div class="box-item box-item2">
|
|
|
- <span class="text-t">{{ `${item.label2}:` }}</span>
|
|
|
- <span class="text-v">{{ item.time1 }}</span>
|
|
|
- </div>
|
|
|
- <div class="box-item box-item3">
|
|
|
- <span class="text-t">{{ `${item.label3}:` }}</span>
|
|
|
- <span class="text-v">{{ item.address }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="echart-box">
|
|
|
- <div class="left-echartbox">
|
|
|
- <div class="title-f">
|
|
|
- <div class="title-text">
|
|
|
- {{ `${type}趋势` }} <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <BaseTab
|
|
|
- style="width: 180px; color: var(--vent-font-color)"
|
|
|
- :tabs="[
|
|
|
- { name: '实时监测', id: 'default' },
|
|
|
- { name: '预测曲线', id: 'predict' },
|
|
|
- ]"
|
|
|
- v-model:id="shownChart"
|
|
|
- /> -->
|
|
|
- </div>
|
|
|
- <div class="echarts-box">
|
|
|
- <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
|
|
|
- <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1"
|
|
|
- :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" :minY="minY" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right-echartbox">
|
|
|
- <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
|
|
|
- :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel" />
|
|
|
- </div>
|
|
|
+ <div class="content">
|
|
|
+ <internalFireBot1 :internalFireBotData="internalFireBotData" :selectData="selectData" :warnLevel="warnLevel"></internalFireBot1>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { ref, reactive, watch, defineProps, inject, h } from 'vue';
|
|
|
-import echartLine1 from './echartLine1.vue';
|
|
|
-import warnZb from './warnZb.vue';
|
|
|
-import PredictionCurve from './predictionCurve.vue';
|
|
|
-import { Modal, Input } from 'ant-design-vue';
|
|
|
-import { getMaxY, getMinY } from '../common.data'
|
|
|
-// import { deviceControlApi } from '/@/api/vent/index';
|
|
|
-
|
|
|
-let props = defineProps({
|
|
|
- listData: Object,
|
|
|
-});
|
|
|
-
|
|
|
-const globalConfig = inject('globalConfig');
|
|
|
-const shownChart = ref('default');
|
|
|
-let maxY = ref<any>(0);
|
|
|
-let minY = ref<any>(0)
|
|
|
-let selectSj = ref<any[]>([]);
|
|
|
-let selectData = ref('');
|
|
|
-let selectList = reactive<any[]>([]);
|
|
|
-let widthV = ref('75%');
|
|
|
-let heightV = ref('80%');
|
|
|
-let coordDw = ref<any[]>([31, 62, 110]);
|
|
|
-let widthCanvas = ref(562);
|
|
|
-let heightCanvas = ref(316);
|
|
|
-//设备连接状态
|
|
|
-let netStatus = ref(0);
|
|
|
-//密闭-顶部区域数据
|
|
|
-let topContent = reactive({
|
|
|
- temperature: 0,
|
|
|
- position: '',
|
|
|
- time: '',
|
|
|
- warnLevel: '',
|
|
|
- smokeJd: '',
|
|
|
-});
|
|
|
-//密闭参数列表
|
|
|
-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 getmax() {
|
|
|
- getMaxY(echartDataSg1.yData)
|
|
|
- getMinY(echartDataSg1.yData)
|
|
|
- // maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
|
|
|
- // return acr > cur ? acr : cur;
|
|
|
- // });
|
|
|
- // maxY.value =
|
|
|
- // maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
|
|
|
- // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
|
|
|
- // maxY.value = 1;
|
|
|
- // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
|
|
|
- // maxY.value = 10;
|
|
|
- // } else if (maxY.value.length < 3) {
|
|
|
- // maxY.value = (Number(maxY.value[0]) + 1) * 10;
|
|
|
- // } else if (maxY.value.length < 4) {
|
|
|
- // maxY.value = (Number(maxY.value[0]) + 1) * 100;
|
|
|
- // } else if (maxY.value.length < 5) {
|
|
|
- // maxY.value = (Number(maxY.value[0]) + 1) * 1000;
|
|
|
- // } else if (maxY.value.length < 6) {
|
|
|
- // maxY.value = (Number(maxY.value[0]) + 1) * 10000;
|
|
|
- // }
|
|
|
-}
|
|
|
-//密闭参数选项切换
|
|
|
-function btnClick(item, ind) {
|
|
|
- // debugger;
|
|
|
- activeIndex.value = ind;
|
|
|
- type.value = item.label;
|
|
|
- echartDataSg1.xData.length = 0;
|
|
|
- echartDataSg1.yData.length = 0;
|
|
|
- echartDataSg1.lengedData = type.value;
|
|
|
- echartDataSg1.lengedDataName = item.dw;
|
|
|
-
|
|
|
- const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
|
|
|
- switch (type.value) {
|
|
|
- case 'O₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.o2val);
|
|
|
- });
|
|
|
-
|
|
|
- curveConfig.value = {
|
|
|
- id: 'o2',
|
|
|
- label: 'O₂',
|
|
|
- time: echartDataSg1.xData,
|
|
|
- data: [
|
|
|
- // 氧气预测曲线
|
|
|
- data.avgParam?.avg_o2_value || 0,
|
|
|
- data.avgParam?.max_o2_value || 0,
|
|
|
- data.avgParam?.min_o2_value || 0,
|
|
|
- // data.readData?.o2val,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg1.yData,
|
|
|
- };
|
|
|
- getmax();
|
|
|
- break;
|
|
|
- case 'C₂H₄':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.ch2val);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'ch2',
|
|
|
- label: 'C₂H₄',
|
|
|
- time: echartDataSg1.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_c2h4_value || 0,
|
|
|
- data.avgParam?.max_c2h4_value || 0,
|
|
|
- data.avgParam?.min_c2h4_value || 0,
|
|
|
- // data.readData?.ch2val,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg1.yData,
|
|
|
- };
|
|
|
- getmax();
|
|
|
- break;
|
|
|
- case 'CO':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.coval);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'co',
|
|
|
- label: 'CO',
|
|
|
- time: echartDataSg1.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_co_value || 0,
|
|
|
- data.avgParam?.max_co_value || 0,
|
|
|
- data.avgParam?.min_co_value || 0,
|
|
|
- // data.readData?.coval,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg1.yData,
|
|
|
- };
|
|
|
- getmax();
|
|
|
- break;
|
|
|
- case 'CH₄':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.gasval);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'ch',
|
|
|
- label: 'CH₄',
|
|
|
- time: echartDataSg1.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_ch4_value || 0,
|
|
|
- data.avgParam?.max_ch4_value || 0,
|
|
|
- data.avgParam?.min_ch4_value || 0,
|
|
|
- // data.readData?.chval,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg1.yData,
|
|
|
- };
|
|
|
- getmax();
|
|
|
- break;
|
|
|
- case 'CO₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.co2val);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'co2',
|
|
|
- label: 'CO₂',
|
|
|
- time: echartDataSg1.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_co2_value || 0,
|
|
|
- data.avgParam?.max_co2_value || 0,
|
|
|
- data.avgParam?.min_co2_value || 0,
|
|
|
- // data.readData?.co2val,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg1.yData,
|
|
|
- };
|
|
|
- getmax();
|
|
|
- break;
|
|
|
- case 'C₂H₂':
|
|
|
- echartDataSgList.forEach((el) => {
|
|
|
- echartDataSg1.xData.push(el.time);
|
|
|
- echartDataSg1.yData.push(el.chval);
|
|
|
- });
|
|
|
- curveConfig.value = {
|
|
|
- id: 'gas',
|
|
|
- label: 'C₂H₂',
|
|
|
- time: echartDataSg1.xData,
|
|
|
- data: [
|
|
|
- // 预测曲线
|
|
|
- data.avgParam?.avg_c2h2_value || 0,
|
|
|
- data.avgParam?.max_c2h2_value || 0,
|
|
|
- data.avgParam?.min_c2h2_value || 0,
|
|
|
- // data.readData?.gasval,
|
|
|
- ],
|
|
|
- monitorData: echartDataSg1.yData,
|
|
|
- };
|
|
|
- getmax();
|
|
|
- break;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-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 : '--';
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script lang="ts" setup>
|
|
|
+ import { ref, reactive, watch, defineProps, inject, } from 'vue';
|
|
|
+ import internalFireBot1 from './internal-fire-bot1.vue';
|
|
|
+ import internalFireTop1 from './internal-fire-top1.vue'
|
|
|
+
|
|
|
+ let props = defineProps({
|
|
|
+ listData: Object,
|
|
|
});
|
|
|
- netStatus.value = data['netStatus'];
|
|
|
-}
|
|
|
-
|
|
|
-// 设备控制
|
|
|
-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);
|
|
|
- // }
|
|
|
- // });
|
|
|
-}
|
|
|
-
|
|
|
-/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
|
|
|
-const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
|
|
|
-
|
|
|
-watch(
|
|
|
- () => props.listData,
|
|
|
- (val: any) => {
|
|
|
- echartDataSg1.xData.length = 0;
|
|
|
- echartDataSg1.yData.length = 0;
|
|
|
- echartDataSgList.length = 0;
|
|
|
- selectList.length = 0;
|
|
|
- if (JSON.stringify(val) === '{}') return;
|
|
|
- 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.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'];
|
|
|
- echartDataSgList = dataVal.history;
|
|
|
- btnClick(
|
|
|
- {
|
|
|
- label: type.value,
|
|
|
- dw: echartDataSg1.lengedDataName,
|
|
|
- },
|
|
|
- activeIndex.value
|
|
|
- );
|
|
|
- // dataVal.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);
|
|
|
- // });
|
|
|
- getmax();
|
|
|
- } else {
|
|
|
- topContent.temperature = 0;
|
|
|
- // topContent.position = '--';
|
|
|
- topContent.time = '--';
|
|
|
- topContent.warnLevel = '--';
|
|
|
- topContent.smokeJd = '--';
|
|
|
- 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 }
|
|
|
-);
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-@import '/@/design/theme.less';
|
|
|
-
|
|
|
-@{theme-deepblue} {
|
|
|
- .closeWall {
|
|
|
- --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
- --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');
|
|
|
+
|
|
|
+ const globalConfig = inject('globalConfig');
|
|
|
+
|
|
|
+ let internalFireTopData = ref<any[]>([])
|
|
|
+ let temperatureData = ref(0)
|
|
|
+ let internalFireBotData = ref<any[]>([])
|
|
|
+ let selectData=ref('')
|
|
|
+ let warnLevel=ref('')
|
|
|
+
|
|
|
+ function changeSelect(data){
|
|
|
+ selectData.value=data
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.closeWall {
|
|
|
- --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
- --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;
|
|
|
-
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 17%;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .box-container {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0px 40px;
|
|
|
- flex: 2;
|
|
|
- height: 100%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- flex-direction: column;
|
|
|
- flex: 1;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- height: 73%;
|
|
|
- border-right: 2px solid;
|
|
|
- border-image: var(--border-image-2) 1 1 1;
|
|
|
- }
|
|
|
-
|
|
|
- .contents {
|
|
|
- height: 73%;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- 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: 90px;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-pj) no-repeat center;
|
|
|
- background-size: 90px 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 28px;
|
|
|
- margin: 0px 15px;
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- }
|
|
|
-
|
|
|
- .dw {
|
|
|
- font-size: 14px;
|
|
|
- color: #b3b8cc;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text1 {
|
|
|
- width: 90%;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 14px;
|
|
|
- color: #b3b8cc;
|
|
|
- font-weight: bold;
|
|
|
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
-
|
|
|
- &:nth-child(1) {
|
|
|
- width: 160px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(2) {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: var(--vent-table-action-link);
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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: orange !important;
|
|
|
- }
|
|
|
-
|
|
|
- .value5 {
|
|
|
- color: #ff6f00 !important;
|
|
|
- }
|
|
|
-
|
|
|
- .value6 {
|
|
|
- color: #ff0000 !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ function changeWarnLevel(data){
|
|
|
+ warnLevel.value=data
|
|
|
+ }
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.listData,
|
|
|
+ (val: any) => {
|
|
|
+ if (JSON.stringify(val) === '{}') return;
|
|
|
+ internalFireTopData.value = val.bundletube
|
|
|
+ temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
|
|
|
+ internalFireBotData.value=val.bundletube
|
|
|
+ },
|
|
|
+ { immediate: true, deep: true }
|
|
|
+ );
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="less" scoped>
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+
|
|
|
+ @{theme-deepblue} {
|
|
|
+ .closeWall {
|
|
|
+ --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
|
|
|
+ --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');
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .content {
|
|
|
+
|
|
|
+ .closeWall {
|
|
|
+ --image-bj1: url('/@/assets/images/fire/bj1.png');
|
|
|
+ --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: calc(83% - 20px);
|
|
|
- padding: 10px;
|
|
|
- background: var(--image-bj1) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
- .title-b {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- // color: var(--vent-table-action-link);
|
|
|
+
|
|
|
+ .top-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 17%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-
|
|
|
- .card-btn {
|
|
|
- height: 28%;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .box-container {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-1) 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: 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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-item1 {
|
|
|
- top: 24%;
|
|
|
- }
|
|
|
-
|
|
|
- .box-item2 {
|
|
|
- top: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .box-item3 {
|
|
|
- top: 75%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-container1 {
|
|
|
- position: relative;
|
|
|
- width: 16%;
|
|
|
- height: 100%;
|
|
|
- background: var(--image-2) 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: 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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-item1 {
|
|
|
- top: 19%;
|
|
|
- }
|
|
|
-
|
|
|
- .box-item2 {
|
|
|
- top: 41%;
|
|
|
- }
|
|
|
-
|
|
|
- .box-item3 {
|
|
|
- top: 63%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .echart-box {
|
|
|
- display: flex;
|
|
|
- height: calc(72% - 41px);
|
|
|
-
|
|
|
- .left-echartbox {
|
|
|
- width: calc(50% - 6px);
|
|
|
- margin-right: 6px;
|
|
|
- border: 1px solid #114aac;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- .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: var(--vent-table-action-link);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .echarts-box {
|
|
|
- height: calc(100% - 40px);
|
|
|
- padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-echartbox {
|
|
|
- width: calc(50% - 6px);
|
|
|
- margin-left: 6px;
|
|
|
- border: 1px solid #114aac;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(83% - 20px);
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--image-bj1) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-: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>
|
|
|
+
|
|
|
+ :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>
|
|
|
+
|
