mky-vent-5/src/views/vent/monitorManager/nitrogen/index.vue

<template>
  <div class="threejs-Object-CSS"></div>
  <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
  <div class="vent-home">
    <div class="vent-home-header">
      <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width:500px;height:40px;" />
      <div class="header-text">智能压风管控系统</div>
    </div>
    
    <div class="nitrogen-container">
      <div class="top-box">
          <!-- 左边监测数据 -->
          <div class="lr-box left-box">
            <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
              <dv-decoration7 style="height:30px;">
                <div class="base-title">空压机{{ groupNum }}</div>
              </dv-decoration7>
              <div class="monitor-box">
                <div class="state-item" v-for="(data, index) in showMonitorData" :key="index">
                  <div class="item-col" v-if="Object.values(data).length > 0">
                    <span class="state-title">{{ Object.values(data)[0] }} :</span>
                    <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0 ? monitorData[groupNum - 1][Object.keys(data)[0]] : '-' }}</span>
                  </div>
                  <div class="item-col" v-if="Object.values(data).length > 1">
                    <span class="state-title">{{ Object.values(data)[1] }} :</span>
                    <span class="state-val">{{ (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0 ? monitorData[groupNum - 1][Object.keys(data)[1]] : '-' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右边控制状态 -->
          <div class="lr-box right-box">
            <div class="item" >
              <div class="control-item">
                <div class="control-item-l">
                    <!-- <img src="@/assets/img/yccz.png" alt="" width="36px" height="36px" style="margin-right: 10px;"> -->
                    <span style="font-size: 18px;">远程控制</span>
                </div>
              </div>
              <div class="control-item" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
                <div class="control-item-l">
                  <span class="round"></span>
                  <span>{{ kyjs[groupNum - 1] }}</span>
                </div>
                <div class="control-item-r" style="display: flex; align-items: center;">
                  <a-switch
                    v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
                    checked-children="开启"
                    un-checked-children="关闭"
                    :disabled="airCompressorState[groupNum - 1][`controlModel`]"
                    @change="handlerDevice(airCompressorState[groupNum - 1])">
                  </a-switch>
                  <div class="button-box">
                    <!-- <a-button type="primary" siz="small" @click="resetDevice(airCompressorState[groupNum - 1])">复位</a-button> -->
                    <span class="">复位</span>
                  </div>
                </div>
              </div>
              <div class="control-item">
                <div class="control-item-l">
                  <span class="round"></span>
                  <span>控制模式</span>
                </div>
                <div>
                  <a-switch
                    v-model="airCompressorState[0][`controlModel`]"
                    checked-children="就地"
                    un-checked-children="远程"
                    @change="handlerControlModel(airCompressorState[0])">
                  </a-switch>
                </div>
              </div>
            </div>
            <!-- <div class="item" >
              <assembly-flv ref="video" class="video-box" height="250px"  :url="videoUrl" :destroy="isDestroyVideo" ></assembly-flv>
            </div> -->

          </div>
        </div>
    </div>
    <div class="bottom-btn-group">  
      <div v-for="item in bottomBtnList" :key="item.value" class="vent-row-center btn-item" @click="setBtn('click', item)" @mouseenter="setBtn('over', item)" @mouseleave="setBtn('leave', item)">
        <dv-decoration11 :color="isBtnActive === item.value ? activeColors : item.isHover ? activeColors : noActiveColors" style="width:200px;height:60px;">
          {{ item.text }}
        </dv-decoration11>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { Decoration5, Decoration11 as DvDecoration11, Decoration7 as DvDecoration7, BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
import { bottomBtnList } from './nitrogen.data'
import { mountedThree } from './nitrogen.threejs'

const activeColors = ['#009BFF', '#28DBE4']
const noActiveColors = ['#aaa', '#aaa']
const isBtnActive = ref('workFace')

const kyjs = ['1号空压机', '2号空压机', '3号空压机', '4号空压机'];
// const cqgs = ['1号储气罐', '2号储气罐', '3号储气罐', '4号储气罐'];
// const checkedKyjs = new Set(['1号空压机']);
const monitorDataGroupNum = 3;
const airCompressorState = ref([
  {
    id: '',
    compressRunSigF1: false,
    controlModel: false
  },
  {
    id: '',
    compressRunSigF1: false,
    controlModel: false
  },
  {
    id: '',
    compressRunSigF1: false,
    controlModel: false
  },
  {
    id: '',
    compressRunSigF1: false,
    controlModel: false
  }
]);
const showMonitorData = [
  {
    supVolt1: '电流A(A)',
    supVolt2: '电流B(A)',
  },
  {
    supVolt3: '电流C(A)',
    current: '电源电压(V)',
  },
  {
    shock1: '震动X(mm/s)',
    shock2: '震动Y(mm/s)',
  },
  {
    shock3: '震动Z(mm/s)',
    noise: '噪声',
  },
  {
    ambTempCol: '环境温度(℃)',
  },
];
const monitorData = ref(new Array(4).fill({
  strName: '空压机',
  compressGroupName: '',
  compressExhaustPressF1: '-',
  compressSeparatePressF1: '-',
  compressHostTempF1: '-',
  compressCrewTempF1: '-',
  compressRunTimeF1: '-',
  controlModel: 'LOC'
}));


function setBtn(type, activeObj) {
  if (type === 'over') {
    activeObj.isHover = true
  } else if (type === 'leave') {
    activeObj.isHover = false
  } else if (type === 'click') {
    isBtnActive.value = activeObj.value
  }
}

function handlerDevice(data) {
  // if (data.length < 1) return
  // handleAirCompressor({ id: data.id, compressRunF1: data.compressRunSigF1 }).then(res => {
  //   if (res.success) {
  //     message.success('操作成功')
  //   } else {
  //     message.warning(data.msg)
  //   }
  // })
};
function resetDevice(data) {

}

function handlerControlModel(data) {

}


onMounted(() => {
  mountedThree()
})

onUnmounted(() => {

})

</script>
<style lang="less">
@import '/@/design/vent/modal.less';

.@{ventSpace}-select-dropdown {
  border-bottom: 1px solid #ececec66;
  background: transparent !important;
  backdrop-filter: blur(50px);

  .@{ventSpace}-select-item {
    color: #fff !important;
  }

  .@{ventSpace}-select-item-option-selected,
  .@{ventSpace}-select-item-option-active {
    background-color: #00678b66 !important;
  }

  .@{ventSpace}-select-item:hover {
    background-color: #008fc366 !important;
  }
}
</style>
<style lang="less" scoped>
@ventSpace: zxm;

.vent-home {
  width: 100%;
  height: calc(100%);
  position: fixed;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;

  .vent-home-header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;

    .header-icon {
      margin-top: 45px;
    }

    .header-text {
      position: fixed;
      top: 18px;
      color: #fff;
      font-size: 24px;
    }
  }

  .nitrogen-container {
    width: 100%;
    height: calc(100% - 200px);
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    .top-box{
      width: 100%;
      padding: 10px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      .lr-box{
        height: fit-content;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        z-index: 9999;
      }
      .item{
        width: 285px;
        height: auto;
        position: relative;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 0px;
        pointer-events: auto;
        color: #fff;
        overflow: hidden;
      
        .control-item{
          height: auto;
          min-height: 35px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 5px;
          margin: 0 10px 0 3px;
          pointer-events: auto;
          background: linear-gradient(to right, #0063CD22, #0063CD04);

          margin-bottom: 5px;
          border-width: 1px;
          border-style: dashed;

          border-image: linear-gradient(to right, #008ccd66, #0063CD04)1 1;
          border-radius: 5px;
          &:last-child{
            margin-bottom: 0
          }
          .control-item-l{
            display: flex;
            align-items: center;
            font-size: 14px;
            .round{
              display: inline-block;
              width: 3px;
              height: 3px;
              padding: 1px;
              border-radius: 50%;
              background-color: #3DF6FF;
              margin-right: 5px;
              box-shadow: 0 0 1px 1px #64f7ff;
            }
          }
          .control-item-r{
            text-align: right;
          }
          .button-box{
            position: relative;
            padding: 5px;
            border:1px transparent solid;
            background-clip: border-box;
            border-radius: 5px;
            margin-left: 8px;
          }
          .a-button{
            pointer-events: auto;
          }
          &::v-deep .a-button--mini {
            padding: 6px 10px;
          }
          &::v-deep .a-button--mini.is-round{
            padding: 6px 10px;
          }
        }
        .base-title {
          width: calc(100% - 60px);
          text-align: center;
          color: #00d8ff;
        }
        .state-item{
          display: flex;
          flex-direction: row;
          padding: 5px;
          .item-col{
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 4px;
            .state-title{
              color: #ffffffcc;
              flex: 9;
              font-size: 14px;
              .unit{
                // color: #ffffffbb;
              }
            }
            .state-val{
              flex: 1;
              color: #e4a300;
              margin-right: 5px;
              text-align: right;
              font-size: 14px;
            }
          }
        }
        .signal-box{
          margin: 5px 0;
          display: flex;
          align-items: center;
          .signal-title{
            color: #7AF5FF;
            margin: 0 5px;
          }

          &:last-child{
              margin-right: 0px;
            }
        }

        .list-item {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item-data-key{
            color: #ffffff99;
          }
        }
        .item-data-box {
            color: #fff;
            .state-icon {
              display: inline-block;
              width: 12px;
              height: 12px;
              border-radius: 12px;
            }

            .open {
              border: 5px solid #133a56;
              background: #4ecb73;
            }

            .close {
              border: 5px solid #192961;
              background: #6d7898;
            }
          }
      }
      .item-l{
        width: 335px;
        .monitor-box{
          width: 335px;
          background-color: #ffffff05;
          margin-left: 2px;
          border-radius: 5px;
          backdrop-filter: blur(10px);
        }
      }
      .right-box{
        .item{
          height: auto;
        }
      }
      .left-box{
        width: 365px;
        .control-item{
          height: 36px;
        }
      }
    }
  }

  .bottom-btn-group {
    display: flex;
    position: fixed;
    width: calc(100% - 400px);
    height: 100px;
    bottom: 20px;
    align-items: center;
    justify-content: center;

    .btn-item {
      width: 200px;
      height: 60px;
      margin: 10px;
      color: #fff;
      cursor: pointer;
      pointer-events: auto;
    }
  }

}

:deep(.zxm-select) {
  width: 300px;

  .@{ventSpace}-select-selector {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    .zxm-select-selection-item {
      color: #fff !important;
      font-size: 20px;
    }
  }

  .@{ventSpace}-select-arrow {
    color: #fff !important;
  }
}</style>