mky-vent-base/src/views/vent/monitorManager/deviceMonitor/index.vue

<template>
  <div class="scene-box" v-if="routerParam !== 'home'">
  <!-- <div class="scene-box"> -->
    <div class="device-header">智能通风管控系统</div>
    <div class="select-node" :class="{ 'node-select-show': !treeShow, 'node-select-hide': treeShow, }">
      <SvgIcon class="is-expansion-icon put-away-icon" size="38" name="expansion" @click="showTree(true)" />
      <span class="title">{{ treeNodeTitle }}</span>
    </div>
    <div class="device-select" :class="{ 'device-select-show': treeShow, 'device-select-hide': !treeShow, }">
      <SvgIcon class="is-expansion-icon expansion-icon" size="28" name="put-away" @click="showTree(false)" />
      <div class="device-select-box">
        <a-tree
          :show-line="true"
          :tree-data="treeData"
          v-model:selectedKeys="selectedKeys"
          v-model:expandedKeys="expandedKeys"
          @select="onSelect"
        >
        </a-tree>
      </div>  
    </div>
    <div class="bottom-tabs-box" @mousedown="setDivHeight" id="monitorBox">
      <div class="to-small" @click="toHome"></div>
      <div class="device-button-group" v-if="deviceList.length > 0">
        <div class="device-button" :class="{ 'device-active': deviceActive == device.deviceType }" v-for="(device, index) in deviceList" :key="index" @click="monitorChange(index)">{{ device.deviceName }}</div>
        <div class="enter-detail" @click="goDetail()">
          <send-outlined />
          {{ treeNodeTitle }}详情
        </div>
      </div>
      <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange" >
        <a-tab-pane key="1" tab="实时监测">
          <template v-if="deviceType == 'fan' && activeKey == '1'">
            <GroupMonitorTable :dataSource="dataSource" :columnsType="`${deviceType}_monitor`" />
          </template>
          <template v-else-if = "activeKey == '1'">
            <MonitorTable
              ref="monitorTable"
              :columnsType="`${deviceType}_monitor`"
              :dataSource="dataSource"
              design-scope="device_monitor"
              :isShowPagination = "false"
              :isShowActionColumn="true"
              title="设备监测"
            >
            <template #action="{ record }">
              <TableAction
                :actions="[
                    {
                      label: '详情',
                      onClick: goDetail.bind(null, record),
                    },
                    {
                      label: '定位',
                      onClick: goLocation.bind(null, record),
                    },
                  ]"
              />
            </template>
            </MonitorTable>
          </template> 
        </a-tab-pane>
        <a-tab-pane key="2" tab="历史数据">
          <div class="tab-item">
            <HistoryTable ref="historyTable" v-if="activeKey == '2'" :sysId="systemID" :columns-type="`${deviceType}`" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { strtype : deviceType, sysId: systemID })" designScope="device-history" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="报警历史">
          <div class="tab-item">
            <AlarmHistoryTable ref="alarmHistoryTable" v-if="activeKey == '3'" :sysId="systemID" columns-type="alarm" :device-type="deviceType" :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID })" designScope="alarm-history" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="操作历史">
          <div class="tab-item">
            <HandlerHistoryTable ref="handlerHistoryTable" v-if="activeKey == '4'" :sysId="systemID" columns-type="operatorhistory" :device-type="deviceType"  :device-list-api="getDeviceList.bind(null, { strtype: deviceType, sysId: systemID  })" designScope="operator-history" />
          </div> 
        </a-tab-pane>
      </a-tabs>
    </div>
    <component v-if="modalVisible" :is="currentModal" v-model:visible="modalVisible" :dataSource="dataSource" :activeID="activeID" />
  </div>
</template>
<script setup lang="ts">
  import {ref, onMounted, onUnmounted, ComponentOptions, shallowRef } from 'vue'
  import { SendOutlined } from '@ant-design/icons-vue';
  import { list, getDeviceList, getDeviceTypeList } from './device.api'
  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  import HistoryTable from '../comment/HistoryTable.vue';
  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
  import { TreeProps, message } from 'ant-design-vue';
  import { TableAction } from '/@/components/Table';
  import FiberModal from './modal/fiber.modal.vue';
  import DustModal from './modal/dust.modal.vue'
  import { SvgIcon } from '/@/components/Icon';
  import { getActions } from '/@/qiankun/state';
  import { useRouter } from 'vue-router';
  

  type DeviceType = { deviceType: string, deviceName: string, datalist: any[] };

  const router = useRouter()

  const actions = getActions();
  actions.setGlobalState({ pageObj: { pageType: 'home' } });

  const monitorTable = ref()
  const historyTable = ref()
  const alarmHistoryTable = ref()
  const handlerHistoryTable = ref()

  const routerParam = ref('home') // 默认进来时首页
  // 模态框
  const currentModal = shallowRef<Nullable<ComponentOptions>>(null); //模态框
  const modalVisible = ref<Boolean>(false); // 模态框是否可见

  //
  const drawerHeight = ref(240) // 监测框最小高度
  const treeShow = ref(true) //是否显示树形菜单
  const treeNodeTitle = ref('') // 选中的树形标题

  const deviceList = ref<DeviceType[]>([])
  const deviceActive = ref('')
  const activeKey = ref('1'); // tab key
  const dataSource = shallowRef([]) // 实时监测数据
  const activeID = ref('') // 打开详情modal时监测的设备id
  const deviceType = ref('') // 监测设备类型
  const systemType = ref('')
  const systemID = ref('') // 系统监测时，系统id
  const selectedKeys = ref<string[]>([]);
  const expandedKeys = ref<string[]>([]);
  const scroll = ref({
    y: drawerHeight.value - 100
  })
  const treeData = ref<TreeProps['treeData']>([]);

  //树形菜单选择事件
  const onSelect: TreeProps['onSelect'] = async(keys, e) => {
    deviceType.value = ''
    systemID.value = ''
    deviceList.value = []
    if(e.node.parent && (e.node.parent.node.type.toString()).startsWith('sys')){
      systemType.value = e.node.parent.node.type
      deviceType.value = e.node.parent.node.type
      systemID.value = e.node.type
      // 传递工作面id信息,用于定位
      actions.setGlobalState({ locationObj: { pageType: deviceType.value ,deviceid: systemID.value }, pageObj: null });
    }else{
      systemType.value = e.node.type
      deviceType.value = e.node.type
    }
    selectedKeys.values = keys
    treeNodeTitle.value = e.node.title

    if (timer) clearInterval(timer);
    await getDataSource()
    getMonitor() 
  };
  
  function tabChange(activeKeyVal) {
    activeKey.value = activeKeyVal;
  };

  function showTree(flag) {
    treeShow.value = flag
  }
  
  async function getDeviceType () {
    const result = await getDeviceTypeList({})
    if (result.length > 0) {
      const dataSource = <TreeProps['treeData']>[]
      let key = '0'
      const getData = (resultList, dataSourceList, keyVal) => {
        resultList.forEach((item, index) => {
          if (item.children && item.children.length > 0) {
            const children = getData(item.children, [], `${keyVal}-${index}`)
            dataSourceList.push({
              children: children,
              title: item.itemText,
              key: `${keyVal}-${index}`,
              type: item.itemValue,
            });
            
          } else {
            dataSourceList.push({
              children: [],
              title: item.itemText,
              key: `${keyVal}-${index}`,
              type: item.itemValue,
            });
          }
        });
        return dataSourceList
      }
      console.log('树形菜单-------------->', treeData.value)
      treeData.value = getData(result, dataSource, key)
      
    }
  }

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor() {
    timer = setInterval(async () => {
      await getDataSource()
    }, 1000);
  };

  async function getDataSource() {
    if (deviceType.value.startsWith('sys') && systemID.value) {
      const res = await list({ devicetype: 'sys', systemID: systemID.value });
      const result = res.msgTxt;
      const deviceArr = <DeviceType[]>[]
      result.forEach(item => {
        const data = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        })
        if (item.type != 'sys') {
          deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data })
        }
      })
      console.log('关联设备列表', deviceArr)
      deviceList.value = deviceArr
      deviceActive.value = deviceArr[1].deviceType
      monitorChange(1)
    } else {
      const res = await list({ devicetype: deviceType.value, pagetype: 'normal' })
      if (res.msgTxt[0]) {
        dataSource.value = res.msgTxt[0].datalist || [];
        dataSource.value.filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
    }
  }

  function setDivHeight(e: MouseEvent) {
    const divObject = document.getElementById('monitorBox') as HTMLElement
    const divHeight = divObject.offsetHeight
    drawerHeight.value = divHeight
    const startY = e.clientY
    document.onmousemove = function(res){
      res.preventDefault()
      const distY = Math.abs(res.clientY - startY)
      if(res.clientY > startY){
        if(divHeight - distY >= 240){
          drawerHeight.value = divHeight - distY
        }else{
          drawerHeight.value = 240
        }
      }
      if(res.clientY < startY){
        drawerHeight.value = divHeight + distY
      }
      divObject.style.height = drawerHeight.value+'px'
    }
    document.onmouseup = function() {
      document.onmousemove = null
      if(scroll.value.y != drawerHeight.value - 100) {
        scroll.value = {y: drawerHeight.value - 100 }

        // const tableBody =  document.getElementsByClassName('zxm-table-container')[0].children[1] as HTMLElement
        // debugger
        // tableBody.style.height = `${drawerHeight.value - 350}px`
      }
    }
  }
  // 定位
  function goLocation(record) {
    actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
  }
  // 详情
  function goDetail(record?){

    if(record){
      if (deviceType.value.startsWith('fiber')) {
        activeID.value = record.deviceID
        currentModal.value = FiberModal
        modalVisible.value = true;
      } else if (deviceType.value.startsWith('dusting')) {
        activeID.value = record.deviceID
        currentModal.value = DustModal
        modalVisible.value = true;
      } else if (deviceType.value.indexOf("gate") != -1) {
        const newPage = router.resolve({path: '/monitorChannel/monitor-gate'})
        window.open(newPage.href, '_blank')
      } else if (deviceType.value.indexOf("window") != -1) {
        const newPage = router.resolve({ path: '/monitorChannel/monitor-window' })
        window.open(newPage.href, '_blank')
      } else if (deviceType.value.indexOf("windrect") != -1) {
        const newPage = router.resolve({ path: '/monitorChannel/monitor-windrect' })
        window.open(newPage.href, '_blank')
      } else if (deviceType.value.indexOf("fanmain") != -1) {
        const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-main' })
        window.open(newPage.href, '_blank')
      } else if (deviceType.value.indexOf("fanlocal") != -1) {
        const newPage = router.resolve({ path: '/monitorChannel/monitor-fan-local' })
        window.open(newPage.href, '_blank')
      } else {
        message.info('待开发。。。')
      }
    }else{
      if (systemType.value.indexOf("sys_dongshi") != -1) {
        const newPage = router.resolve({ path: '/chamber-home', query: {id: systemID.value }})
        window.open(newPage.href, '_blank')
      }else{
        message.info('待开发。。。')
      }
    }
    
  }
  
  function toHome() {
    deviceList.value = []
    actions.setGlobalState({ pageObj: { pageType: 'home'} });
  }
  // 遍历树形菜单
  async function findTreeDataValue(data:[], obj) {
    const findDeviceType = (data: [], obj) => {
      let type = ''
      if (obj.deviceid) {
        type = obj.deviceid
      } else {
        type = obj.deviceType
      }
      data.find((item: any) => {
        if (item.children.length > 0) {
          findDeviceType(item.children, obj)
        }
        if (item.type == type) {
          deviceType.value = obj.deviceid ? 'sys' : item.type
          if (obj.deviceid) systemID.value = obj.deviceid
          selectedKeys.value = [item.key]
          expandedKeys.value = [item.key]
          treeNodeTitle.value = item.title
        }
      })
    }
    findDeviceType(data, obj)
    if (timer) clearInterval(timer);
    await getDataSource()
    getMonitor()
  }

  function monitorChange(index) {
    dataSource.value = []
    deviceActive.value = deviceType.value = deviceList.value[index].deviceType

    if (activeKey.value == '1' && monitorTable.value) {
      monitorTable.value.setLoading(true)
      dataSource.value = deviceList.value[index].datalist
    }
    if(activeKey.value == '2' && historyTable.value){
      historyTable.value.setLoading(true)
    }
    if (activeKey.value == '3' && alarmHistoryTable.value) {
      alarmHistoryTable.value.setLoading(true)
    }
    if (activeKey.value == '4' && handlerHistoryTable.value) {
      handlerHistoryTable.value.setLoading(true)
    }
  }
  
  onMounted(async() => {
    actions.onGlobalStateChange(async(newState, prev) => {
      for (const key in newState) {
        if (key === 'pageObj') {
          const pageObj = newState[key]
          if (pageObj) {
            routerParam.value = pageObj.pageType
            if (pageObj.deviceid) {
              await findTreeDataValue(treeData.value, { deviceid: pageObj.deviceid })
            } else {
              await findTreeDataValue(treeData.value, { deviceType: pageObj.pageType })
            }
          }
        }
      }
    })
    await getDeviceType()
    // await getDataSource()
    // getMonitor()
  })
  
  onUnmounted(() => {
    if (timer) {
      clearInterval(timer);
    }
  })

</script>
<style lang="less" scoped >
  @import '/@/design/vent/modal.less';
  @ventSpace: zxm;  
  .device-header{
    position: fixed;
    width: 100%;
    height: 56px;
    background: url('/@/assets/images/vent/home/modal-top.png');
    text-align: center;
    line-height: 56px;
    font-size: 28px;
    color: #ffffffdd;
    font-weight: 600;
    z-index: -1;
  }
  .select-node{
    position: fixed;
    top: 60px;
    left: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    font-size: 24px;
    .title{
      margin-left: 10px;
    }
  }
  .device-select{
    width: 250px;
    height: 500px;
    background: url('/@/assets/images/vent/home/tree-bg.png') no-repeat;
    position: fixed;
    top: 60px;
    left: 10px;
    background-size: contain;
    pointer-events: auto;
    padding: 20px 10px 30px 10px;
    .expansion-icon{
      position: absolute;
      left: 190px;
      top: 25px;
    }
  }
  .is-expansion-icon{
    background: url('/@/assets/images/vent/home/tree-icon-bg.png') no-repeat;
    background-size: contain;
    padding: 5px;
    pointer-events: auto;
    z-index: 999;
    &:hover{
      background: url('/@/assets/images/vent/home/tree-icon-hover-bg.png') no-repeat;
      background-size: contain;
    }
  }
  .put-away-icon{
    display: inline-block;
  }
  .device-select-show{
    left: 10px;
    animation-name: treeShow;
    /* 持续时间 */
    animation-duration: 1s;
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
  }
  .device-select-hide{
    left: -250px;
    animation-name: treeHide;
    /* 持续时间 */
    animation-duration: 1s;
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
  }
  .node-select-show{
    left: 10px;
    animation-name: treeShow;
    /* 持续时间 */
    animation-duration: 1s;
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
  }
  .node-select-hide{
    left: -400px;
    animation-name: treeHide;
    /* 持续时间 */
    animation-duration: 1s;
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) .5s;
  }
  .device-select-box{
    width: 208px;
    height: 450px;
    overflow-y: auto;    
    color: #fff;    
    :deep(.zxm-tree){
      background: transparent !important;
      color: #fff !important;
      .zxm-tree-switcher{
        background: transparent !important;
      }
      .zxm-tree-node-content-wrapper.zxm-tree-node-selected{
        background-color: #00b1c8;
      }
      .zxm-tree-node-content-wrapper:hover{
        background-color: #00b1c855;
      }
      input{
        height: 0px !important;
      }
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ededed22;
      height: 100px;
    }
    &::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #4288A444;
    }
  }
  .bottom-tabs-box{
    
    position: relative;
    .to-small{
      width: 60px;
      height: 60px;
      background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
      background-size: auto;
      position: absolute;
      top: -65px;
      right: 30px;
      border-radius: 10px;
      padding: 8px;
      backdrop-filter: blur(10px);
      background-color: rgba(0, 58, 128, 0.418);
      &:hover{
        background-color: rgba(42, 85, 138, 0.418);
      }
    }
    .device-button-group{
      position: absolute;
      top: -30px;
      left: 30px;
      display: flex;
      width: 100%;
      
      .device-button{
        padding: 4px 15px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        
        color: #fff;
        cursor: pointer;
        margin: 0 3px;

        &::before{
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border: 1px solid #6176AF;
          transform: skewX(-38deg);
          background-color: rgba(0, 77, 103,85%);
          z-index: -1;
        }
      }
      .device-active{
        // color: #0efcff;
        &::before{
          border-color: #0efcff;
          box-shadow: 1px 1px 3px 1px #0efcff inset;
        }
      }
    }
    .enter-detail{
      color: #fff;
      cursor: pointer;
      position: absolute;
      right: 150px;
      top: -10px;
      padding: 5px;
      // border: 1px transparent solid;
      border-radius: 5px;
      margin-left: 8px;
      margin-right: 8px;
      width: auto;
      // height: 40px;
      // border: 1px solid #65dbea;
      height: 33px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 5px 15px 5px 15px;
      cursor: pointer;
      &:hover {
        background: linear-gradient(#2cd1ff55, #1eb0ff55);
      }
      &::before {
        width: calc(100% - 6px);
        height: 27px;
        content: '';
        position: absolute;
        top: 3px;
        right: 0;
        left: 3px;
        bottom: 0;
        z-index: -1;
        border-radius: inherit; /*important*/
        background: linear-gradient(#1fa6cb, #127cb5);
      }
      &::after {
        width: calc(100% + 32px);
        height: 10px;
        content: '';
        position: absolute;
        top: 35px;
        right: 0;
        left: -16px;
        bottom: 0;
        z-index: -1;
        border-radius: inherit; /*important*/
        background: url('/@/assets/images/vent/short-light.png') no-repeat;
        background-position: center;
        background-size: 100%;
        z-index: 999;
      }
    }
  }
  @keyframes treeShow {
    0% {
      left: -400px;
      opacity: 0;
    }
    100% {
      left: 10px;
      opacity: 1;
    }
  }
  @keyframes treeHide {
    0% {
      left: 10px;
      opacity: 1;
    }
    100% {
      left: -400px;
      opacity: 0;
    }
  }
  
  :deep(.@{ventSpace}-tabs-tabpane-active) {
    overflow: auto;
    // height: 100%;
  }
  :deep(.zxm-select-dropdown){
    left: 0 !important;
  }
</style>