|
|
@@ -1,11 +1,234 @@
|
|
|
<template>
|
|
|
- <div></div>
|
|
|
+ <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="选择开始日期时间"
|
|
|
+ default-time="00:00:00"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="interfaceLog_head_time_end">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeEnd"
|
|
|
+ size="default"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择结束日期时间"
|
|
|
+ default-time="00:00:00"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="interfaceLog_head_btn">
|
|
|
+ <Search
|
|
|
+ @getSearchData="getSearchData"
|
|
|
+ :isTitle="false"
|
|
|
+ @clearSearchData="clearSearchData"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="interfaceLog_content">
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <el-col :span="19">
|
|
|
+ <div class="app-containers">
|
|
|
+ <DataTable
|
|
|
+ :tableHeader="state.list"
|
|
|
+ :tableData="tableData"
|
|
|
+ :tableProperty="{ rowKey: 'ID' }"
|
|
|
+ />
|
|
|
+ </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">
|
|
|
+ <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>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-<script lang="ts">
|
|
|
-import { defineComponent } from "vue";
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- setup() {},
|
|
|
+<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: "测试",
|
|
|
+ },
|
|
|
+]);
|
|
|
+//表头
|
|
|
+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);
|
|
|
+}
|
|
|
+preDatas.value.splice(5, 10);
|
|
|
</script>
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.interfaceLog {
|
|
|
+ padding: 8px 32px 12px 8px;
|
|
|
+ .mr10 {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ ::v-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 {
|
|
|
+ ::v-deep .btn {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .interfaceLog_content {
|
|
|
+ margin-top: 8px;
|
|
|
+ ::v-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;
|
|
|
+ ::v-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: #2d67e3;
|
|
|
+ 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%;
|
|
|
+}
|
|
|
+::v-deep.el-timeline .list_status {
|
|
|
+ background: #ac014d !important;
|
|
|
+}
|
|
|
+</style>
|
