安琪酵母(西藏)益生菌信息采集中心智能实验室
huodongwei
2023-06-27 25b1bcd63ba0792c33bf95c5f713f82ccf3960dd
src/views/airConditioning/airConditioning.vue
@@ -2,43 +2,11 @@
import FlexBox from "@/components/FlexBox.vue";
import {DArrowRight, CaretTop} from "@element-plus/icons-vue";
import HdwLight from "@/components/HdwLight.vue";
import {reactive} from "vue";
import runMonitorModule from "@/views/airConditioning/js/runMonitorModule";
const {runMonitorData} = runMonitorModule();
const runMonitorData = reactive([
   {
      label: "压缩机运行时间",
      value: 0,
      unit: "H"
   },
   {
      label: "加热需求",
      value: 0,
      unit: "%"
   },
   {
      label: "制冷需求",
      value: 0,
      unit: "%"
   },
   {
      label: "除湿需求",
      value: 0,
      unit: "%"
   },
   {
      label: "回风温度",
      value: 0,
      unit: "℃"
   },
   {
      label: "回风湿度",
      value: 0,
      unit: "%"
   },
]);
import paramsMonitorModule from "@/views/airConditioning/js/paramsMonitorModule";
const {paramsMonitorData} = paramsMonitorModule();
</script>
<template>
@@ -192,24 +160,55 @@
      <div class="page-right">
         <div class="flex-layout--container">
            <div class="flex-layout--body">
               <flex-box>
                  <template #header>
                     <div class="header-wrapper">
                        <el-icon><DArrowRight /></el-icon>
                        <span class="title-text">空调参数监控</span>
                     </div>
                  </template>
               </flex-box>
          <div class="air-params-monitor-wrapper">
            <flex-box>
              <template #header>
                <div class="header-wrapper">
                  <el-icon><DArrowRight /></el-icon>
                  <span class="title-text">空调参数监控</span>
                </div>
              </template>
              <div class="air-params-monitor">
                <div class="input-list">
                  <div class="input-item" v-for="(item, index) in paramsMonitorData" :key="'key'+index">
                    <div class="input-box input-text">{{ item.label }}</div>
                    <div class="input-box input-content">{{ item.value }}</div>
                    <div class="input-box input-unit">{{ item.unit }}</div>
                  </div>
                </div>
              </div>
            </flex-box>
          </div>
            </div>
            <div class="flex-layout--body">
               <flex-box>
                  <template #header>
                     <div class="header-wrapper">
                        <el-icon><DArrowRight /></el-icon>
                        <span class="title-text">空调报警监控</span>
                     </div>
                  </template>
               </flex-box>
          <div class="air-warn-monitor-wrapper">
            <flex-box>
              <template #header>
                <div class="header-wrapper">
                  <el-icon><DArrowRight /></el-icon>
                  <span class="title-text">空调报警监控</span>
                </div>
              </template>
              <div class="air-warn-monitor">
                <div class="input-box-list">
                  <div class="input-box-wrapper">
                    <div class="input-box-container">
                      <div class="input-text">加热器运行状态</div>
                      <div class="input-light">
                        <hdw-light :type="0"></hdw-light>
                      </div>
                    </div>
                    <div class="input-box-container">
                      <div class="input-text">加热器运行状态</div>
                      <div class="input-light">
                        <hdw-light :type="0"></hdw-light>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </flex-box>
          </div>
            </div>
         </div>
      </div>
@@ -411,4 +410,9 @@
      margin-bottom: 16px;
   }
}
.air-params-monitor-wrapper,
.air-warn-monitor-wrapper{
  height: 100%;
  padding: 4px;
}
</style>