124

src/views/home/components/beonDuty.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="checkpoint-list noScollLine">
+    <el-timeline style="max-width: 375px">
+      <el-timeline-item
+        v-for="(item, index) in warningList.listData"
+        :key="index"
+        :timestamp="item.yjSj"
+        placement="top"
+        :hollow="true"
+        color="#061b44"
+      >
+        <div class="item_card">
+          <div style="line-height: 18px">
+            {{ item.yjNr }}
+            <!-- 2025年3月20日,早上10点时，重点人员张三购买林芝客运站前
+            往朗县客运站的车票。 -->
+          </div>
+          <el-divider border-style="dashed" class="dashed" />
+          <div class="flex">
+            <div class="warning-image">
+              <img :src="item.yjTp" alt="预警图片" />
+            </div>
+            <div class="inform">
+              <div class="flex align-center">
+                <div class="inform_name">
+                  姓名：<span>{{ item.yjRyxm }}</span>
+                </div>
+                <div class="inform_tag">{{ item.yjlyBqmc }}</div>
+              </div>
+
+              <div>身份证：{{ item.yjRysfzh }}</div>
+              <div>
+                购票时间：<span>{{ item.gpsj }}</span>
+              </div>
+              <div>购买路线：{{ item.gmlx }}</div>
+              <div>购买地点：{{ item.gmdd }}</div>
+            </div>
+          </div>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+    <Empty :show="warningList.listData.length == 0" />
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
+import Empty from "@/components/Empty/index.vue";
+const warningList = reactive({
+  listData: [],
+  total: 0
+});
+const linQuery = reactive({
+  pageCurrent: 1,
+  pageSize: 10
+});
+const gettbGjclselectPage = () => {
+  tbGjYjgetPageList(linQuery).then((res) => {
+    warningList.listData =
+      linQuery.pageCurrent == 1
+        ? res.records
+        : warningList.listDat.concat(res.records);
+    warningList.total = res.total;
+  });
+};
+const scroll = () => {
+  if (warningList.total > warningList.listData.length) {
+    gettbGjclselectPage();
+    linQuery.pageCurrent++;
+  }
+};
+gettbGjclselectPage();
+</script>
+
+<style scoped lang="scss">
+.checkpoint-list {
+  margin-top: 20px;
+  margin-left: 18px;
+  height: calc(100% - 40px);
+  overflow: hidden;
+  overflow-y: auto;
+  padding: 4px;
+  box-sizing: border-box;
+  .item_card {
+    font-size: 14px;
+    color: #fff;
+    padding: 18px 13px 8px 15px;
+    width: 359px;
+    height: 190px;
+    border-radius: 4px;
+    border: 1px solid #0468e1;
+    opacity: 0.86;
+    background: url("~@/assets/images/bi/jmk.png") no-repeat center center;
+    background-size: 100% 100%;
+    .dashed {
+      width: 100%;
+      border-top: 1px #0468e1 dashed;
+      margin: 10px 0px 9px;
+    }
+    .warning-image {
+      border: 1px solid #0468e1;
+      padding: 10px 10px 10px 14px;
+      width: 103px;
+      height: 99px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .inform {
+      box-sizing: border-box;
+      margin-left: 11px;
+      width: 215px;
+      font-family: "Source Han Sans CN";
+      font-weight: 400;
+      font-size: 14px;
+      color: #ffffff;
+      .inform_name {
+        width: 120px;
+      }
+      .inform_tag {
+        font-family: "Source Han Sans CN";
+        font-weight: 300;
+        font-size: 10px;
+        color: #f9411c;
+        border: 1px solid #f9411c;
+        padding: 0px 8px;
+        font-weight: 800;
+        border-radius: 8px;
+      }
+    }
+  }
+}
+
+::v-deep .el-timeline-item__node {
+  border-color: rgb(13, 216, 37);
+}
+::v-deep .el-timeline-item__tail {
+  border-left: 2px solid #06366d;
+}
+::v-deep .el-timeline-item__wrapper {
+  padding-left: 10px;
+}
+::v-deep .is-top {
+  margin-bottom: 12px;
+  padding-top: 2px;
+  font-size: 14px;
+  margin-left: 10px;
+  color: #fff;
+}
+</style>