工作面来压与瓦斯涌出分析

src/views/vent/monitorManager/footageMonitor/indexDhz.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="footage-box">
+    <customHeader
+      :fieldNames="{ label: 'label', value: 'value', options: 'children' }"
+      :options="options"
+      @change="getSelectRow"
+      :optionValue="optionValue"
+      >工作面来压与瓦斯涌出分析</customHeader
+    >
+    <div class="box-container">
+      <ModuleCommon :optionValue="optionValue" />
+    </div>
+    <!-- 巷道模型组件 -->
+    <VentModal />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, provide, onBeforeUnmount } from 'vue';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import ModuleCommon from './components/moduleCommon.vue';
+  import { list } from './footage.api';
+  import { useRouter, useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { unmountMicroApps } from '/@/qiankun';
+
+  let options = ref<any[]>([]);
+  let optionValue = ref('');
+  let router = useRouter(); //路由
+  const currentRoute = useRoute();
+
+  async function getSysDataSource() {
+    let res = await list({ devicekind: 'footageGas' });
+    options.value =
+      res.records.map((el) => {
+        return {
+          label: el.strname,
+          value: el.id,
+        };
+      }) || [];
+    if (!optionValue.value) {
+      optionValue.value = options.value[0]['value'];
+      nextTick(() => {
+        getSelectRow(optionValue.value);
+      });
+    }
+  }
+
+  // 切换检测数据
+  async function getSelectRow(deviceID) {
+    console.log(deviceID, '选项切换');
+    optionValue.value = deviceID;
+    router.push(`${currentRoute.path}?deviceType=default&sysID=${optionValue.value}`);
+  }
+
+  onMounted(async () => {
+    await getSysDataSource();
+  });
+  onBeforeUnmount(() => {
+    unmountMicroApps(['/micro-vent-3dModal']);
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @ventSpace: zxm;
+
+  .footage-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .box-container {
+      margin-top: 80px;
+      height: calc(100% - 80px);
+    }
+  }
+</style>