vent-forewarn-micro/src/views/vent/monitor/site/index.vue

<template>
  <div class="monitor-site flex">
    <!-- 左侧内容 -->
    <div class="h-full flex-basis-385px p-10px flex flex-col">
      <SiteFilter class="flex-shrink-0 flex-grow-0" @submit="refreshTree" />
      <SiteTree
        class="w-full flex-grow-1 h-0 scroll-auto"
        :tree-data="treeData"
        @select="focusOnSite"
      />
    </div>
    <!-- 右侧内容 主要内容 -->
    <div class="h-full flex-grow-1 relative">
      <IFrame class="w-full h-full" :frame-src="monitorSiteOperationUrl" @message="handleMessage" />
      <SiteForm class="absolute w-full bg-#0960bd44 p-10px top-0" :site="selectedSite" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import SiteTree from './components/siteTree.vue';
  import SiteFilter from './components/siteFilter.vue';
  import SiteForm from './components/siteForm.vue';
  import { onMounted, ref } from 'vue';
  import {
    MonitorSiteTreeParams,
    MonitorSiteTreeNode,
    MonitorSite,
  } from '@/api/sys/model/monitorModel';
  import {
    getMonitorSiteTree,
    postMonitorOperation,
    monitorSiteOperationUrl,
    handleMonitorOperation,
  } from '@/api/sys/monitor';
  import IFrame from '@/views/sys/iframe/index.vue';

  // 测点树相关，包含了刷新、请求的内容
  const treeData = ref<MonitorSiteTreeNode>();
  function refreshTree(params: MonitorSiteTreeParams) {
    getMonitorSiteTree(params).then((r) => {
      if (r.code === 200) treeData.value = r.data;
    });
  }

  // 选中的测点
  const selectedSite = ref<MonitorSite>();

  // 测点操作（iframe）相关，包括下发指令及处理消息

  // 聚焦到测点上
  function focusOnSite(site: MonitorSite) {
    selectedSite.value = site;
    postMonitorOperation({
      clickType: 'treePoint',
      id: site.mineCode,
      data: {},
      type: 'treeSensor',
      from: 'tank',
    });
  }
  function handleMessage(msg: any) {
    handleMonitorOperation(msg, (d) => {
      console.log(d);
    });
  }

  onMounted(() => {
    refreshTree({});
  });

  defineExpose({
    treeData,
    monitorSiteOperationUrl,
    selectedSite,
    refreshTree,
    focusOnSite,
  });
</script>
<style scoped>
  .monitor-site {
    width: 100%;
    height: 100vh;
    margin-top: 60px;
  }
</style>