日志管理修改

public/demo.js

@@ -50,6 +50,7 @@ const DATACONTENT_ID = {
   sysSourceId: 13, //系统设置-数据源-id
   sysProtoTabId: 1, //系统设置-协议管理-表格-id
   sysServiceTabId: 2, //系统设置-服务管理-表格-id
+  sysLogTable: 12, //系统设置-日志-表格
 };
 
 const SERVICE_ID = {

src/components/tableTemp/index.vue

@@ -35,7 +35,7 @@
       props.tableProperty.showSummary
         ? props.tableProperty.showSummary
         : tablePropertyDefault.showSummary
-    " :row-class-name="tableRowClassName" :cell-class-name="cellClassName" @cell-click="cellClickHandler">
+    " :row-class-name="tableRowClassName" :cell-class-name="cellClassName" @row-click="rowClickHandler" @cell-click="cellClickHandler">
     <el-table-column v-if="isStatus" width="55">
       <template #default="scope">
         <div class="tableStatus">
@@ -188,7 +188,7 @@ const childDatas = computed(() => (item: any) => {
 });
 
 //向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
-const emit = defineEmits(["btnClick", "load", "cellClass", "cellClick"]);
+const emit = defineEmits(["btnClick", "load", "cellClass", "rowClick", "cellClick"]);
 
 //按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
 const handleClick = (index: number, row: Object, param: number) => {
@@ -224,6 +224,10 @@ const load = () => {
   emit("load", true);
 };
 
+const rowClickHandler = (row, column, event) => {
+  emit('rowClick', row, column, event)
+}
+
 const cellClickHandler = (row, column, cell, event) => {
   emit('cellClick', row, column, cell, event)
 }

src/views/systemSettings/log/index.vue

@@ -8,9 +8,11 @@
             size="default"
             type="datetime"
             placeholder="选择开始日期时间"
-            default-time="00:00:00"
-          >
-          </el-date-picker>
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :clearable="false"
+            @change="timeSelectHandler"
+          />
         </div>
         <div class="interfaceLog_head_time_end">
           <el-date-picker
@@ -18,16 +20,18 @@
             size="default"
             type="datetime"
             placeholder="选择结束日期时间"
-            default-time="00:00:00"
-          >
-          </el-date-picker>
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :clearable="false"
+            @change="timeSelectHandler"
+          />
         </div>
       </div>
       <div class="interfaceLog_head_btn">
         <Search
-          @getSearchData="getSearchData"
-          :isTitle="false"
-          @clearSearchData="clearSearchData"
+          :is-title="false"
+          @get-search-data="getSearchData"
+          @clear-search-data="clearSearchData"
         />
       </div>
     </div>
@@ -36,21 +40,27 @@
         <el-col :span="19">
           <div class="app-containers">
             <DataTable
-              :tableHeader="state.list"
-              :tableData="tableData"
-              :tableProperty="{ rowKey: 'ID' }"
+              :table-header="tableColumns"
+              :table-data="tableData"
+              :table-property="{ rowKey: 'ID' }"
+              @load="load"
+              @row-click="rowClickHandler"
             />
           </div>
         </el-col>
         <el-col :span="5">
           <div class="interfaceLog_content_progress">
             <el-timeline>
-              <el-timeline-item v-for="(item, index) in preDatas" :key="index">
+              <el-timeline-item
+                v-for="(item, index) in progressList"
+                :key="index"
+              >
                 <div class="list">
                   <div class="list_status"></div>
-                  <div class="list_title">{{ item.title }}</div>
-                  <div class="list_code">{{ item.code }}</div>
-                  <div class="list_time">{{ item.time }}</div>
+                  <div class="list_title">{{ item.logType }}</div>
+                  <div class="list_code">{{ item.resultCode }}</div>
+                  <div class="list_time">{{ item.logTime }}</div>
+                  <!-- <div class="list_detial">{{ item.resultDetails }}</div> -->
                 </div>
               </el-timeline-item>
             </el-timeline>
@@ -61,64 +71,133 @@
   </div>
 </template>
 <script setup lang="ts">
-import DataTable from "@/components/tableTemp/index.vue";
-const timeStart = ref<String>("");
-const timeEnd = ref<String>("");
-const preDatas = ref<Array>([]);
-//列表
-const tableData = ref([
-  {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
-    three: "测试",
-  },
-  {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
-    three: "测试",
-  },
-  {
-    name: "测试",
-    china: "测试",
-    englin: "测试",
-    two: "测试",
-    three: "测试",
-  },
-]);
+import DataTable from '@/components/tableTemp/index.vue'
+import { ElMessage } from 'element-plus'
+import { Query } from '@/api/dataIntegration'
+
+type TableColumn = {
+  label: string
+  key: string
+}
+type progressItem = {
+  logType: string
+  resultCode: string
+  logTime: string
+  resultDetails?: string
+}
+
+const getSearchData = (text: string) => {
+  console.log(text)
+}
+const clearSearchData = () => {}
+
+let page = 0
+const loading = ref(false)
+const noMore = ref(false)
+const loadDisabled = computed(() => loading.value || noMore.value)
 //表头
-const state = reactive({
-  list: [
-    { label: "用户", key: "name" },
-    { label: "发生时间", key: "china" },
-    { label: "发生位置", key: "englin" },
-    { label: "成败代码", key: "two" },
-    { label: "成败详情", key: "three" },
-  ],
-  listLoading: true,
-});
-for (let i = 0; i < 10; i++) {
-  const element = {
-    action: "采集",
-    dataNumber: "000120220307201211011201",
-    sourceDataNumber: "BSM",
-    time: "2022-03-07 20:00:12",
-    result: i % 2 == 0 ? true : false,
-    details: "数据格式不正确",
-  };
-  const obj = {
-    title: "更新 Github 模板",
-    code: "989665554",
-    time: "2022-4-26 15:48:55",
-    id: i,
-  };
-  tableData.value.push(element);
-  preDatas.value.push(obj);
+const tableColumns = ref<TableColumn[]>([])
+//列表
+const tableData = ref<any>([])
+const resetTable = () => {
+  page = 0
+  loading.value = false
+  noMore.value = false
+  tableData.value = []
+}
+onMounted(() => {
+  getTableData()
+})
+const getTableData = async () => {
+  try {
+    loading.value = true
+    const {
+      code,
+      returnData: { columnSet, listValues },
+    } = await Query({
+      id: DATACONTENT_ID.sysLogTable,
+      needPage: ++page,
+      dataContent: [timeStart.value, timeEnd.value],
+    })
+    if (Number(code) === 0) {
+      tableColumns.value = columnSet.map(column => ({
+        label: column.columnLabel,
+        key: column.columnName,
+        ...column,
+      }))
+      if (listValues.length === 0) {
+        page--
+        noMore.value = true
+        return
+      }
+      tableData.push(...listValues)
+    } else {
+      page--
+      loading.value = false
+      throw new Error('获取数据失败')
+    }
+  } catch (error: any) {
+    page--
+    loading.value = false
+    ElMessage.error(error.message)
+  }
+}
+const load = () => {
+  if (loadDisabled.value) {
+    return
+  }
+  getTableData()
+}
+
+const getToday = () => {
+  const now = new Date()
+  const year = now.getFullYear()
+  const month = now.getMonth() + 1
+  const date = now.getDate()
+  return `${year}-${month}-${date}`
+}
+const today = getToday()
+const timeStart = ref(`${today} 00:00:00`)
+const timeEnd = ref(`${today} 23:59:59`)
+const timeSelectHandler = () => {
+  const startTime = new Date(timeStart.value).getTime()
+  const endTime = new Date(timeEnd.value).getTime()
+  if (startTime > endTime) {
+    ElMessage.error('开始时间不能大于结束时间')
+    timeEnd.value = ''
+    return
+  }
+  if (startTime < endTime - (3 * 24 * 60 * 60 - 1) * 1000) {
+    ElMessage.error('间隔时间不能大于三天')
+    timeEnd.value = ''
+    return
+  }
+  resetTable()
+  getTableData()
+}
+
+const progressList = ref<progressItem[]>([])
+onMounted(() => {
+  progressList.value.push(
+    ...Array.from({ length: 3 }).map(() => ({
+      logType: '更新 Github 模板',
+      resultCode: '989665554',
+      logTime: '2022-4-26 15:48:55',
+    }))
+  )
+})
+const rowClickHandler = (row, column, event) => {
+  progressList.value = []
+  if (row.logObject) {
+    tableData.value.forEach(record => {
+      if (record.logObject == row.logObject) {
+        progressList.value.push(record)
+      }
+    })
+  } else {
+    progressList.value.push(row)
+  }
 }
-preDatas.value.splice(5, 10);
 </script>
 <style lang="scss" scoped>
 .interfaceLog {
@@ -126,24 +205,24 @@ preDatas.value.splice(5, 10);
   .mr10 {
     margin-right: 10px;
   }
-  ::v-deep .interfaceLog_head_time {
+  :deep .interfaceLog_head_time {
     .el-input__prefix {
       left: 10px;
       color: #101116;
       top: 10px;
     }
-    .el-input--prefix .el-input__inner {
-      padding-left: 50px;
-    }
+    // .el-input--prefix .el-input__inner {
+    //   padding-left: 50px;
+    // }
   }
   .interfaceLog_head_btn {
-    ::v-deep .btn {
+    :deep .el-button {
       margin-right: 0;
     }
   }
   .interfaceLog_content {
     margin-top: 8px;
-    ::v-deep .table {
+    :deep .table {
       color: #101116;
       thead {
         color: #101116;
@@ -161,13 +240,13 @@ preDatas.value.splice(5, 10);
       margin-left: 8px;
       padding: 13px 32px;
       overflow: hidden;
-      ::v-deep .el-timeline {
+      :deep .el-timeline {
         padding: 0;
         .el-timeline-item {
           position: relative;
           &::after {
             position: absolute;
-            content: "";
+            content: '';
             height: 1px;
             width: calc(100% + 4px);
             background-color: #dfe3ea;
@@ -228,7 +307,7 @@ preDatas.value.splice(5, 10);
 .interfaceLog_content_progress {
   height: 100%;
 }
-// ::v-deep.el-timeline .list_status {
+// :deep.el-timeline .list_status {
 //   background: #ac014d !important;
 // }
 </style>