feat: 封装日志组件，可见光转红外日志显示

src/api/modules/demo/toInfrared.ts

@@ -84,3 +84,7 @@ export const stopToInfraredApi = (id: string | number) => {
 export const dowloadToInfraredApi = (id: string | number): Promise<any> => {
   return http.downloadGet('/demo/toInfrared/zip/' + id)
 }
+
+export const getLogToInfraredApi = (id: string | number) => {
+  return http.get('/demo/toInfrared/log/' + id, {}, { loading: false })
+}

src/views/demo/components/ViewLog.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-dialog v-model="logVisible" title="日志" width="900" :before-close="handleClose">
+    <el-scrollbar height="500px">
+      <div style="display: flex; line-height: 2" v-html="log"></div>
+    </el-scrollbar>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ViewLog'
+}
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  getLogApi: {
+    type: Function,
+    default: () => {}
+  }
+})
+
+const logId = ref('')
+const log = ref('')
+const logVisible = ref(false)
+const logRefreshTime = ref(1000)
+const intervalLog = ref()
+const getLog = async () => {
+  const result: any = await props.getLogApi(logId.value)
+  if (result.code == 200) {
+    log.value = result.data
+  } else {
+    ElMessage.error('获取日志失败！')
+    clearInterval(intervalLog.value)
+  }
+}
+const handleOpen = id => {
+  logId.value = id
+  logVisible.value = true
+
+  getLog()
+  intervalLog.value = setInterval(() => {
+    getLog()
+  }, logRefreshTime.value)
+}
+const handleClose = () => {
+  logVisible.value = false
+  if (intervalLog.value) {
+    clearInterval(intervalLog.value)
+  }
+}
+
+defineExpose({
+  handleOpen: handleOpen
+})
+</script>
+
+<style scoped></style>

src/views/demo/toInfrared/index.vue

@@ -59,6 +59,16 @@
         >
           下载
         </el-button>
+        <el-button
+          type="primary"
+          link
+          icon="View"
+          v-auth="['demo:toInfrared:query']"
+          @click="viewLogRef.handleOpen(scope.row.id)"
+          v-if="scope.row.status != '0'"
+        >
+          日志
+        </el-button>
         <!-- <el-button type="primary" link icon="View" v-auth="['demo:toInfrared:query']" @click="openDialog(3, '查看', scope.row)"> 查看 </el-button> -->
         <!-- <el-button type="primary" link icon="EditPen"v-auth="['demo:toInfrared:edit']" @click="openDialog(2, '编辑', scope.row)"> 编辑 </el-button> -->
         <el-button
@@ -76,6 +86,7 @@
     <FormDialog ref="formDialogRef" />
     <ImportExcel ref="dialogRef" />
     <PreviewImages :visible="dialogVisible" :urls="imageUrls" @close="dialogVisible = false" />
+    <ViewLog ref="viewLogRef" :get-log-api="getLogToInfraredApi" />
   </div>
 </template>
 
@@ -99,7 +110,8 @@ import {
   startToInfraredApi,
   stopToInfraredApi,
   dowloadToInfraredApi,
-  getToInfraredApi
+  getToInfraredApi,
+  getLogToInfraredApi
 } from '@/api/modules/demo/toInfrared'
 
 import { getImagesApi, listDataSeqApi } from '@/api/modules/demo/DataSeq'
@@ -112,6 +124,10 @@ import { AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSyst
 import PreviewImages from '@/views/demo/components/PreviewImages.vue'
 import { Row } from 'element-plus/es/components/table-v2/src/components'
 
+import ViewLog from '@/views/demo/components/ViewLog.vue'
+
+const viewLogRef = ref()
+
 const dialogVisible = ref(false)
 const imageUrls = ref([])
 const preview = async row => {
@@ -120,7 +136,6 @@ const preview = async row => {
   imageUrls.value = data.data
   dialogVisible.value = true
 }
-
 const openModelDialog = async row => {
   const algorithmModelId = row.algorithmModelId
   const result: any = await getAlgorithmModelTrackApi(algorithmModelId)