提交

huodongwei

2023-06-27 9631e6bee3deb1d34c158ca9d1274e6edad0ddac

提交

 src/views/airConditioning/airConditioning.vue

@@ -2,43 +2,8 @@
import FlexBox from "@/components/FlexBox.vue";
import {DArrowRight, CaretTop} from "@element-plus/icons-vue";
import HdwLight from "@/components/HdwLight.vue";
import {reactive} from "vue";

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 runMonitorModule from "@/views/airConditioning/js/runMonitorModule";
const {runMonitorData} = runMonitorModule();
</script>

<template>
@@ -192,24 +157,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 runMonitorData" :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 +407,9 @@
        margin-bottom: 16px;
    }
}
.air-params-monitor-wrapper,
.air-warn-monitor-wrapper{
  height: 100%;
  padding: 4px;
}
</style>

 src/views/airConditioning/js/runMonitorModule.js

New file
@@ -0,0 +1,40 @@
import {reactive} from "vue";

const 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: "%"
    },
  ]);

  return {runMonitorData};
};

export default runMonitorModule;