内容提交

longyvfengyun

2023-08-25 b311eb1e1e0e725613f752e82124b3297198c233

 src/views/airConditioning/airConditioning.vue

@@ -1,11 +1,469 @@
<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 {ref, watch} from "vue";

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>

<template>
   <div>空调</div>
   <div class="flex-layout--container row">
      <div class="page-left">
         <div class="flex-layout--container">
            <div class="air-state">
               <flex-box>
                  <template #header>
                     <div class="header-wrapper">
                        <el-icon><DArrowRight /></el-icon>
                        <span class="title-text">状态指示</span>
                     </div>
                  </template>
                  <div class="state-list">
                     <div class="state-item">
                        <div class="state-text">正常状态</div>
                        <div class="light-container">
                           <hdw-light :type="0"></hdw-light>
                        </div>
                     </div>
                     <div class="state-item">
                        <div class="state-text">异常状态</div>
                        <div class="light-container">
                           <hdw-light :type="1" :bl-bl="false"></hdw-light>
                        </div>
                     </div>
                     <div class="state-item">
                        <div class="state-text">关闭状态</div>
                        <div class="light-container">
                           <hdw-light :type="-1"></hdw-light>
                        </div>
                     </div>
                  </div>
               </flex-box>
            </div>
            <div class="flex-layout--body">
               <div class="run-data">
                  <flex-box>
                     <template #header>
                        <div class="header-wrapper">
                           <el-icon><DArrowRight /></el-icon>
                           <span class="title-text">空调运行监控</span>
                        </div>
                     </template>
                     <div class="flex-layout--container">
                        <div class="flex-layout--body">
                           <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>
                        <div class="flex-layout--body">
                           <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="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-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-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-light">
                                       <hdw-light :type="airState.airFiltrationAlm"></hdw-light>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </flex-box>
               </div>
            </div>
         </div>
      </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">
                     <el-icon><DArrowRight /></el-icon>
                     <span class="title-text">空调监控</span>
                  </div>
               </template>
               <div class="center--container">
                  <div class="earth-wrapper">
                     <div class="earth-light-circle">
                        <img src="@/assets/images/earth-light-circle.png"  alt=""/>
                     </div>
                     <div class="earth-light">
                        <div class="earth-light-wrapper">
                           <img src="@/assets/images/earth.png"  alt=""/>
                        </div>
                     </div>
                     <div class="earth-light-border">
                        <div class="earth-light-border-wrapper">
                           <div class="sanjiao-wrapper sanjiao-top">
                              <el-icon><CaretTop /></el-icon>
                           </div>
                           <div class="sanjiao-wrapper sanjiao-bottom">
                              <el-icon><CaretTop /></el-icon>
                           </div>
                           <div class="sanjiao-wrapper sanjiao-left">
                              <el-icon><CaretTop /></el-icon>
                           </div>
                           <div class="sanjiao-wrapper sanjiao-right">
                              <el-icon><CaretTop /></el-icon>
                           </div>
                        </div>
                     </div>
                     <div class="air-condit">
                        <img src="@/assets/images/air-condit.png" />
                     </div>
                  </div>
               </div>
            </flex-box>
         </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 scoped>
<style lang="less" scoped>
.header-wrapper {
   color: @font-color-high-light;
   font-weight: bold;
   font-size: 16px;
   padding: 8px 16px;
   box-sizing: border-box;
   .title-text {
      margin-left: 4px;
   }
}
.page-left,
.page-right {
   box-sizing: border-box;
   padding: 4px 8px;
}
.air-state {
   box-sizing: border-box;
   padding: 4px 0;
}
.run-data {
   box-sizing: border-box;
   height: 100%;
   padding: 4px 0;
}
.move-img {
   position: relative;
   height: 100%;
   padding: 8px 8px 8px 0;
   box-sizing: border-box;
}
.state-list {
   padding-bottom: 16px;
}
.state-item {
   display: inline-block;
   color: #ffffff;
   padding: 4px 28px;
   font-size: 14px;
}
.light-container {
   margin-top: 8px;
   text-align: center;
}
.earth-wrapper {
   position: relative;
   display: inline-block;
   width: 600px;
}
.earth-light-circle img,
.earth-light img,
.air-condit img {
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
   -webkit-object-fit: contain;
   object-fit: contain;
}
.earth-light,
.earth-light-border {
   position: absolute;
   width: 65%;
   height: 65%;
   top: 13%;
   left: 16%;
}
.earth-light-border-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   animation: rotateAntiClockAnimation 40s linear infinite;
}
.earth-light-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
   animation: rotateClockAnimation 40s linear infinite;
}
.air-condit {
   position: absolute;
   width: 50%;
   height: 50%;
   top: 21%;
   left: 23%;
}
.sanjiao-wrapper {
   position: absolute;
}
.sanjiao-wrapper i {
   font-size: 35px;
   color: #00fefe;
}
.sanjiao-wrapper.sanjiao-top,
.sanjiao-wrapper.sanjiao-bottom {
   left: 50%;
   margin-left: -15px;
}
.sanjiao-wrapper.sanjiao-top {
   top: -20px;
}
.sanjiao-wrapper.sanjiao-top i {
   transform: rotate(-0deg);
}
.sanjiao-wrapper.sanjiao-bottom {
   bottom: -25px;
}
.sanjiao-wrapper.sanjiao-bottom i {
   transform: rotate(-180deg);
}
.sanjiao-wrapper.sanjiao-left,
.sanjiao-wrapper.sanjiao-right {
   top: 50%;
   margin-left: -15px;
}
.sanjiao-wrapper.sanjiao-left {
   left: -10px;
}
.sanjiao-wrapper.sanjiao-left i {
   transform: rotate(-90deg);
}
.sanjiao-wrapper.sanjiao-right {
   right: -25px;
}
.sanjiao-wrapper.sanjiao-right i {
   transform: rotate(-270deg);
}
@keyframes rotateClockAnimation {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(359deg);
   }
}
@keyframes rotateAntiClockAnimation {
   from {
      transform: rotate(359deg);
   }
   to {
      transform: rotate(0deg);
   }
}

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

         &.input-text {
            min-width: 8rem;
         }

         &.input-content {
            margin-left: 8px;
            margin-right: 8px;
            padding: 4px 12px;
            min-width: 6rem;
            background-color: #2c5774;
            border: 1px solid #42d4ff;
            text-align: center;
         }
      }
   }
}
.input-box-container {
   display: inline-block;
   border: 1px solid #00feff;
   border-radius: 4px;
   padding: 4px 8px;
   margin-left: 8px;
   margin-right: 8px;
   background-color: #00253F;
   .input-text {
      display: inline-block;
      text-align: center;
      color: #00feff;
      font-size: 16px;
      vertical-align: middle;
      margin-right: 8px;
   }
   .input-light {
      display: inline-block;
   }
}
.input-box-list {
   margin-top: 16px;
   .input-box-wrapper {
      text-align: center;
      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>