SZYGM1.0/src/views/systemSettings/log/index.vue

<template>
  <div class="interfaceLog">
    <div class="interfaceLog_head flex">
      <div class="interfaceLog_head_time flex-wrap">
        <div class="interfaceLog_head_time_start mr10">
          <el-date-picker v-model="timeStart" size="default" type="datetime" placeholder="选择开始日期时间" 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 mr10">
          <el-date-picker v-model="timeEnd" size="default" type="datetime" placeholder="选择结束日期时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :clearable="false" @change="timeSelectHandler" />
        </div>
        <div class="interfaceLog_head_select mr10">
          <el-select v-model="selMsg" size="medium" @change="timeSelectHandler" placeholder="请选择">
            <el-option v-for="item in selOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-if="selMsg == '系统'" class="interfaceLog_head_result">
          <el-select v-model="resMsg" size="medium" @change="timeSelectHandler" placeholder="请选择">
            <el-option v-for="item in resOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="interfaceLog_head_btn">
        <Search v-permission="['log_management_search_button']" :is-title="false" @get-search-data="getSearchData" @clear-search-data="clearSearchData" />
      </div>
    </div>
    <div class="interfaceLog_content">
      <el-row :gutter="24">
        <el-col :span="24">
          <div class="app-containers">
            <DataTable class="table" highlight-current-row :data="tableData" height="calc(100vh - 180px)" :columns="tableColumns" />
          </div>
        </el-col>
        <el-col v-if="false" :span="5">
          <div class="interfaceLog_content_progress">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in progressList" :key="index">
                <div class="list">
                  <div class="list_status"></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>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import DataTable from "@/components/SimpleTable/index.vue";
import { ElMessage } from "element-plus";
import { Query } from "@/api/webApi";
import { CommonTableColumn } from "~/common";
import { ellipsisCell } from "./customRender";

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 tableColumns = ref<CommonTableColumn[]>([]);
//列表
const tableData = ref<any[]>([]);
const resetTable = () => {
  page = 0;
  loading.value = false;
  noMore.value = false;
  tableData.value = [];
};
onMounted(() => {
  getToday();
  getTableData();
});
const getTableData = async () => {
  try {
    loading.value = true;
    const {
      code,
      returnData: { columnSet, listValues },
    } = await Query({
      id: DATACONTENT_ID.sysLogTable,
      // needPage: ++page,
      dataContent:
        selMsg.value == "系统"
          ? [timeStart.value, timeEnd.value, selMsg.value, resMsg.value]
          : [timeStart.value, timeEnd.value, selMsg.value],
    });
    if (Number(code) === 0) {
      // customRender: ellipsisCell,
      columnSet.map((item) => {
        if (item.columnName == "success") item.customRender = ellipsisCell;
      });
      tableColumns.value = [...columnSet];
      if (listValues.length === 0) {
        page--;
        noMore.value = true;
      }
      // tableData.value.push(...listValues);
      tableData.value = [...listValues];
      loading.value = false;
    } else {
      throw new Error("获取数据失败");
    }
  } catch (error: any) {
    page--;
    loading.value = false;
    ElMessage.error(error.message);
  }
};
const load = () => {
  if (loadDisabled.value) {
    return;
  }
  getTableData();
};

const timeStart = ref("");
const timeEnd = ref("");
const selMsg = ref("系统");
const resMsg = ref("错误");
const selOptions = ref([
  {
    value: "系统",
    label: "系统",
  },
  {
    value: "用户",
    label: "用户",
  },
]);
const resOptions = ref([
  {
    value: "成功",
    label: "成功",
  },
  {
    value: "错误",
    label: "错误",
  },
]);
const getToday = () => {
  function numberFormat(number) {
    const string = "0" + number;
    return string.slice(-2);
  }
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const date = now.getDate();
  const today = `${year}-${numberFormat(month)}-${numberFormat(date)}`;
  timeStart.value = `${today} 00:00:00`;
  timeEnd.value = `${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[]>([]);
// 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);
  }
};
</script>
<style lang="scss" scoped>
.interfaceLog {
  padding: 8px 32px 12px 8px;
  .mr10 {
    margin-right: 10px;
  }
  :deep .interfaceLog_head_time {
    .el-input__prefix {
      left: 10px;
      color: #101116;
      top: 10px;
    }
    // .el-input--prefix .el-input__inner {
    //   padding-left: 50px;
    // }
  }
  .interfaceLog_head_btn {
    :deep .el-button {
      margin-right: 0;
    }
  }
  .interfaceLog_content {
    margin-top: 8px;
    :deep .table {
      color: #101116;
      thead {
        color: #101116;
      }
      .success {
        color: #33bf47;
      }
      .error {
        color: #df4545;
      }
    }
    &_progress {
      // width: 368px;
      background: #fafcff;
      margin-left: 8px;
      padding: 13px 32px;
      overflow: hidden;
      :deep .el-timeline {
        padding: 0;
        .el-timeline-item {
          position: relative;
          &::after {
            position: absolute;
            content: "";
            height: 1px;
            width: calc(100% + 4px);
            background-color: #dfe3ea;
            left: 28px;
            bottom: 20px;
          }
          &:last-child {
            &::after {
              height: 0;
            }
          }
        }
        .el-timeline-item__node--normal {
          z-index: 2;
          background-color: #fff;
          width: 10px;
          height: 10px;
          left: 0px;
          top: 2px;
        }
        .el-timeline-item__tail {
          border-left: 4px solid #dfe3ea;
          left: 3px;
        }
        .el-timeline-item:last-child .el-timeline-item__tail {
          height: 1000%;
          display: block;
        }
        .list {
          &_status {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ac014d;
            left: -5px;
            border-radius: 50%;
            z-index: 1;
          }
          &_title,
          &_code {
            margin-bottom: 7px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #101116;
          }
          &_time {
            font-size: 12px;
            font-family: Helvetica;
            font-weight: 400;
            color: #afb4bf;
          }
        }
      }
    }
  }
}
.interfaceLog_content_progress {
  height: 100%;
}
// :deep.el-timeline .list_status {
//   background: #ac014d !important;
// }
</style>