内容提交

longyvfengyun

2023-08-27 5e77dd17b896184787fedb60e9acbb56506a7ae4

 src/views/airConditioning/airConditioning.vue

@@ -1,42 +1,54 @@
<script setup>
import FlexBox from "@/components/FlexBox.vue";
import {DArrowRight, CaretTop} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import HdwLight from "@/components/HdwLight.vue";
import {reactive} from "vue";
import {ref, watch} 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, setRunMonitorData} = runMonitorModule();

import airMonitorData from "@/views/airConditioning/js/airMonitorData";
const {monitorData, airState} = airMonitorData();

import setAirParam from "@/views/airConditioning/components/setAirParam.vue";

import air from "@/assets/js/const/air";
const airCmd = ref(air.cmd);

import airControlModule from "@/views/airConditioning/js/airControlModule";

const {startAir} = airControlModule();

const setParamVisible = ref(false);

const showSetParamDialog = ()=>{
   setParamVisible.value = true;
};

const setParamClose = ()=>{
   setParamVisible.value = false;
};

const startAirByCmd = (opCmd)=>{
   ElMessageBox.confirm(
      "确认进行控制",
      "系统提示",
      {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'info',
         draggable: true,
      }
   ).then(()=>{
      startAir(opCmd);
   }).catch(()=>{});

}

watch(monitorData, (data)=>{
   setRunMonitorData(data);
});


</script>
@@ -63,7 +75,7 @@
                     <div class="state-item">
                        <div class="state-text">异常状态</div>
                        <div class="light-container">
                           <hdw-light :type="1"></hdw-light>
                           <hdw-light :type="1" :bl-bl="false"></hdw-light>
                        </div>
                     </div>
                     <div class="state-item">
@@ -98,43 +110,39 @@
                           <div class="input-box-list">
                              <div class="input-box-wrapper">
                                 <div class="input-box-container">
                                    <div class="input-text">加热器运行状态</div>
                                    <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>
                                       <hdw-light :type="airState.airSysstate"></hdw-light>
                                    </div>
                                 </div>
                              </div>
                              <div class="input-box-wrapper">
                                 <div class="input-box-container">
                                    <div class="input-text">加热器运行状态</div>
                                    <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>
                                       <hdw-light :type="airState.airOnduty"></hdw-light>
                                    </div>
                                 </div>
                              </div>
                              <div class="input-box-wrapper">
                                 <div class="input-box-container">
                                    <div class="input-text">加热器运行状态</div>
                                    <div class="input-text">负压/排浊运行状态</div>
                                    <div class="input-light">
                                       <hdw-light :type="0"></hdw-light>
                                       <hdw-light :type="airState.airPressturbid"></hdw-light>
                                    </div>
                                 </div>
                              </div>
                              <div class="input-box-wrapper">
                                 <div class="input-box-container">
                                    <div class="input-text">系统故障</div>
                                    <div class="input-light">
                                       <hdw-light :type="airState.airSysAlm"></hdw-light>
                                    </div>
                                 </div>
                                 <div class="input-box-container">
                                    <div class="input-text">加热器运行状态</div>
                                    <div class="input-text">过滤告警</div>
                                    <div class="input-light">
                                       <hdw-light :type="0"></hdw-light>
                                       <hdw-light :type="airState.airFiltrationAlm"></hdw-light>
                                    </div>
                                 </div>
                              </div>
@@ -148,6 +156,45 @@
      </div>
      <div class="flex-layout--body">
         <div class="move-img">
            <div class="handle-tools">
               <div class="tools-btn-list">
                  <div class="tools-btn-item">
                     <el-button type="primary" @click="showSetParamDialog">空调参数设置</el-button>
                  </div>
               </div>
               <div class="tools-btn-list">
                  <div class="tools-btn-item">
                     <el-button type="primary" @click="startAirByCmd(airCmd.startWork)">启动空调工作</el-button>
                  </div>
                  <div class="tools-btn-item">
                     <el-button type="warning" @click="startAirByCmd(airCmd.stopWork)">停止空调工作</el-button>
                  </div>
               </div>
               <div class="tools-btn-list">
                  <div class="tools-btn-item">
                     <el-button type="primary" @click="startAirByCmd(airCmd.startOnDuty)">启动空调值班</el-button>
                  </div>
                  <div class="tools-btn-item">
                     <el-button type="warning" @click="startAirByCmd(airCmd.stopOnDuty)">停止空调值班</el-button>
                  </div>
               </div>
               <div class="tools-btn-list">
                  <div class="tools-btn-item">
                     <el-button type="primary" @click="startAirByCmd(airCmd.startDisinfect)">启动空调消毒</el-button>
                  </div>
                  <div class="tools-btn-item">
                     <el-button type="warning" @click="startAirByCmd(airCmd.stopDisinfect)">停止空调消毒</el-button>
                  </div>
               </div>
               <div class="tools-btn-list">
                  <div class="tools-btn-item">
                     <el-button type="primary" @click="startAirByCmd(airCmd.startExhaustFan)">启动空调排风</el-button>
                  </div>
                  <div class="tools-btn-item">
                     <el-button type="warning" @click="startAirByCmd(airCmd.stopExhaustFan)">停止空调排风</el-button>
                  </div>
               </div>
            </div>
            <flex-box>
               <template #header>
                  <div class="header-wrapper">
@@ -189,38 +236,24 @@
            </flex-box>
         </div>
      </div>
      <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>
            <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>
         </div>
      </div>
   </div>
   <el-dialog
      class="center-dialog"
      title="空调参数设置"
      width="auto"
      v-model="setParamVisible"
      align-center
      :close-on-click-modal="false"
      :modal-append-to-body="false">
      <set-air-param v-if="setParamVisible" @close="setParamClose"></set-air-param>
   </el-dialog>
</template>

<style lang="less" scoped>
.header-wrapper {
   color: @font-color-high-light;
   font-weight: bold;
   font-size: 14px;
   font-size: 16px;
   padding: 8px 16px;
   box-sizing: border-box;
   .title-text {
@@ -242,8 +275,9 @@
   padding: 4px 0;
}
.move-img {
   position: relative;
   height: 100%;
   padding: 8px 0;
   padding: 8px 8px 8px 0;
   box-sizing: border-box;
}
.state-list {
@@ -262,7 +296,7 @@
.earth-wrapper {
   position: relative;
   display: inline-block;
   width: 600px;
   width: 800px;
}
.earth-light-circle img,
.earth-light img,
@@ -360,11 +394,11 @@

.input-list {
   .input-item {
      text-align: center;
      text-align: left;
      margin-top: 16px;
      .input-box {
         display: inline-block;
         font-size: 14px;
         font-size: 16px;
         text-align: right;
         color: #ffffff;

@@ -375,7 +409,7 @@
         &.input-content {
            margin-left: 8px;
            margin-right: 8px;
            padding: 4px;
            padding: 4px 12px;
            min-width: 6rem;
            background-color: #2c5774;
            border: 1px solid #42d4ff;
@@ -396,7 +430,7 @@
      display: inline-block;
      text-align: center;
      color: #00feff;
      font-size: 14px;
      font-size: 16px;
      vertical-align: middle;
      margin-right: 8px;
   }
@@ -411,4 +445,25 @@
      margin-bottom: 16px;
   }
}
.air-params-monitor-wrapper,
.air-warn-monitor-wrapper{
  height: 100%;
  padding: 4px;
}
.handle-tools {
   position: absolute;
   right: 24px;
   top: 40px;
   z-index: 1;
}
.tools-btn-list {
   margin-bottom: 32px;

   .tools-btn-item {
      margin-top: 12px;
   }
}
.state-text {
   font-size: 16px;
}
</style>