添加日志功能

src/views/pqs/business/terminal/TerminalManagement/components/log.vue

@@ -0,0 +1,95 @@
+<template>
+    <el-dialog draggable v-model="dialogVisible" v-if="dialogVisible" :title="title" width="1000px" @close="emit('close')">
+     <div class="mb10 flex ">
+        <DatePicker ref="datePickerRef" ></DatePicker>
+        <el-button type="primary" icon="el-icon-Search" @click="source">查询</el-button>
+     </div>
+       <div v-loading="loading">
+        <vxe-table v-bind="defaultAttribute" height="400" :data="tableData">
+            <vxe-column field="logsType" title="日志类型" width="150">
+                <template #default="{ row }">
+                    {{ fontdveoption.find((item: any) => item.id == row.logsType)?.name }}
+                </template>
+            </vxe-column>
+            <vxe-column field="createBy" title="更改人员" width="150"></vxe-column>
+            <vxe-column field="updateTime" title="更改时间" width="150"></vxe-column>
+            <vxe-column field="terminalDescribe" title="描述"></vxe-column>
+        </vxe-table>
+        <el-pagination
+            class="mt10"
+            :currentPage="form.pageNum"
+            :page-size="form.pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            background
+            :layout="'sizes,total, ->, prev, pager, next, jumper'"
+            :total="total"
+            @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"
+        ></el-pagination>
+       </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getList } from '@/api/device-boot/Business'
+import { useDictData } from '@/stores/dictData'
+import DatePicker from '@/components/form/datePicker/index.vue'
+const emit = defineEmits(['close'])
+const title = ref('')
+const total = ref(0)
+const datePickerRef = ref()
+const dialogVisible = ref(false)
+const tableData = ref([])
+const dictData = useDictData()
+const fontdveoption = dictData.getBasicData('Dev_Ops')
+const form = reactive({
+    id: '',
+    pageNum: 1,
+    pageSize: 10
+})
+const loading = ref(false)
+const open = (e: any) => {
+    title.value = e.name + '_日志'
+    form.id = e.id
+
+    dialogVisible.value = true
+    setTimeout(() => {
+        source()
+    }, 500)
+}
+const source = () => {
+    loading.value = true
+    getList({
+        ...form,
+        searchBeginTime: datePickerRef.value.timeValue[0],
+        searchEndTime: datePickerRef.value.timeValue[1]
+    }).then(res => {
+        total.value = res.data.total
+        tableData.value = res.data.records
+        loading.value = false
+    })
+}
+// 分页
+const onTableSizeChange = (val: number) => {
+    form.pageSize = val
+    source()
+}
+
+const onTableCurrentChange = (val: number) => {
+    form.pageNum = val
+    source()
+}
+
+const cancel = () => {
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.flex{
+    display: flex;
+    justify-content: space-between;
+}
+</style>

src/views/pqs/business/terminal/TerminalManagement/index.vue

@@ -82,10 +82,13 @@
                     min-width="200"
                     tree-node
                 ></vxe-column>
-                <vxe-column field="devType" title="终端型号"></vxe-column>
+                <vxe-column field="devType" title="终端型号">
+                    <template #default="{ row }">
+                        {{ teriminaloption.find((item: any) => item.id === row.devType)?.name }}
+                    </template>
+                </vxe-column>
                 <vxe-column field="version" title="版本信息"></vxe-column>
                 <vxe-column field="ip" title="网络参数"></vxe-column>
-                <vxe-column field="devType" title="终端型号"></vxe-column>
                 <vxe-column field="baseFlowMeal" title="基础套餐(MB)"></vxe-column>
                 <vxe-column field="reamFlowMeal" title="扩展套餐(MB)"></vxe-column>
                 <vxe-column title="剩余流量(MB)">
@@ -122,29 +125,24 @@
                     </template>
                 </vxe-column>
 
-                <!-- <vxe-column title="操作" width="160">
+                <vxe-column title="操作" width="160">
                     <template #default="{ row }">
-                        <el-button v-if="row.level === 4" type="primary" size="small" link @click="uesdealia(row)">
+                        <!-- <el-button v-if="row.level === 4" type="primary" size="small" link @click="uesdealia(row)">
                             终端详情
-                        </el-button>
-                        <el-button
-                            v-if="row.level === 4"
-                            :disabled="row.state == 1 ? true : false"
-                            type="primary"
-                            size="small"
-                            link
-                            @click="queryview(row)"
-                        >
-                            流量详情
+                        </el-button> -->
+                        <el-button v-if="row.level === 4" type="primary" size="small" link @click="log(row)">
+                            查看日志
                         </el-button>
                     </template>
-                </vxe-column> -->
+                </vxe-column>
             </vxe-table>
         </div>
         <!-- 终端详情 -->
         <detail ref="detailRef" />
         <!-- 配置 -->
         <disposition ref="dispositionRef" @onSubmit="tableStore.index()" />
+        <!-- 日志 -->
+        <Log ref="logRef" v-if="logFlag" @close="logFlag = false" />
     </div>
 </template>
 <script setup lang="ts">
@@ -156,8 +154,10 @@ import { ElMessage } from 'element-plus'
 import { getDevTypeList } from '@/api/device-boot/modelManage'
 import XEUtils from 'xe-utils'
 import { debounce } from 'lodash-es'
+
 import disposition from './components/disposition.vue'
 import detail from './components/detail.vue'
+import Log from './components/log.vue'
 import { useDictData } from '@/stores/dictData'
 
 defineOptions({
@@ -165,8 +165,9 @@ defineOptions({
 })
 const dispositionRef = ref()
 const detailRef = ref()
+const logRef = ref()
 const dictData = useDictData()
-
+const logFlag = ref(false)
 const teriminaloption: any = ref([])
 
 const teriminalstatusoption = ref([
@@ -180,7 +181,6 @@ const stateoption = ref([
     { name: '正常', id: 1 },
     { name: '中断', id: 0 }
 ])
-
 const treeData: any = ref([])
 const treeDataCopy: any = ref([])
 
@@ -233,6 +233,7 @@ onMounted(() => {
     getDevTypeList().then(res => {
         teriminaloption.value = res.data
     })
+
     tableStore.index()
 })
 
@@ -269,7 +270,12 @@ const uesdealia = (row: any) => {
     detailRef.value.open(row)
 }
 // 流量详情
-const queryview = (row: any) => {}
+const log = (row: any) => {
+    logFlag.value = true
+    setTimeout(() => {
+        logRef.value.open(row)
+    }, 100)
+}
 
 // 表格过滤
 const searchEvent = debounce(() => {