mky-vent-5/src/views/vent/monitorManager/groutMonitor/components/groutHome.vue

<template>
  <div class="monitor-container">
    <div class="lr left-box">
      <div class="monitor-info item-box">
        <ventBox1>
          <template #title>
            <div>设备信息监测</div>
          </template>
          <template #container v-if="dataSource.length > 0 ">
            <div v-for="(monitor, key) in deviceMonitorData" :key="key" class="monitor-item">
              <div class="item-title">{{ monitor.text }}</div>
              <div class="item-val">{{ key.startsWith('1#') ? dataSource[0][key.split('_')[1]]||'-' : key.startsWith('2#') ? dataSource[1][key.split('_')[1]]||'-' : (dataSource[0][key] || '-') }}</div>
              <div class="item-unit">{{ monitor.unit }}</div>
            </div>
          </template>
        </ventBox1>
      </div>
      <div class="warning-group">
        <ventBox1>
          <template #title>
            <div>近一月报警情况</div>
          </template>
          <template #container>
           <dv-scroll-board ref="scrollBoard" :config="warningConfig"
              style="width: 100%; height: 240px; overflow-y: auto; " />
          </template>
        </ventBox1>
      </div>
    </div>
    <div class="lr right-box">
      <div class="control-container item-box">
        <ventBox1>
          <template #title>
            <div>设备设施集中控制</div>
          </template>
          <template #container >
            <div class="control-group">
              <div class="control-item" v-for="(item, key) in deviceControlData" :key="key">
                <div class="control-item-title">{{ item }}</div>
                <div class="control-item-state" v-if="!key.startsWith('2#')">
                  <a-switch v-model="dataSource[0][key.split('_')[1]]" size="small"  checked-children="开启"
                    un-checked-children="关闭"
                    @change="handlerDevice(dataSource[0][key.split('_')[1]])">
                  </a-switch>
                </div>
                <div class="control-item-state" v-else>
                  <a-switch v-model="dataSource[1][key.split('_')[1]]" size="small"  checked-children="开启"
                    un-checked-children="关闭"
                    @change="handlerDevice(dataSource[1][key.split('_')[1]])">
                  </a-switch>
                </div>
              </div>
            </div>
            <a-divider style="height: 1px; background-color: #d7d7d755" />
            <div class="control-btn-group">
              <div class="control-left-box">
                <div class="btn-box">
                  <span @click="handlerDevice({ remote : true})">远程</span>
                  <span @click="handlerDevice({ remote: false })">就地</span>
                </div>
                <div class="icon-box" :class="{'remote-icon-box': true}">
                  <div class="icon"></div>
                </div>
              </div>
              <div class="control-right-box">
                <a-button class="btn" type="primary" @click="handlerDevice({run: true})">一键启动</a-button>
                <a-button type="primary" danger @click="handlerDevice({ run: false })">紧急停止</a-button>
              </div>
            </div>
            <a-divider style="height: 1px; background-color: #d7d7d755" />
            <div class="parameter-btn-group"> 
              <a-button type="primary"  @click="openModal('RunParameterModal')">参数设置</a-button>
              <a-button type="primary"  @click="openModal('WarningParameterModal')">报警设置</a-button>
            </div>
          </template>
        </ventBox1>
        
      </div>
      <div class="control-container item-box echarts-box">
        <ventBox1>
          <template #title>
            <div>设备实时监测曲线</div>
          </template>
          <template #container >
            <div class="btn-group">
              <span class="active">注浆流量</span>
              <span>注浆压力</span>
              <span>水舱液位</span>
              <span>注浆筒液位</span>
            </div>
            <div class="item-box echarts-container">
              <div class="echarts-group">
                <div class="echarts-item">
                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
                </div>
                <div class="echarts-item">
                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['pressure']" :option="yaliOption" />
                </div>
                <div class="echarts-item">
                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
                </div>
                <div class="echarts-item">
                  <BarAndLineCustom xAxisPropType="readTime" :chartData="dataSource" height="240px" :propTypeArr="['flowRate']" :option="zhujiangOption" />
                </div>
              </div>
            </div>
          </template>
        </ventBox1>
      </div>
      <!-- <div class="item-box" >
        <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
      </div> -->
    </div>
  </div>
  <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" />
</template>

<script setup lang="ts">

import { onBeforeMount, ref, onMounted, onUnmounted, shallowRef, defineProps, ComponentOptions, reactive } from 'vue';
import { mountedThree, destroy, setModelType } from '../grout.threejs';
import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
import { SvgIcon } from '/@/components/Icon';
import ventBox1 from '/@/components/vent/ventBox1.vue';
import RunParameterModal from './runParameter.modal.vue'
import WarningParameterModal from './warningParameter.modal.vue'
import { warningConfig, zhujiangOption, yaliOption } from '../grout.data'
import { list } from '../grout.api';
import LivePlayer from '@liveqing/liveplayer-v3';
import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';


const props = defineProps({
  deviceId: {
    type: String,
    require: true
  }
})
const left: string = "0px";
const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
const modalVisible = ref<Boolean>(false); // 模态框是否可见
const loading = ref(false);

// 默认初始是第一行
const dataSource = ref([
  { 
    waterSupply : '-',
    beltVla: '-',
    density: '-',
    pressure: '-',
    liquidLevel: '-',
    flowRate: '-',
    readTime: '',
  },
  {
    waterSupply: '-',
    beltVla: '-',
    density: '-',
    pressure: '-',
    liquidLevel: '-',
    flowRate: '-',
    readTime: '',
  }
]); //dusting

const deviceMonitorData = {
  '1#_waterSupply': { text: '1#制浆机供水流量', unit: 'm³/h' },
  '1#_beltVla': { text: '1#皮带秤数值', unit: 'T' },
  '2#_waterSupply': { text: '2#制浆机供水流量', unit: 'm³/h' },
  '2#_beltVla': { text: '2#皮带秤数值', unit: 'T' },
  density: {text: '密度' , unit: 'g/cm'},
  pressure: { text: '压力', unit: 'MPa' },
  liquidLevel: { text: '缓冲池液位', unit: 'm' },
  flowRate: { text: '注浆流量', unit: 'm³/h' },
}
const deviceControlData = {
  '1#_waterPump': '1#清水泵',
  '1#_groutingPump': '1#注浆泵',
  '1#_pulpingMachine': '1#制浆机',
  '2#_waterPump': '2#清水泵',
  '2#_groutingPump': '2#注浆泵',
  '2#_pulpingMachine': '2#制浆机',
  'liquidLevelProtect ':'液位保护'
}

const flvURL1 = () => {
  return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
  // return ''
};
const openModal = (modalName) => {
  modalVisible.value = true
  if(modalName == 'RunParameterModal'){
    currentModal.value = RunParameterModal
  }else{
    currentModal.value = WarningParameterModal
  }
}

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor() {
  if (Object.prototype.toString.call(timer) === '[object Null]') {
    timer = setTimeout(async () => {
      await getDataSource()
      if (timer) {
        timer = null;
      }
      await getMonitor();
    }, 1000);
  }
};

async function getDataSource() {
  const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
  const dataList = res.msgTxt[0].datalist || [];
  dataSource.value = dataList.filter((data) => {
    const item = data.readData;
    Object.assign(data, item);
    return item
  });
}

function handlerDevice(param: string | Object) {

}
function controlDevice(flag){

}

onBeforeMount(() => {

});

onMounted(() => {
  loading.value = true;
  mountedThree().then(async () => {
    await setModelType('groutBase');
    loading.value = false;
    timer = null
    await getMonitor()
  });
});
onUnmounted(() => {
  destroy();
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>
<style lang="less" scoped>
@import '/@/design/vent/modal.less';
@ventSpace: zxm;

.monitor-container {
  width: 100%;
  height: 100%;
  // height: 550px;
  // border: 1px solid #fff;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  
  .lr {
    width: 350px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    pointer-events: auto;
  }

  .right-box {
    width: 320px;
    .control-group{
      display: flex;
      // justify-content: space-around;
      flex-wrap: wrap;
      .control-item {
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 2px;
        .control-item-title{
          color: #A6DCE9;
          position: relative;
          top: 5px;
        }
        .control-item-state{
          width: 94px;
          height: 47px;
          background: url('/@/assets/images/vent/control-switch-bg.png');
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
        }
      
        .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;
        }
      }

    }
    .control-btn-group{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .control-left-box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        .btn-box{
          width: 100px;
          color: #fff;
          display: flex;
          justify-content: space-between;
          span{
            display: inline-block;
            padding: 2px 8px;
            background: #007099;
            border-radius: 4px;
            border: 1px solid rgb(125, 230, 249);
            cursor: pointer;
            &:hover{
              background: #005574;
            }
          }
        }
        .icon-box{
          width: 60px;
          height: 60px;
          border-radius: 30px;
          border: 2px solid #00bcdd;
          box-shadow: 0 0 20px #ffffff88;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20px;
             
          .icon{
            width: 18px;
            height: 18px;
            border-radius: 9px;
            border: 3px solid #d7f9ff;
            position: relative;
            background: #00bcdd;
            &::before{
              position: absolute;
              content: '';
              width: 2px;
              height: 12px;
              background-color: #00bcdd;
              left: 6px;
              top: -16px;
            }
            &::after{
              position: absolute;
              content: '';
              width: 2px;
              height: 12px;
              left: 6px;
              top: 17px;
              background-color: #00d9ff;
            }
          }
        }
        .remote-icon-box{
          transform: rotate(30deg);
          animation: iconRotate 1s linear;
        }
        .remote-icon-box1{
          transform: rotate(-30deg);
          animation: iconRotate1 1s linear;
        }

        @keyframes iconRotate{
          from{
            transform: rotate(-30deg);
          }
          to {
            transform: rotate(30deg);
          }
        }
        @keyframes iconRotate1{
          from {
            transform: rotate(30deg);
          }
          to {
            transform: rotate(-30deg);
          }
        }
        
      }
      .control-right-box{
        width: 100px;
        .btn{
          margin-bottom: 30px;
        }
      }
    }
    .parameter-btn-group{
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      margin-bottom: 10px;
    }
    .echarts-box{
      width: 100%;
      height: 332px;
      position: relative;
      &:deep(.box-container){
        padding: 0px !important;
      }
      .btn-group{
        line-height: 30px;
        color: #fff;
        text-align: center;
        margin-top: 3px;
        span{
          padding: 3px 5px;
          margin: 0 2px;
          border-radius: 2px;
          background-image: linear-gradient( #32475B, #5b95c7);
          border: 1px solid #32475B;
          cursor: pointer;
        }
        .active{
          background-image: linear-gradient( #2E4659, #37A7B4);
          border-top: 1px solid #3DF6FF;
        }
      }
      .echarts-container{
        width: 100%;
        height: 240px;
        overflow: hidden;
        position: relative;
        .echarts-group{
          display: flex;
          flex-direction: row;
          position: absolute;
          left: v-bind(left);
          .echarts-item{
            width: 305px;
          }
        }
      }
      
    }
    
  }

  .left-box {
    margin-top: 30px;
    .monitor-item{
      display: flex;
      color: #fff;
      justify-content: space-between;
      background-image: linear-gradient(to left, #3df6ff10, #3df6ff00);
      margin: 10px 0;
    
      .item-title{
        width: 200px;
        margin-left: 10px;
      }
      .item-val{
        width: 80px;
        color: #00eefffe;
      }
      .item-unit{
        width: 80px;
      }
    }
    
  }

  .item-box{
    margin-bottom: 15px;
  }

}

:deep(.@{ventSpace}-tabs-tabpane-active) {
  overflow: auto;
}

.input-box {
  display: flex;
  align-items: center;
  padding-left: 10px;

  .input-title {
    color: #73e8fe;
    width: auto;
  }

  .@{ventSpace}-input-number {
    border-color: #ffffff88 !important;
  }

  margin-right: 10px;
}
</style>