日志

src/views/systemSettings/log/index.vue

@@ -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>