mky-vent-5/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, nextTick } 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'] = (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
  debugger
  if(timer) clearTimeout(timer)
  timer = undefined
  if (monitorTable.value) monitorTable.value.setLoading(true)
  nextTick(() => {
    timer = null
    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 = undefined;
function getMonitor() {
  if (timer) timer = null
  if (Object.prototype.toString.call(timer) === '[object Null]' && deviceType.value) {
    timer = setTimeout(async () => {
      await getDataSource()
      if (timer) {
        getMonitor();
      }
    }, 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 = []
  if(timer) clearTimeout(timer)
  timer = undefined
  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)
  debugger
  if (timer === undefined) {
    timer = null
    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((newState, prev) => {
    for (const key in newState) {
      if (key === 'pageObj') {
        const pageObj = newState[key]
        if (pageObj) {
          routerParam.value = pageObj.pageType
          if(routerParam.value !== 'home'){
            if (pageObj.deviceid) {
              findTreeDataValue(treeData.value, { deviceid: pageObj.deviceid })
            } else {
              findTreeDataValue(treeData.value, { deviceType: pageObj.pageType })
            }
          }
        }
      }
    }
  })
  await getDeviceType()
  // getMonitor()
})
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = undefined;
})

</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: 120px;
    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>