修复视频文件报错

src/components/monitoring_data/index.vue

@@ -14,7 +14,12 @@
         @submit.prevent="fnResetPagination"
       >
         <el-row>
-          <el-col :span="8">
+          <el-col :span="6">
+            <el-form-item label="监测节点名称" prop="KEYWORDS">
+              <el-input v-model="searchForm.KEYWORDS" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
             <el-form-item label="开始时间" prop="START_TIME">
               <el-date-picker
                 v-model="searchForm.START_TIME"
@@ -24,8 +29,8 @@
               />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
-            <el-form-item label="结束时间" prop="START_TIME">
+          <el-col :span="6">
+            <el-form-item label="结束时间" prop="END_TIME">
               <el-date-picker
                 v-model="searchForm.END_TIME"
                 format="YYYY-MM-DD HH:mm:ss"
@@ -34,7 +39,7 @@
               />
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="6">
             <el-form-item label-width="10px">
               <el-button type="primary" native-type="submit">搜索</el-button>
               <el-button native-type="reset" @click="fnResetPagination">
@@ -62,8 +67,7 @@
             {{ row.CURRENT_VALUE }}
           </template>
         </el-table-column>
-        <el-table-column prop="TARGET_UNIT" label="单位" />
-        <el-table-column prop="GATHER_TIME" label="采集时间(每5秒采集一次)" />
+        <el-table-column prop="PROCESSING_BATCH_ID" label="取值时间批次" />
       </layout-table>
     </layout-card>
     <template #footer>

src/components/video/index.vue

@@ -1,55 +1,82 @@
 <template>
   <el-dialog v-model="visible" title="视频" :append-to-body="appendToBody">
-    <!-- 原生video标签，支持大部分基础格式（如MP4） -->
-    <video controls :src="fnSrc(src)" autoplay></video>
+    <ali-player
+      ref="playerRef"
+      :source="fnSrc(src)"
+      :vid="vid"
+      :play-auth="playAuth"
+      :visible="visible"
+      :cover="cover"
+      :autoplay="autoplay"
+      :show-progress="showProgress"
+      :play-time="playTime"
+    />
   </el-dialog>
 </template>
 
 <script setup>
 import { useVModel } from "@vueuse/core";
-import { watchEffect } from "vue";
-
-// 更安全的环境变量访问方式
-const getEnvVar = (name) => {
-  try {
-    // 优先尝试 Vite 的环境变量
-    if (typeof import !== 'undefined' && import.meta && import.meta.env) {
-      return import.meta.env[name];
-    }
-    // 回退到 process.env
-    if (typeof process !== 'undefined' && process.env) {
-      return process.env[name];
-    }
-    return "";
-  } catch (error) {
-    console.warn(`获取环境变量 ${name} 时出错:`, error);
-    return "";
-  }
-};
-
-const VITE_FILE_URL = getEnvVar('VITE_FILE_URL') || "";
+import AliPlayer from "@/components/ali-player/index.vue";
+import { ref, watchEffect } from "vue";
 
+const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
+defineOptions({
+  name: "LayoutVideo",
+});
 const props = defineProps({
-  src: { type: String, default: "" },
-  visible: { type: Boolean, required: true, default: false },
-  appendToBody: { type: Boolean, default: false },
-  autoplay: { type: Boolean, default: true },
+  src: {
+    type: String,
+    default: "",
+  },
+  vid: {
+    type: String,
+    default: "",
+  },
+  playAuth: {
+    type: String,
+    default: "",
+  },
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  appendToBody: {
+    type: Boolean,
+    default: false,
+  },
+  cover: {
+    type: String,
+    default: "",
+  },
+  autoplay: {
+    type: Boolean,
+    default: true,
+  },
+  showProgress: {
+    type: Boolean,
+    default: true,
+  },
+  playTime: {
+    type: Number,
+    default: 0,
+  },
 });
 const emits = defineEmits(["update:visible"]);
 const visible = useVModel(props, "visible", emits);
-
+const playerRef = ref(null);
 const fnSrc = (src) => {
   if (!src) return;
-  if (src.includes("http") || src.includes("https")) return src;
-  return VITE_FILE_URL + src;
+  if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
+  else return VITE_FILE_URL + src;
 };
-
 watchEffect(() => {
-  const video = document.querySelector("video");
-  if (visible.value && video) {
-    video.play().catch((err) => console.error("自动播放失败:", err));
-  } else if (video) {
-    video.pause();
+  if (visible.value) {
+    playerRef.value && playerRef.value.play();
+  } else {
+    playerRef.value && playerRef.value.pause();
   }
 });
 </script>
+
+<style scoped lang="scss"></style>