Просмотр исходного кода

[Feat 0000]塔山注氮页面bug修复 密码弹窗开发

bobo04052021@163.com 2 месяцев назад
Родитель
Сommit
4b3083fd54

+ 3 - 0
src/assets/images/home-container/configurable/close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37.6" height="37.6" viewBox="0 0 37.6 37.6">
+  <path id="关闭" d="M18.8,37.6A18.8,18.8,0,1,1,37.6,18.8,18.8,18.8,0,0,1,18.8,37.6Zm0-34.914c-8.405,0-16.114,7.709-16.114,16.114S10.394,34.914,18.8,34.914,34.914,27.2,34.914,18.8,27.2,2.686,18.8,2.686Zm8.425,24.673a1.789,1.789,0,0,1-2.532,0l-5.7-5.7-5.7,5.7a1.79,1.79,0,1,1-2.533-2.532l5.7-5.7-5.7-5.7A1.79,1.79,0,1,1,13.3,10.9L19,16.6l5.7-5.7a1.79,1.79,0,1,1,2.532,2.532l-5.7,5.7,5.7,5.7a1.79,1.79,0,0,1,0,2.532Z" fill="#36c7ff" opacity="0.8"/>
+</svg>

BIN
src/assets/images/home-container/configurable/confirmBj.png


BIN
src/assets/images/home-container/configurable/confirmTitle.png


+ 6 - 0
src/assets/images/home-container/configurable/hidePassword.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.727" height="19.204" viewBox="0 0 21.727 19.204">
+  <g id="密码不可见" opacity="0.7">
+    <path id="路径_57174" data-name="路径 57174" d="M35.3,73.6a15.31,15.31,0,0,0-3.128-4.515L30.9,70.358a13.324,13.324,0,0,1,2.712,3.89c-2.073,4.291-5.015,6.329-9.037,6.329a9.646,9.646,0,0,1-3.335-.558l-1.373,1.373a11.075,11.075,0,0,0,4.708.979q7.183,0,10.719-7.482a1.5,1.5,0,0,0,0-1.284Zm-1.585-7.989-1.06-1.064a.2.2,0,0,0-.282,0l-2.726,2.723a10.978,10.978,0,0,0-5.065-1.15q-7.183,0-10.719,7.481a1.5,1.5,0,0,0,0,1.284,14.979,14.979,0,0,0,3.4,4.768L14.626,82.3a.2.2,0,0,0,0,.281L15.69,83.64a.2.2,0,0,0,.282,0L33.715,65.9a.2.2,0,0,0,0-.282ZM15.545,74.247c2.075-4.291,5.017-6.329,9.036-6.329a9.451,9.451,0,0,1,3.716.708l-1.752,1.752a4.386,4.386,0,0,0-5.933,5.933L18.533,78.39a12.95,12.95,0,0,1-2.989-4.142Zm6.147,0a2.794,2.794,0,0,1,3.642-2.658L21.823,75.1a2.791,2.791,0,0,1-.132-.852Z" transform="translate(-13.718 -64.494)" fill="#fff"/>
+    <path id="路径_57175" data-name="路径 57175" d="M436.926,444.374c-.086,0-.171,0-.256-.011l-1.316,1.316a4.387,4.387,0,0,0,5.667-5.666l-1.317,1.316a2.786,2.786,0,0,1-2.778,3.045Z" transform="translate(-426.162 -431.826)" fill="#fff"/>
+  </g>
+</svg>

BIN
src/assets/images/home-container/configurable/input-error.png


BIN
src/assets/images/home-container/configurable/input-success.png


+ 3 - 0
src/assets/images/home-container/configurable/showPassword.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.75" height="16.822" viewBox="0 0 22.75 16.822">
+  <path id="密码可见" d="M72.117,135.911c-.944,4.5-5.449,7.911-10.865,7.911s-9.918-3.411-10.863-7.911c.943-4.5,5.449-7.911,10.864-7.911S71.172,131.411,72.117,135.911Zm-5.227,4.426a7.866,7.866,0,0,0,3.177-4.426c-.942-3.6-4.6-6.146-8.813-6.146s-7.871,2.549-8.813,6.146c.939,3.6,4.6,6.152,8.813,6.153A9.877,9.877,0,0,0,66.89,140.337Zm-8.831-1.629a3.617,3.617,0,0,1,0-5.594,4.985,4.985,0,0,1,6.39,0,3.617,3.617,0,0,1,0,5.594A4.985,4.985,0,0,1,58.058,138.708Zm4.97-1.243a2.01,2.01,0,0,0,0-3.108,2.77,2.77,0,0,0-3.551,0,2.01,2.01,0,0,0,0,3.108A2.77,2.77,0,0,0,63.029,137.465Z" transform="translate(-49.879 -127.5)" fill="#fff" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" opacity="0.7"/>
+</svg>

+ 3 - 3
src/components/vent/BasicMonitoring.vue

@@ -215,9 +215,9 @@ async function getSysDataSource() {
 // 切换检测数据
 function changeSelectRow(deviceID) {
   optionValue.value = deviceID;
-  // if (props.monitorType !== 'nitrogenMonitor') {
-  getDeviceList();
-  // }
+  if (props.monitorType !== 'nitrogenMonitor') {
+    getDeviceList();
+  }
 }
 
 /** 当前场景所关联设备 */

+ 344 - 0
src/views/vent/gas/components/modal/confirmModal1.vue

@@ -0,0 +1,344 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div v-if="visible" class="password-dialog-overlay" @click.self="handleOverlayClick">
+        <div class="password-dialog">
+          <!-- 标题栏 -->
+          <div class="dialog-header">
+            <h3>密码校验</h3>
+          </div>
+          <div class="close-btn" @click="handleCancel">
+            <img src="@/assets/images/home-container/configurable/close.svg" alt="" />
+          </div>
+
+          <!-- 内容区域 -->
+          <div class="dialog-content">
+            <!-- 密码输入框 -->
+            <div class="input-wrapper" :class="{ error: showError }">
+              <input
+                ref="passwordInput"
+                v-model="password"
+                :type="showPassword ? 'text' : 'password'"
+                :placeholder="placeholder"
+                maxlength="20"
+                @keyup.enter="handleConfirm"
+                @input="clearError"
+              />
+              <!-- 显示/隐藏密码切换 -->
+              <button type="button" class="toggle-password" @click="togglePassword" tabindex="-1">
+                <span v-if="showPassword"> <img src="@/assets/images/home-container/configurable/showPassword.svg" alt="" /></span>
+                <span v-else> <img src="@/assets/images/home-container/configurable/hidePassword.svg" alt="" /></span>
+              </button>
+            </div>
+
+            <!-- 错误提示 -->
+            <Transition name="slide">
+              <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+            </Transition>
+          </div>
+
+          <!-- 按钮区域 -->
+          <div class="dialog-footer">
+            <button class="btn cancel" @click="handleCancel"><span>取消</span></button>
+            <button class="btn confirm" @click="handleConfirm"><span>确认</span></button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, nextTick, watch } from 'vue';
+
+// Props
+const props = defineProps({
+  // 弹窗显示状态
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  // 提示消息
+  message: {
+    type: String,
+    default: '',
+  },
+  // 输入框占位符
+  placeholder: {
+    type: String,
+    default: '请输入密码(必填)',
+  },
+  // 点击遮罩层是否关闭
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+// Emits
+const emit = defineEmits(['update:visible', 'confirm', 'cancel', 'forgot-password', 'error']);
+
+// 状态
+const password = ref('');
+const showPassword = ref(false);
+const errorMessage = ref('');
+const showError = ref(false);
+const passwordInput = ref(null);
+
+// 监听弹窗显示,自动聚焦
+watch(
+  () => props.visible,
+  async (newVal) => {
+    if (newVal) {
+      await nextTick();
+      passwordInput.value?.focus();
+      // 重置状态
+      password.value = '';
+      errorMessage.value = '';
+      showError.value = false;
+    }
+  }
+);
+
+// 清除错误
+const clearError = () => {
+  showError.value = false;
+  errorMessage.value = '';
+};
+
+// 切换密码显示
+const togglePassword = () => {
+  showPassword.value = !showPassword.value;
+};
+
+// 处理取消
+const handleCancel = () => {
+  emit('update:visible', false);
+  emit('handleCancel');
+  resetState();
+};
+// 处理确认
+const handleConfirm = async () => {
+  if (!password.value) {
+    showError.value = true;
+    errorMessage.value = '请输入密码';
+    return;
+  }
+  showError.value = false;
+  try {
+    // 触发确认事件,返回密码
+    const result = await emit('handleConfirm', password.value);
+    // 如果确认成功(组件外部处理),关闭弹窗
+    if (result !== false) {
+      handleCancel();
+    }
+  } catch (error) {
+    // 密码错误
+    showError.value = true;
+    errorMessage.value = '密码错误';
+
+    // 清空密码输入
+    password.value = '';
+
+    // 重新聚焦
+    await nextTick();
+    passwordInput.value?.focus();
+  } finally {
+  }
+};
+// 点击遮罩层
+const handleOverlayClick = () => {
+  if (props.closeOnClickOverlay) {
+    handleCancel();
+  }
+};
+
+// 重置状态
+const resetState = () => {
+  password.value = '';
+  showPassword.value = false;
+  errorMessage.value = '';
+  showError.value = false;
+};
+
+// 暴露方法给父组件
+defineExpose({
+  resetState,
+  focus: () => passwordInput.value?.focus(),
+});
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+.password-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.password-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 12px;
+  width: 500px; /* 固定宽度 */
+  height: 270px; /* 固定高度 */
+  background: url('/@/assets/images/home-container/configurable/confirmBj.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+/* 调整 close-btn 的位置 */
+.close-btn {
+  width: 30px;
+  position: absolute;
+  top: -6px;
+  right: -23px;
+  cursor: pointer;
+}
+
+/* 调整标题位置 */
+.dialog-header {
+  padding: 20px 24px;
+  text-align: center;
+  color: #fff;
+  background: url('/src/assets/images/home-container/configurable/confirmTitle.png') no-repeat;
+  background-size: 100% 40%;
+  width: 70%;
+  margin: 30px auto 0; /* 改为 margin: 30px auto 0 */
+}
+
+.dialog-header h3 {
+  margin: 5px;
+  font-size: 18px;
+  color: #fff;
+  margin-top: -35px;
+  font-family: 'douyuFont';
+}
+.close-btn :hover {
+  cursor: pointer;
+}
+
+/* 内容区域 */
+.dialog-content {
+  padding: 24px;
+}
+
+.input-wrapper {
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.input-wrapper input {
+  width: 100%;
+  padding: 12px 40px 12px 12px;
+  background: url('/@/assets/images/home-container/configurable/input-success.png') no-repeat;
+  background-size: 100% 100%;
+  border-radius: 8px;
+  border: none;
+  font-size: 16px;
+  transition: all 0.3s;
+  box-sizing: border-box;
+  color: #fff;
+  height: 53px;
+}
+
+.input-wrapper input:focus {
+  outline: none;
+}
+
+.input-wrapper.error input {
+  background: url('/@/assets/images/home-container/configurable/input-error.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.toggle-password {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: #999 !important;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggle-password:hover {
+  color: #666;
+}
+
+.error-message {
+  color: #e90203;
+  font-size: 16px;
+  margin: 4px 0 0 0;
+  min-height: 18px;
+  text-align: center;
+}
+
+.forgot-password {
+  display: inline-block;
+  margin-top: 12px;
+  color: #409eff;
+  font-size: 14px;
+  text-decoration: none;
+}
+
+.forgot-password:hover {
+  text-decoration: underline;
+}
+
+/* 底部按钮 */
+/* 调整底部按钮位置 */
+.dialog-footer {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: auto;
+  display: flex;
+  gap: 10px;
+}
+
+.btn {
+  flex: 1;
+  cursor: pointer;
+  transition: all 0.3s;
+  border-radius: 5px;
+  height: 40px;
+}
+
+.btn.cancel {
+  width: 100px;
+  background: none;
+  color: #fff;
+  border: 2px solid #1b6e96;
+}
+
+.btn.confirm {
+  width: 100px;
+  margin-left: 10px;
+  background-color: #1da2a9;
+  border: 2px solid #2effee;
+  color: #fff;
+}
+
+.btn.confirm:disabled {
+  background-color: #a0cfff;
+  cursor: not-allowed;
+}
+</style>

+ 33 - 27
src/views/vent/home/configurable/components/preset/nitrogenBtnList.vue

@@ -10,19 +10,11 @@
       </div>
     </div>
   </div>
-  <ConfirmModal v-model:visible="modalVisible" @cancel="handleCancel" class="btn-confirm-modal">
-    <SvgIcon class="icon" size="34" name="warning-icon-gas" />
-    <span> {{ currentButton?.content }} </span>
-    <inputPassword v-model:value="password" placeholder="请输入密码校验(必填)" class="pswInput" />
-    <template #footer>
-      <a-button type="primary" @click="handleConfirm">确认</a-button>
-      <a-button type="primary" @click="handleCancel">取消</a-button>
-    </template>
-  </ConfirmModal>
+  <ConfirmModal v-model:visible="modalVisible" @handleCancel="handleCancel" @handleConfirm="handleConfirm" class="btn-confirm-modal"> </ConfirmModal>
 </template>
 
 <script setup lang="ts">
-import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal.vue';
+import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal1.vue';
 import { ref, inject } from 'vue';
 import { InputPassword } from 'ant-design-vue';
 let props = defineProps({
@@ -41,36 +33,51 @@ interface ButtonItem {
   value: string | number;
   label: string;
   content: string;
-  // 可以根据实际需求添加其他属性
 }
 const password = ref('');
 const inputWarn = ref('密码错误请重新输入');
 const modalVisible = ref(false);
-const currentButton = ref<ButtonItem | null>(null); // 记录当前点击的按钮
+const currentButton = ref({}); // 记录当前点击的按钮
 const toggleStatus = (btn: ButtonItem, index) => {
   modalVisible.value = !modalVisible.value;
-  props.buttonList[index].isRunning = !props.buttonList[index].isRunning;
-  const currentBtn = props.buttonList[index];
-  console.log(`【${currentBtn.name}】当前状态:${currentBtn.isRunning ? '开启' : '关闭'}`);
-  // 根据当前状态执行对应的控制功能
-  // if (currentBtn.isRunning) {
-  // } else {
-  // }
+  console.log(btn, '按钮信息');
+  currentButton.value = btn;
 };
 // 注入祖父组件提供的处理函数
 const handleButtonConfirm = inject<(button: ButtonItem) => void>(
   'handleButtonConfirm',
   () => console.warn('未提供handleButtonConfirm函数') // 默认值,避免报错
 );
-const handleConfirm = () => {
-  if (!currentButton.value) return;
-  password.value = '';
-  inputWarn.value = '';
-  handleButtonConfirm(currentButton.value);
-  modalVisible.value = false;
+/**
+ * 处理密码确认回调
+ */
+const handleConfirm = async (password) => {
+  try {
+    // 1. 这里写你的密码校验逻辑(比如调用接口、本地验证等)
+    console.log('用户输入的密码:', password);
+    console.log('控制按钮信息', currentButton.value);
+    // 接口请求
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    // 2. 密码验证成功的逻辑
+    if (password === '123456') {
+      console.log('密码验证成功!');
+    } else {
+      // 抛出错误,让子组件捕获并显示错误提示
+      throw new Error('密码错误,请重新输入');
+    }
+  } catch (error) {
+    // 4. 捕获验证过程中的错误,返回false阻止弹窗关闭
+    console.error('密码验证失败:', error.message);
+    // 返回false,子组件会保持打开状态并显示错误信息
+    return false;
+  }
 };
+
+/**
+ * 处理弹窗取消回调
+ */
 const handleCancel = () => {
-  console.log('取消!!!!!!!!');
+  console.log('关闭弹窗');
   password.value = '';
   inputWarn.value = '';
   modalVisible.value = false;
@@ -145,7 +152,6 @@ const handleCancel = () => {
 .btn-confirm-modal {
   .zxm-modal-content {
     height: 240px !important;
-    background-size: 100% 100%;
     .zxm-modal-body {
       height: 187px !important;
       padding-top: 33px !important;

+ 663 - 15
src/views/vent/monitorManager/nitrogenMonitor/index.vue

@@ -18,7 +18,7 @@
           <!-- <a-spin :spinning="loading" /> -->
           <!-- <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none"> </div> -->
           <!-- <div class="nitrogen2D"></div> -->
-          <modelTip :statusData="monitorData"></modelTip>
+          <modelTip :statusData="readData"></modelTip>
         </div>
       </template>
     </BasicMonitoring>
@@ -35,27 +35,675 @@ import { list } from './nitorgen.api';
 const loading = ref(false);
 const { configs, fetchConfigs } = useInitConfigs();
 const { updateEnhancedConfigs, updateData } = useInitPage('智能注氮管控系统');
-const monitorData = ref<any[]>([]);
+const readData = ref({});
 function refresh() {
   // fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
   fetchConfigs('nitrogen').then(() => {
     // configs.value = nitrogenConfigs;
     updateEnhancedConfigs(configs.value);
-    list({ devicetype: 'nitrogen', pagetype: 'normal' }).then(updateData, (res) => {
-      if (res && res.msgTxt[0]) {
-        const dataList: any[] = [];
-        if (res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0) {
-          res.msgTxt[0].datalist.forEach((data: any) => {
-            const readData = data.readData;
-            data = Object.assign(data, readData);
-            dataList.push(data);
-          });
-          monitorData.value = res.msgTxt[0].dataList;
-        }
-      }
-    });
+    getDataSource();
+    // list({ devicetype: 'nitrogen', pagetype: 'normal' }).then((res) => {
+    //   const res1 = {
+    //     cmd: 'monitordata',
+    //     msgTxt: [
+    //       {
+    //         datalist: [
+    //           {
+    //             msgType: null,
+    //             deviceID: '2014560252506329090',
+    //             strname: '制氮机',
+    //             strinstallpos: '制氮机',
+    //             fsectarea: 'null',
+    //             planedVa: null,
+    //             regulation: null,
+    //             stationname: '制氮机1#PLC',
+    //             stationtype: 'plc',
+    //             deviceType: 'nitrogen_auto',
+    //             typeName: '制氮机',
+    //             netStatus: 1,
+    //             warnFlag: 0,
+    //             warnLevel: 0,
+    //             warnLevel_str: '正常',
+    //             syswarnLevel: null,
+
+    //             syswarnLevel_str: null,
+
+    //             syswarnLevel_des: null,
+
+    //             warnTime: null,
+
+    //             readTime: '2026-02-09 10:27:25',
+
+    //             warnDes: '',
+
+    //             frontGateOpenCtrl: null,
+
+    //             rearGateOpenCtrl: null,
+
+    //             readData: {
+    //               Fan2ZdjJT: '0',
+
+    //               Fan1LgqJcqGz: '0',
+
+    //               Fan2jqwd: '27.98',
+
+    //               Fan2GdWdGGz: '0',
+
+    //               Fan1GdWdGGz: '0',
+
+    //               Fan2dqyl: '1.04',
+
+    //               Fan2tjf: '0.00',
+
+    //               Fan1SwjQx: '1',
+
+    //               Fan1JrqJcqGz: '0',
+
+    //               Fan2yqtyl: '1.14',
+
+    //               Fan2hjwd: '17.30',
+
+    //               Fan1JxgUab: '10.37',
+
+    //               Fan1LnfsJcqGz: '0',
+
+    //               Fan2KyjStatus_str: '运行',
+
+    //               Fan2JqWdGGz: '0',
+
+    //               Fan1JqWdGGz: '0',
+
+    //               Fan1Lgjpqyl: '0.71',
+
+    //               Fan1jrqTemp: '47.70',
+
+    //               Fan1CxgCos: '0.00',
+
+    //               Fan1gdyl: '0.69',
+
+    //               Fan1CxgUca: '10.34',
+
+    //               Fan2KyjStatus: '1',
+
+    //               Fan2JCxgp: '420.75',
+
+    //               Fan1XxCw: '0',
+
+    //               Fan1Yxzt: '0',
+
+    //               Fan1CxgUbc: '10.34',
+
+    //               Fan2CxgUab: '10.08',
+
+    //               Fan2Cxgp: '417.47',
+
+    //               Fan1GdYlGGz: '0',
+
+    //               Fan1yxsj: '0.00',
+
+    //               Fan2yqtTemp: '78.90',
+
+    //               Fan2kyjTemp: '1.12',
+
+    //               Fan1xnyq: '-0.04',
+
+    //               Fan2JxgLc: '27.97',
+
+    //               Fan2JxgLb: '27.96',
+
+    //               Fan1pqwd: '23.43',
+
+    //               Fan1JCxgF: '0.81',
+
+    //               Fan2dqwd: '38.06',
+
+    //               Fan1JCxgQ: '125.71',
+
+    //               Fan1jqyl: '0.72',
+
+    //               Fan2CxgUb: '5.80',
+
+    //               Fan2Yxzt_str: '运行',
+
+    //               Fan2JCxgQ: '124.16',
+
+    //               Fan2CxgUc: '5.81',
+
+    //               Fan2dqnd: '97.48',
+
+    //               Fan2JrqWdGGz: '0',
+
+    //               Fan1CxgUab: '10.34',
+
+    //               Fan2CxgF: '0.00',
+
+    //               Fan2JrqJcqGz: '0',
+
+    //               Fan2CxgQ: '217.04',
+
+    //               Fan2JxgLa: '28.29',
+
+    //               Fan1KyjStatus_str: '停止',
+
+    //               Fan1lxyc: '0.01',
+
+    //               Fan1Lntemp: '10.70',
+
+    //               Fan1zyyl: '0.00',
+
+    //               Fan2kyjdl: '0.00',
+
+    //               Fan1ll: '1226.02',
+
+    //               Fan2JCxgF: '0.86',
+
+    //               Fan2Lntemp: '40.80',
+
+    //               Fan1JCxgp: '351.93',
+
+    //               Fan1gdwd: '46.09',
+
+    //               Fan2CxgUa: '5.82',
+
+    //               Fan2JxgUb: '5.80',
+
+    //               Fan1ljll: '35308516.00',
+
+    //               Fan2JtZgz: '0',
+
+    //               Fan2JxgUa: '5.80',
+
+    //               Fan2CxgLa: '28.36',
+
+    //               Fan2CxgLb: '24.36',
+
+    //               Fan2CxgLc: '28.24',
+
+    //               Fan1ZdjJT: '0',
+
+    //               Fan2JxgUc: '5.81',
+
+    //               Fan1ckyl: '0.72',
+
+    //               Fan2GdYlGGz: '0',
+
+    //               Fan1BrJcqGz: '0',
+
+    //               sign: '0',
+
+    //               Fan1hjwd: '11.03',
+
+    //               Fan1Cxgp: '0.00',
+
+    //               Fan1JrqWdGGz: '0',
+
+    //               Fan2OHigh: '0',
+
+    //               Fan2JxgUbc: '10.04',
+
+    //               Fan1ZfTepm: '16.70',
+
+    //               Fan1JxgUb: '5.98',
+
+    //               Fan1JxgUc: '5.97',
+
+    //               Fan1JxgUa: '5.99',
+
+    //               Fan1JtZgz: '0',
+
+    //               Fan1jqwd: '25.60',
+
+    //               Fan1dqyl: '0.65',
+
+    //               Fan1Yxzt_str: '停止',
+
+    //               Fan2JxgCos: '0.00',
+
+    //               Fan2ll: '1279.52',
+
+    //               Fan1KyjStatus: '0',
+
+    //               Fan2yxsj: '0.00',
+
+    //               Fan2JxgUca: '10.06',
+
+    //               Fan2Yxzt: '1',
+
+    //               Fan2BrJcqGz: '0',
+
+    //               Fan1CxgUc: '5.96',
+
+    //               Fan1CxgUb: '5.96',
+
+    //               Fan1CxgUa: '5.98',
+
+    //               Fan2gdyl: '1.08',
+
+    //               Fan1LgjGyBh: '0',
+
+    //               Fan2XxCw: '0',
+
+    //               Fan1OHigh: '0',
+
+    //               Fan1kyjTemp: '0.72',
+
+    //               Fan2lxyc: '0.01',
+
+    //               Fan2LgqJcqGz: '0',
+
+    //               Fan1dqnd: '0.00',
+
+    //               Fan1LgjZhGz: '0',
+
+    //               Fan1kyjdl: '0.00',
+
+    //               Fan1JxgCos: '0.00',
+
+    //               Fan2zyyl: '0.66',
+
+    //               Fan2LgjZhGz: '0',
+
+    //               Fan2CxgCos: '0.89',
+
+    //               Fan2jqyl: '1.12',
+
+    //               Fan1CxgLc: '0.00',
+
+    //               Fan1CxgLb: '0.00',
+
+    //               Fan2xnyq: '119.36',
+
+    //               Fan1CxgLa: '0.00',
+
+    //               Fan2pqwd: '20.23',
+
+    //               Fan2CxgUbc: '10.05',
+
+    //               Fan2LgjDyBh: '0',
+
+    //               Fan1dqwd: '35.07',
+
+    //               Fan1LgjDyBh: '0',
+
+    //               Fan1JxgUca: '10.35',
+
+    //               Fan1yqtyl: '0.00',
+
+    //               Fan2jrqTemp: '51.50',
+
+    //               Fan2Lgjpqyl: '1.11',
+
+    //               Fan1CxgF: '0.00',
+
+    //               Fan1SwjQx_str: '打开',
+
+    //               Fan2ckyl: '1.12',
+
+    //               Fan2ljll: '13907482.00',
+
+    //               tTime: '2026-02-09 10:27:23',
+
+    //               Fan1CxgQ: '0.00',
+
+    //               Fan1JxgLc: '24.02',
+
+    //               Fan2ZfTepm: '6.10',
+
+    //               Fan1JxgLa: '24.09',
+
+    //               Fan1JxgLb: '24.16',
+
+    //               Fan2LnfsJcqGz: '0',
+
+    //               Fan2JxgUab: '10.04',
+
+    //               Fan1tjf: '-0.05',
+
+    //               Fan2LgjGyBh: '0',
+
+    //               Fan2CxgUca: '10.07',
+
+    //               isRun: '-2',
+
+    //               Fan1yqtTemp: '11.20',
+
+    //               Fan1JxgUbc: '10.36',
+
+    //               Fan2gdwd: '46.22',
+    //             },
+
+    //             readDataDes: null,
+
+    //             limits: null,
+
+    //             summaryHour: [],
+
+    //             summaryDay: [],
+
+    //             history: [],
+
+    //             dayhistory: [],
+
+    //             totalInfo: null,
+
+    //             sign: null,
+
+    //             cameras: [],
+
+    //             links: [],
+
+    //             avgParam: {},
+
+    //             other1: null,
+
+    //             other2: null,
+
+    //             other3: null,
+
+    //             remarkInfo: null,
+
+    //             linkInfo: null,
+
+    //             addrIndex: null,
+
+    //             warnLogNotOkCount: 0,
+
+    //             otherInfo: null,
+
+    //             orderNum: 0,
+
+    //             testFlag: 0,
+
+    //             strRemark: null,
+
+    //             isAutosync: null,
+
+    //             isUnderground: '0',
+
+    //             groupNumber: '',
+    //           },
+    //         ],
+    //         avginfo: {
+    //           warnFlag: {
+    //             value: 0,
+    //           },
+    //         },
+    //         typeName: '制氮机',
+
+    //         type: 'nitrogen_auto',
+    //       },
+    //       {
+    //         subtype: 'sys_nitrogen',
+
+    //         datalist: [
+    //           {
+    //             msgType: null,
+
+    //             deviceID: '2014623636824182785',
+
+    //             strname: '制氮系统',
+
+    //             strinstallpos: '制氮系统',
+
+    //             fsectarea: 'null',
+
+    //             planedVa: null,
+
+    //             regulation: null,
+
+    //             stationname: null,
+
+    //             stationtype: null,
+
+    //             deviceType: 'sys_nitrogen',
+
+    //             typeName: '注氮',
+
+    //             netStatus: 1,
+
+    //             warnFlag: 0,
+
+    //             warnLevel: 0,
+
+    //             warnLevel_str: '正常',
+
+    //             syswarnLevel: null,
+
+    //             syswarnLevel_str: null,
+
+    //             syswarnLevel_des: null,
+
+    //             warnTime: null,
+
+    //             readTime: '2026-02-09 10:27:25',
+
+    //             warnDes: null,
+
+    //             frontGateOpenCtrl: null,
+
+    //             rearGateOpenCtrl: null,
+
+    //             readData: {
+    //               sign: '0',
+
+    //               tTime: '2026-02-09 10:27:20',
+
+    //               isRun: '-2',
+    //             },
+
+    //             readDataDes: null,
+
+    //             limits: null,
+
+    //             summaryHour: [],
+
+    //             summaryDay: [],
+
+    //             history: [],
+
+    //             dayhistory: [],
+
+    //             totalInfo: {
+    //               unitNum: 0,
+    //             },
+
+    //             sign: null,
+
+    //             cameras: [],
+
+    //             links: [],
+
+    //             avgParam: {},
+
+    //             other1: null,
+
+    //             other2: null,
+
+    //             other3: null,
+
+    //             remarkInfo: null,
+
+    //             linkInfo: null,
+
+    //             addrIndex: null,
+
+    //             warnLogNotOkCount: 0,
+
+    //             otherInfo: null,
+
+    //             orderNum: null,
+
+    //             testFlag: null,
+
+    //             strRemark: null,
+
+    //             isAutosync: null,
+
+    //             coalThickness: '',
+
+    //             coalSeamThick: '',
+
+    //             faceRetM3: '',
+
+    //             totalDrillingType: '',
+
+    //             coalProduction: '',
+
+    //             drillinFootage: '',
+
+    //             strikelength: '',
+
+    //             totalRetM3: '',
+
+    //             useM3Perent: '',
+
+    //             ventRationality: '',
+
+    //             cuteyeLength: '',
+
+    //             totalGasVolume: '',
+
+    //             gasLevel: '',
+
+    //             supportNum: '',
+
+    //             totalComplteQuantity: '',
+
+    //             stepIn1: '',
+
+    //             stepIn2: '',
+
+    //             totalOutM3: '',
+
+    //             coalReserves: '',
+
+    //             faceIntM3: '',
+
+    //             cumulativeScalar: '',
+
+    //             totalIntM3: '',
+
+    //             totalAverageRate: '',
+
+    //             equalarea: '',
+
+    //             coalSpoCha: '',
+
+    //             thickness: '',
+
+    //             unitNum: '',
+
+    //             meterCount1: '',
+
+    //             meterCount2: '',
+
+    //             goafName: '',
+
+    //             meterCount3: '',
+
+    //             meterCount4: '',
+
+    //             meterCount5: '',
+
+    //             faceLen: '',
+
+    //             linkEmptyFlag: '',
+
+    //             totalDate: '',
+
+    //             stepOut1: '',
+
+    //             mainCoalseam: '',
+
+    //             drillingType: '',
+
+    //             coalSeam: '',
+
+    //             stepOut2: '',
+
+    //             pressureRationality1: '',
+
+    //             pressureRationality2: '',
+
+    //             userM3: '',
+
+    //             gasReserves: '',
+
+    //             linkEmpty: '',
+
+    //             beginDrainageDate: '',
+
+    //             goafManage: '',
+
+    //             dischargeGasEmission: '',
+
+    //             useM3: '',
+
+    //             ventCapacity: '',
+
+    //             stepMid2: '',
+
+    //             stepMid1: '',
+
+    //             zoneRationality1: '',
+
+    //             manageCoalMethod: '',
+
+    //             zoneRationality2: '',
+
+    //             miningArea: '',
+
+    //             minFirePeriod: '',
+
+    //             cumulativeFlow: '',
+
+    //             scalarRecognition: '',
+
+    //             coalSeamAngle: '',
+
+    //             coalseam: '',
+
+    //             totalPlanM3: '',
+
+    //             facePlanM3: '',
+
+    //             coalSeamThickness: '',
+
+    //             workingFaceLengeh: '',
+
+    //             workingFaceHeight: '',
+
+    //             originalGasContent: '',
+
+    //             workingFaceQieyanLength: '',
+
+    //             workingFaceZouxiangLength: '',
+
+    //             panel: '',
+
+    //             leakage: '',
+
+    //             flength: '',
+    //           },
+    //         ],
+
+    //         typeName: '综合监测系统',
+
+    //         type: 'sys',
+    //       },
+    //     ],
+    //   };
+    // });
   });
 }
+async function getDataSource() {
+  const res = await list({ devicetype: 'nitrogen', pagetype: 'normal' });
+  let dataSource: any = [];
+  dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
+  if (dataSource) {
+    readData.value = Object.assign(dataSource, dataSource.readData);
+  }
+}
 
 function initInterval() {
   setInterval(() => {

+ 43 - 16
src/views/vent/monitorManager/nitrogenMonitor/model-tip.vue

@@ -8,38 +8,38 @@
       <div class="zdj-ll">
         <div class="cq-zdj-item">
           <span class="text-label">累计流量(Nm³):</span>
-          <span class="text-val">{{ statusData.readData['Fan1ljll'] }}</span>
+          <span class="text-val">{{ currentData?.Fan1ljll }}</span>
         </div>
       </div>
       <div class="zdj-ll1">
         <div class="cq-zdj-item">
           <span class="text-label">累计流量(Nm³):</span>
-          <span class="text-val">{{ statusData.readData['Fan2ljll'] }}</span>
+          <span class="text-val">{{ currentData?.Fan2ljll }}</span>
         </div>
       </div>
       <!-- 加热器温度 -->
       <div class="jrq1">
         <div class="cq-zdj-item">
           <span class="text-label">加热器</span>
-          <span class="text-val">{{ statusData.readData['Fan1jrqTemp'] }}℃</span>
+          <span class="text-val">{{ currentData?.Fan1jrqTemp }}℃</span>
         </div>
       </div>
       <div class="jrq2">
         <div class="cq-zdj-item">
-          <span class="text-val">{{ statusData.readData['Fan2jrqTemp'] }}℃</span>
+          <span class="text-val">{{ currentData?.Fan2jrqTemp }}℃</span>
         </div>
       </div>
       <!-- 滤芯 -->
       <div class="filter">
         <div class="cq-zdj-item">
           <span class="text-label">滤芯1</span>
-          <span class="text-val">{{ statusData.readData['Fan1lxyc'] }}MPa</span>
+          <span class="text-val">{{ currentData?.Fan1lxyc }}MPa</span>
         </div>
       </div>
       <div class="filter2">
         <div class="cq-zdj-item">
           <span class="text-label">滤芯2</span>
-          <span class="text-val">{{ statusData.readData['Fan2lxyc'] }}MPa</span>
+          <span class="text-val">{{ currentData?.Fan2lxyc }}MPa</span>
         </div>
       </div>
       <!-- 活性炭 -->
@@ -52,43 +52,43 @@
       <!-- 上方浓度  流量  氮气压力  氮气温度 -->
       <div class="nd1">
         <span class="text-label">浓度</span>
-        <span class="text-val">{{ statusData.readData['Fan1dqnd'] }}%</span>
+        <span class="text-val">{{ currentData?.Fan1dqnd }}%</span>
       </div>
       <div class="ll1">
         <span class="text-label">流量</span>
-        <span class="text-val">{{ statusData.readData['Fan1ll'] }}Nm³/h</span>
+        <span class="text-val">{{ currentData?.Fan1ll }}Nm³/h</span>
       </div>
       <div class="dqyl1">
         <span class="text-label">氮气压力</span>
-        <span class="text-val">{{ statusData.readData['Fan1dqyl'] }}MPa</span>
+        <span class="text-val">{{ currentData?.Fan1dqyl }}MPa</span>
       </div>
       <div class="dqwd1">
         <span class="text-label">氮气温度</span>
-        <span class="text-val">{{ statusData.readData['Fan1dqwd'] }}℃</span>
+        <span class="text-val">{{ currentData?.Fan1dqwd }}℃</span>
       </div>
       <!-- 底部浓度  流量  氮气压力  氮气温度 -->
       <div class="nd">
         <span class="text-label">浓度</span>
-        <span class="text-val">{{ statusData.readData['Fan2dqnd'] }}%</span>
+        <span class="text-val">{{ currentData?.Fan2dqnd }}%</span>
       </div>
       <div class="ll">
         <span class="text-label">流量</span>
-        <span class="text-val">{{ statusData.readData['Fan2ll'] }}Nm³/h</span>
+        <span class="text-val">{{ currentData?.Fan2ll }}Nm³/h</span>
       </div>
       <div class="dqyl">
         <span class="text-label">氮气压力</span>
-        <span class="text-val">{{ statusData.readData['Fan2dqyl'] }}MPa</span>
+        <span class="text-val">{{ currentData?.Fan2dqyl }}MPa</span>
       </div>
       <div class="dqwd">
         <span class="text-label">氮气温度</span>
-        <span class="text-val">{{ statusData.readData['Fan2dqwd'] }}℃</span>
+        <span class="text-val">{{ currentData?.Fan2dqwd }}℃</span>
       </div>
     </div>
   </div>
 </template>
-
+ 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 let props = defineProps({
   statusData: {
@@ -98,6 +98,33 @@ let props = defineProps({
     },
   },
 });
+// 当前要显示的数据
+const currentData = ref<any>(null);
+
+// 监听 statusData 的变化
+watch(
+  () => props.statusData,
+  (newVal) => {
+    console.log('statusData changed:', newVal);
+    // 检查是否有数据
+    if (newVal && Object.keys(newVal).length > 0) {
+      // 处理数据 - 根据你的数据结构调整
+      if (Array.isArray(newVal) && newVal.length > 0) {
+        currentData.value = newVal[0]?.readData || {};
+      } else if (newVal.readData) {
+        currentData.value = newVal.readData;
+      } else {
+        currentData.value = newVal;
+      }
+    } else {
+      currentData.value = null;
+    }
+  },
+  {
+    immediate: true, // 立即执行一次,检查初始值
+    deep: true, // 深度监听,对象内部属性变化也会触发
+  }
+);
 </script>
 
 <style lang="less" scoped>