[Feat 0000]瓦斯钻孔实时监测开发

src/views/vent/gas/gasZk/gasZk.api.ts

@@ -0,0 +1,12 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getPlayTime = '/ventanaly-device/drill/get/play-time',
+  getZkStatus = '/ventanaly-device/drill/get/status',
+}
+/**
+ * 获取粉尘监测结果报表
+ * @param params
+ */
+export const getVideoPlayTime = () => defHttp.get({ url: Api.getPlayTime });
+export const getGasZkStatus = (params) => defHttp.get({ url: Api.getZkStatus, params });

src/views/vent/gas/gasZk/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="gasMonitor">
+    <customHeader>瓦斯钻孔实时监测</customHeader>
+    <div class="content">
+      <div class="left-box">
+        <div class="video">
+          <video controls autoplay muted loop fluent style="height: 100%; width: 100%; padding: 30px 20px">
+            <source src="/sys/common/static/output_video.mp4" />
+          </video>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="count">
+          <div class="icon"></div>
+          <div class="count-content">
+            <span class="conten">{{ usedCount }}</span>
+            <span>钻孔计数</span>
+          </div>
+        </div>
+        <div class="status">
+          <div class="icon"></div>
+          <div class="status-content">
+            <span class="conten">{{ curStatus }}</span>
+            <span>钻杆状态</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { getVideoPlayTime, getGasZkStatus } from './gasZk.api';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { useGlobSetting } from '/@/hooks/setting';
+const globSetting = useGlobSetting();
+const baseApiUrl = globSetting.domainUrl;
+const videoPlayTime = ref(0); //视频开始播放时间
+const curStatus = ref(''); //当前状态
+const usedCount = ref(''); //钻孔计数
+let timer: IntervalHandle; //定时器
+//时间轮询
+const startPolling = () => {
+  // 清除定时器
+  stopPolling();
+  // 设置新定时器
+  timer = setInterval(async () => {
+    try {
+      const res = await getGasZkStatus({
+        playTime: videoPlayTime.value,
+      });
+      // 更新数据
+      usedCount.value = res.usedCount;
+      curStatus.value = res.curStatus;
+      startPolling();
+    } catch (error) {
+      console.error('请求失败，停止轮询', error);
+      stopPolling();
+    }
+  }, 1000);
+};
+
+// 停止轮询 清除定时器
+const stopPolling = () => {
+  if (timer !== null) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+
+onMounted(async () => {
+  try {
+    videoPlayTime.value = await getVideoPlayTime();
+    // 第一次请求
+    const res = await getGasZkStatus({
+      playTime: videoPlayTime.value,
+    });
+    usedCount.value = res.usedCount;
+    curStatus.value = res.curStatus;
+    // 启动轮询
+    startPolling();
+  } catch (error) {
+    console.error('初始化失败', error);
+  }
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  stopPolling();
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gasMonitor {
+    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
+  }
+}
+
+.gasMonitor {
+  --image-border: url('/@/assets/images/fire/border.png');
+  position: relative;
+  width: calc(100% - 20px);
+  height: calc(100% - 90px);
+  position: relative;
+  margin: 30px 10px 10px 10px;
+
+  .content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left-box {
+      flex: 3;
+      height: 100%;
+      padding: 10px;
+      background: var(--image-border) no-repeat center;
+      background-size: 100% 100%;
+      .video {
+        height: 100%;
+      }
+    }
+    .right-box {
+      flex: 1;
+      margin-left: 30px;
+      height: 100%;
+      background: var(--image-border) no-repeat center;
+      background-size: 100% 100%;
+      .count {
+        margin: 30px;
+        height: 200px;
+        padding: 0 20px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        background-image: url('/@/assets/images/vent/gas/gasZkBorder.png');
+        background-size: 100% 100%;
+        .icon {
+          margin-bottom: 20px;
+          width: 35%;
+          height: 65%;
+          background-image: url('/@/assets/images/vent/gas/zkcount.png');
+          background-size: 100% 100%;
+          margin-left: 10px;
+        }
+        .count-content {
+          display: flex;
+          flex-direction: column;
+          font-size: 20px;
+          color: #fff;
+          margin-left: 25px;
+          .conten {
+            font-weight: bold;
+            margin-bottom: 20px;
+            color: #27fded;
+            font-style: italic;
+          }
+        }
+      }
+      .status {
+        margin: 30px;
+        padding: 0 20px;
+        height: 200px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        background-image: url('/@/assets/images/vent/gas/gasZkBorder.png');
+        background-size: 100% 100%;
+        .icon {
+          margin-bottom: 20px;
+          width: 35%;
+          height: 65%;
+          background-image: url('/@/assets/images/vent/gas/zgStatus.png');
+          background-size: 100% 100%;
+          margin-left: 10px;
+        }
+        .status-content {
+          display: flex;
+          flex-direction: column;
+          font-size: 20px;
+          color: #fff;
+          margin-left: 25px;
+          .conten {
+            margin-bottom: 20px;
+            font-weight: bold;
+            color: #27fded;
+            font-style: italic;
+          }
+        }
+      }
+    }
+  }
+}
+</style>