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

<template>
  <div class="camera-container">
    <div class="left-area">
      <cameraTree :selected="selected" :list="listArr" :draggable="true" @detail-node="onDetail" @on-click="onClick">
        <template #icon="{ item }">
          <template v-if="item.isFolder">
            <SvgIcon v-if="item.expanded" size="18" name="file-open" />
            <SvgIcon v-else size="18" name="file-close" />
          </template>
          <treeIcon class="iconfont" :title="item.title" v-else />
        </template>
        <template #operation="{ type }">
          <!-- <i class="iconfont icon-eyeoutlined"></i> -->
          <span style="color: #ccc; font-size: 12px">详情</span>
        </template>
      </cameraTree>
    </div>
    <div class="right-area">
      <div v-if="renderPlayer" ref="playerRef"
        style="display: flex; width: 100%; height: calc(100% - 60px); overflow-y: auto; pointer-events: none"> </div>
      <div class="camera-box" v-else>
        <Empty />
      </div>
      <div class="pagination">
        <Pagination v-model:current="pagination.current" v-model:page-size="pagination.pageSize" :total="Total"
          @change="onChange" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, reactive, computed, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { list, cameraAddr, getCameraDevKind, getDevice, getVentanalyCamera } from './camera.api';
import cameraTree from './common/cameraTree.vue';
import { SvgIcon } from '/@/components/Icon';
import treeIcon from './common/Icon/treeIcon.vue';
import { useCamera } from '/@/hooks/system/useCameraPianation';
import { Pagination, Empty } from 'ant-design-vue';

const { getCamera, removeCamera, Total } = useCamera();
const playerRef = ref();
const renderPlayer = ref(true);
//当前选中树节点
let selected = reactive<any>({
  id: null,
  pid: null,
  title: '',
  isFolder: false,
});
//tree菜单列表
let listArr = reactive<any[]>([]);
let searchParam = reactive({
  devKind: '',
  strType: '',
});
let pagination = reactive({
  current: 1,
  pageSize: 6,
})
let router = useRouter(); //路由
let nodeData = reactive<any>({})

async function getCameraDevKindList() {
  let res = await getCameraDevKind();
  if (res.length != 0) {
    listArr.length = 0;
    listArr.push({
      pid: 'root',
      isFolder: true,
      expanded: true,
      title: '全部',
      id: 0,
      children: [],
    });
    res.forEach((el) => {
      el.pid = 0;
      el.isFolder = true;
      el.expanded = false;
      el.title = el.itemText;
      el.id = el.subDictId;
      el.children = [];
      listArr[0].children.push(el);
    });
    selected.id = listArr[0].id;
    selected.pid = listArr[0].pid;
    selected.title = listArr[0].title;
    selected.isFolder = listArr[0].isFolder;
  }
}

//点击目录
async function onClick(node) {
  if (selected.title === node.title && selected.id === node.id) return;
  selected.id = node.id;
  selected.pid = node.pid;
  selected.title = node.title;
  selected.isFolder = node.isFolder;
  pagination.current = 1;
  if (node.pid != 'root') {
     nodeData = Object.assign({}, node)
    if (node.isFolder) {
      let types, devicetype;
      if (node.itemValue.indexOf('&') != -1) {
        types = node.itemValue.substring(node.itemValue.indexOf('&') + 1);
        devicetype = node.itemValue.substring(0, node.itemValue.indexOf('&'));
      } else {
        types = '';
        devicetype = '';
      }
      let res = await getDevice({ ids: types, devicetype: devicetype });
      if (res.msgTxt.length != 0) {
        res.msgTxt[0].datalist.forEach((el) => {
          el.pid = node.id;
          el.isFolder = false;
          el.title = el.strinstallpos;
          el.id = el.deviceID;
        });
        listArr[0].children.forEach((v) => {
          if (v.id == node.id) {
            v.children = res.msgTxt[0].datalist;
          }
        });
      }
      searchParam.devKind = node.itemValue;
      searchParam.strType = '';
      let paramKind = searchParam.devKind.substring(0, searchParam.devKind.indexOf('&'));
      await getCamera('', playerRef, renderPlayer, pagination, '', paramKind);
    } else {
      await getCamera(node.deviceID, playerRef, renderPlayer, pagination);
    }
  } else {
    searchParam.devKind = '';
    searchParam.strType = '';
    await getCamera('', playerRef, renderPlayer, pagination);
  }
}

//点击详情跳转
function onDetail(node) {
  let str = listArr[0].children.filter((v) => v.id == node.pid)[0].itemValue;
  let type = str.indexOf('&') != -1 ? str.substring(0, str.indexOf('&')) : '';
  console.log(type, 'type--------');
  switch (type) {
    case 'pulping': //注浆
      router.push('/grout-home');
      break;
    case 'window': //自动风窗
      router.push('/monitorChannel/monitor-window?id=' + node.deviceID);
      break;
    case 'gate': //自动风门
      router.push('/monitorChannel/monitor-gate?id=' + node.deviceID + '&deviceType=' + node.deviceType);
      break;
    case 'fanlocal': //局部风机
      router.push('/monitorChannel/monitor-fanlocal?id=' + node.deviceID + '&deviceType=fanlocal');
      break;
    case 'fanmain': //主风机
      router.push('/monitorChannel/monitor-fanmain?id=' + node.deviceID);
      break;
    case 'forcFan': //压风机
      router.push('/forcFan/home');
      break;
    case 'pump': //瓦斯抽采泵
      router.push('/monitorChannel/gasPump-home');
      break;
    case 'nitrogen': //制氮
      router.push('/nitrogen-home');
      break;
  }
}

//分页
async function onChange(page) {
  pagination.current = page
  console.log()
  if (nodeData.isFolder) {
    let paramKind = nodeData.itemValue.substring(0, searchParam.devKind.indexOf('&'));
    await getCamera('', playerRef, renderPlayer, pagination, '', paramKind);
  } else if (!nodeData.isFolder) {
    await getCamera(nodeData.deviceID, playerRef, renderPlayer, pagination);
  } else {
    await getCamera('', playerRef, renderPlayer, pagination);
  }

}

onMounted(async () => {
  await getCameraDevKindList();
  await getCamera('', playerRef, renderPlayer, pagination);
});
onBeforeUnmount(() => {
  removeCamera(playerRef);
});
</script>
<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .camera-container {
    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
  }
}

.camera-container {
  --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
  position: relative;
  width: calc(100% - 30px);
  height: calc(100% - 84px);
  display: flex;
  margin: 15px;
  justify-content: space-between;
  align-items: center;

  .left-area {
    width: 15%;
    height: 100%;
    padding: 20px;
    border: 1px solid #99e8ff66;
    background: #27546e1a;
    box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
    -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
    -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
    box-sizing: border-box;

    // lxh
    .iconfont {
      color: #fff;
      font-size: 12px;
      margin-left: 5px;
    }
  }

  .right-area {
    width: 85%;
    height: 100%;
    padding: 0px 0px 0px 15px;
    box-sizing: border-box;
  }

  .pagination {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

:deep(#LivePlayerBox) {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  pointer-events: none;

  .liveVideo {
    width: 510px !important;
    height: 320px !important;
    align-self: auto !important;
    margin: 10px 8px !important;
    background-size: 100% 100% !important;
    padding: 15px !important;
  }

  .video-parent {
    pointer-events: auto !important;
    align-self: auto !important;
  }
}
</style>