预警管控-内因火灾修改提交

.env.development

@@ -6,8 +6,8 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
-VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"], ["/python", "http://127.0.0.1:8008"], ["/tun2D", "http://127.0.0.1:8088/micro-vent-2dModal/tun2D"]]
-# VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
+# VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"], ["/python", "http://127.0.0.1:8008"], ["/tun2D", "http://127.0.0.1:8088/micro-vent-2dModal/tun2D"]]
+VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
 # VITE_PROXY = [["/jeecgsystem","http://10.10.150.72:9999"],["/upload","http://localhost:3300/upload"],["/documents", "http://10.10.150.72:9050"],["/modelreq", "http://10.10.150.72:9999"],["/webRtc", "http://192.168.183.216:8051"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
@@ -29,7 +29,7 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088/", "micro-vent-2dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088/", "micro-vent-2dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

src/views/vent/monitorManager/alarmMonitor/common/closeWall-111.vue

@@ -0,0 +1,881 @@
+<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>
+      <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}趋势` }}&nbsp; <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>
+    </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 : '--';
+  });
+  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');
+  }
+}
+
+.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;
+        }
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    height: calc(83% - 20px);
+    padding: 10px;
+    background: var(--image-bj1) 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: var(--vent-table-action-link);
+    }
+
+    .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;
+      }
+    }
+  }
+}
+
+: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>

src/views/vent/monitorManager/alarmMonitor/common/closeWall.copy.vue

@@ -1,348 +0,0 @@
-<template>
-    <div class="closeWall">
-      <!-- <div class="top-area">
-        <internalFireTop1 :internalFireTopData="internalFireTopData" :temperatureData="temperatureData">
-        </internalFireTop1>
-      </div>
-      <div class="content">
-        <internalFireBot1 :internalFireBotData="internalFireBotData"></internalFireBot1>
-      </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 internalFireBot1 from './internal-fire-bot1.vue';
-  // import { getMaxY, getMinY } from '../common.data'
-  // // import { deviceControlApi } from '/@/api/vent/index';
-  // import internalFireTop1 from './internal-fire-top1.vue'
-  
-  // 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 internalFireTopData = ref<any[]>([])
-  // let temperatureData = ref(0)
-  // let internalFireBotData = ref<any[]>([])
-  // // 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 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;
-  //   }
-  // }
-  
-  
-  
-  
-  
-  // /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
-  // 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;
-  //     internalFireTopData.value = val.bundletube
-  //     temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
-  //     internalFireBotData.value=val.bundletube
-  
-  //     if (val.bundletube.length != 0) {
-  //       // selectSj.value = val.bundletube;
-  
-  
-  
-  
-  
-      
-  //       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 {
-  
-  //       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');
-    }
-  }
-  
-  .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;
-  
-    .top-area {
-      width: 100%;
-      height: 17%;
-      margin-bottom: 20px;
-      background: var(--image-bj1) no-repeat center;
-      background-size: 100% 100%;
-    }
-  
-  
-  
-    .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>
-  

src/views/vent/monitorManager/alarmMonitor/common/closeWall.vue

@@ -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}趋势` }}&nbsp; <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>
+  

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-bot1.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="internal-fire-bot1">
-        <!-- <div class="title-b">采空区密闭参数</div>
+        <div class="title-b">采空区密闭参数</div>
         <div class="card-btn">
-            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+            <div :class="activeIndex == 0 ? 'box-container1' : 'box-container'"
+                @click="btnClick({ label: 'O₂', dw: '(%)' }, 0)">
                 <div class="box-label">
                     <span> O₂</span>
                     <span>(%)</span>
@@ -20,7 +21,8 @@
                     <span class="text-v">{{ bundleD.o2address }}</span>
                 </div>
             </div>
-            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+            <div :class="activeIndex == 1 ? 'box-container1' : 'box-container'"
+                @click="btnClick({ label: 'CO', dw: '(ppm)' }, 1)">
                 <div class="box-label">
                     <span> CO</span>
                     <span>(ppm)</span>
@@ -38,7 +40,8 @@
                     <span class="text-v">{{ bundleD.coaddress }}</span>
                 </div>
             </div>
-            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+            <div :class="activeIndex == 2 ? 'box-container1' : 'box-container'"
+                @click="btnClick({ label: 'CO₂', dw: '(%)' }, 2)">
                 <div class="box-label">
                     <span> CO₂</span>
                     <span>(%)</span>
@@ -56,7 +59,8 @@
                     <span class="text-v">{{ bundleD.co2address }}</span>
                 </div>
             </div>
-            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+            <div :class="activeIndex == 3 ? 'box-container1' : 'box-container'"
+                @click="btnClick({ label: 'CH₄', dw: '(%)' }, 3)">
                 <div class="box-label">
                     <span> CH₄</span>
                     <span>(%)</span>
@@ -74,7 +78,8 @@
                     <span class="text-v">{{ bundleD.ch4address }}</span>
                 </div>
             </div>
-            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+            <div :class="activeIndex == 4 ? 'box-container1' : 'box-container'"
+                @click="btnClick({ label: 'C₂H₂', dw: '(ppm)' }, 4)">
                 <div class="box-label">
                     <span> C₂H₂</span>
                     <span>(ppm)</span>
@@ -92,7 +97,8 @@
                     <span class="text-v">{{ bundleD.c2h2address }}</span>
                 </div>
             </div>
-            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+            <div :class="activeIndex == 5 ? 'box-container1' : 'box-container'"
+                @click="btnClick({ label: 'C₂H₄', dw: '(ppm)' }, 5)">
                 <div class="box-label">
                     <span> C₂H₄</span>
                     <span>(ppm)</span>
@@ -126,81 +132,278 @@
             </div>
             <div class="right-echartbox">
                 <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
-                    :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel" />
+                    :heightCanvas="heightCanvas" :warnLevel="warnLevel" />
             </div>
-        </div> -->
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive,watch } from 'vue'
-
-// let props=defineProps({
-//     internalFireBotData:{
-//         type:Array,
-//         default:()=>{
-//             return []
-//         }
-//     }
-// })
-
-// //当前密闭参数激活选项
-// let activeIndex = ref(0);
-// //密闭参数列表
-// let bundleD=reactive({
-//     o2:'',
-//     o2time:'',
-//     o2address:'',
-//     co:'',
-//     cotime:'',
-//     coaddress:'',
-//     co2:'',
-//     co2time:'',
-//     co2address:'',
-//     ch4:'',
-//     ch4time:'',
-//     ch4address:'',
-//     c2h2:'',
-//     c2h2time:'',
-//     c2h2address:'',
-//     c2h4:'',
-//     c2h4time:'',
-//     c2h4address:'',
-// })
-
-// 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 : '--';
-//       });
-
-//       watch(()=>props.internalFireBotData,(newV,oldV)=>{
-//         if(newV.length!=0){
-//             bundleD.  o2=
-//             bundleD.  o2time=
-//             bundleD.  o2address=
-//             bundleD.  co=
-//             bundleD.   cotime=
-//             bundleD.  coaddress=
-//             bundleD.  co2=
-//             bundleD.  co2time=
-//             bundleD.  co2address=
-//             bundleD.  ch4=
-//             bundleD.   ch4time=
-//             bundleD.   ch4address=
-//             bundleD.  c2h2=
-//             bundleD.   c2h2time=
-//             bundleD.  c2h2address=
-//             bundleD.  c2h4=
-//             bundleD.  c2h4time=
-//             bundleD.  c2h4address=
-//         }
-//       },{immediate:true})
+import { ref, reactive, watch } from 'vue'
+import { getMaxY, getMinY } from '../common.data'
+import echartLine1 from './echartLine1.vue';
+import warnZb from './warnZb.vue';
+import PredictionCurve from './predictionCurve.vue';
+
+let props = defineProps({
+    internalFireBotData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    },
+    selectData: {
+        type: String,
+        default: ''
+    },
+    warnLevel:{
+        type:String,
+        default:''
+    }
+})
+
+let bundletube = ref<any[]>([])
+//当前密闭参数激活选项
+let activeIndex = ref(0);
+//密闭参数列表
+let bundleD = reactive({
+    o2: '',
+    o2time: '',
+    o2address: '',
+    co: '',
+    cotime: '',
+    coaddress: '',
+    co2: '',
+    co2time: '',
+    co2address: '',
+    ch4: '',
+    ch4time: '',
+    ch4address: '',
+    c2h2: '',
+    c2h2time: '',
+    c2h2address: '',
+    c2h4: '',
+    c2h4time: '',
+    c2h4address: '',
+})
+//当前激活密闭参数类型
+let type = ref('O₂');
+let echartDataSg1 = reactive({
+    xData: [],
+    yData: [],
+    lengedData: 'O₂',
+    lengedDataName: '(%)',
+});
+let echartDataSgList = ref<any[]>([]);
+//设备连接状态
+let netStatus = ref(0);
+const shownChart = ref('default');
+/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
+const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+let maxY = ref<any>(0);
+let minY = ref<any>(0)
+    let widthV = ref('75%');
+  let heightV = ref('80%');
+  let coordDw = ref<any[]>([31, 62, 110]);
+  let widthCanvas = ref(562);
+  let heightCanvas = ref(316);
+
+//密闭参数选项切换
+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;
+
+    const data = bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0];
+    switch (type.value) {
+        case 'O₂':
+            echartDataSgList.value.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.value.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.value.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.value.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.value.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.value.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 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;
+    // }
+}
+
+watch(() => props.internalFireBotData, (newV, oldV) => {
+    echartDataSg1.xData.length = 0;
+    echartDataSg1.yData.length = 0;
+    if (newV.length != 0) {
+        bundletube.value = newV
+        let dataVal = props.selectData ? bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0] : bundletube.value[0];
+        let times = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) || '--';
+        let address = dataVal.strinstallpos || '--';
+        bundleD.o2 = dataVal.readData.o2val || '--';
+        bundleD.o2time = times
+        bundleD.o2address = address
+        bundleD.co = dataVal.readData.coval || '--';
+        bundleD.cotime = times
+        bundleD.coaddress = address;
+        bundleD.co2 = dataVal.readData.co2val || '--';
+        bundleD.co2time = times
+        bundleD.co2address = address;
+        bundleD.ch4 = dataVal.readData.gasval || '--';
+        bundleD.ch4time =times
+        bundleD.ch4address = address;
+        bundleD.c2h2 = dataVal.readData.chval || '--';
+        bundleD.c2h2time = times
+        bundleD.c2h2address = address;
+        bundleD.c2h4 = dataVal.readData.ch2val || '--';
+        bundleD.c2h4time = times
+        bundleD.c2h4address = address;
+
+        echartDataSgList.value = dataVal.history;
+        netStatus.value = dataVal['netStatus'];
+        btnClick(
+            {
+                label: type.value,
+                dw: echartDataSg1.lengedDataName,
+            },
+            activeIndex.value
+        );
+        getmax();
+    }
+}, { immediate: true })
 
 </script>
 
@@ -234,7 +437,7 @@ import { ref, reactive,watch } from 'vue'
         font-family: 'douyuFont';
         font-size: 14px;
         color: #fff;
-      
+
     }
 
     .card-btn {

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-top1.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="internal-fire-top1">
-        <!-- <div class="box-container">
+        <div class="box-container">
             <div class="contents">
                 <div class="text">
                     <div class="text-label">位置: </div>
@@ -45,129 +45,132 @@
             <div>
                 <AButton class="w-full" type="primary" @click="controlDevice('dianwei', 'zhi')">应急关闭</AButton>
             </div>
-        </div> -->
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-// import { ref, reactive, watch,h } from 'vue'
-// import { Modal, Input } from 'ant-design-vue';
-
-// let props = defineProps({
-//     internalFireTopData: {
-//         type: Array,
-//         default: () => {
-//             return []
-//         }
-//     },
-//     temperatureData: {
-//         type: Number,
-//         default: ''
-//     }
-// })
-
-// let selectData = ref('');//下拉默认选中
-// let selectList = ref<any[]>([]);//下拉列表
-
-
-// let topContent = reactive({
-//     temperature: 0,
-//     position: '',
-//     time: '',
-//     warnLevel: '',
-//     smokeJd: '',
-// });
-
-// let bundletube = ref<any[]>([])
-
-
-// //选项切换
-// function changeSelect(val) {
-//   selectData.value = val;
-//   let data = bundletube.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 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.internalFireTopData, (newV, oldV) => {
-//     if (newV.length != 0) {
-//         bundletube.value = newV
-//         //下拉列表
-//         selectList.value = bundletube.value.map((el) => {
-//             return { label: el.strinstallpos, value: el.strinstallpos }
-//         });
-//         //下拉默认选中
-//         selectData.value = selectData.value ? selectData.value : selectList[0].value;
-
-//         let dataVal = selectData.value ? bundletube.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletube.value[0];
-//         topContent.temperature = props.temperatureData;
-//         topContent.time = dataVal.readTime || '--';
-//         topContent.warnLevel = dataVal.syswarnLevel_str;
-//         topContent.smokeJd = dataVal.syswarnLevel_des;
-//     } else {
-//         topContent.temperature = 0;
-//         // topContent.position = '--';
-//         topContent.time = '--';
-//         topContent.warnLevel = '--';
-//         topContent.smokeJd = '--';
-//     }
-// }, { immediate: true })
+import { ref, reactive, watch,h,defineEmits } from 'vue'
+import { Modal, Input } from 'ant-design-vue';
+
+let props = defineProps({
+    internalFireTopData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    },
+    temperatureData: {
+        type: Number,
+        default: ''
+    }
+})
+
+let selectData = ref('');//下拉默认选中
+let selectList = ref<any[]>([]);//下拉列表
+let $emit=defineEmits(['changeSelect','changeWarnLevel'])
+
+
+let topContent = reactive({
+    temperature: 0,
+    position: '',
+    time: '',
+    warnLevel: '',
+    smokeJd: '',
+});
+
+let bundletube = ref<any[]>([])
+
+
+//选项切换
+function changeSelect(val) {
+  selectData.value = val;
+  let data = bundletube.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 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.internalFireTopData, (newV, oldV) => {
+    if (newV.length != 0) {
+        bundletube.value = newV
+        //下拉列表
+        selectList.value = bundletube.value.map((el) => {
+            return { label: el.strinstallpos, value: el.strinstallpos }
+        });
+        //下拉默认选中
+        selectData.value = selectData.value ? selectData.value : selectList.value[0].value;
+
+        let dataVal = selectData.value ? bundletube.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletube.value[0];
+        topContent.temperature = props.temperatureData;
+        topContent.time = dataVal.readTime || '--';
+        topContent.warnLevel = dataVal.syswarnLevel_str;
+        topContent.smokeJd = dataVal.syswarnLevel_des;
+        $emit('changeSelect', selectData.value)
+        $emit('changeWarnLevel',topContent.warnLevel)
+    } else {
+        topContent.temperature = 0;
+        // topContent.position = '--';
+        topContent.time = '--';
+        topContent.warnLevel = '--';
+        topContent.smokeJd = '--';
+    }
+}, { immediate: true })
 
 </script>