xzlz_GjWeb/src/views/home/components/beonDuty.vue

<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 }}
          </div>
          <el-divider border-style="dashed" class="dashed" />
          <div class="flex" @click="sendCommand(item)">
            <div class="warning-image">
              <!-- <img :src="item.yjTp" alt="预警图片" /> -->
              <template v-if="!item.yjTp || item.yjTp.includes('baidu')">
                <img src="@/assets/images/car.png" width="65" height="70" v-if="item.yjLx == 2" />
                <img src="@/assets/images/default_male.png" width="65" height="70" v-else />
              </template>
              <el-image v-else :preview-teleported="true" style="width: 80px; height: 110px" :src="item.yjTp"
                :preview-src-list="[item.yjTp]" show-progress>
                <template #error>
                  <div class="image-slot error">
                    <img src="@/assets/images/car.png" width="65" height="80" v-if="item.yjLx == 2" />
                    <img src="@/assets/images/default_male.png" width="80" height="110" v-else />
                  </div>
                </template>
              </el-image>
            </div>
            <div class="inform">
              <div class="flex align-center">
                <div class="inform_name">
                  姓名：<span>{{ item.yjRyxm }}</span>
                </div>
                <div class="inform_tag" v-if="item.yjlyBqmc">{{ 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>
  <FzDialog v-model="dialogVisible" :list="dataList"/>
</template>

<script setup>
import { reactive ,ref} from "vue";
import { tbGjYjgetPageList } from "@/api/mosty-zhgj.js";
import Empty from "@/components/Empty/index.vue";
import FzDialog from "../components/fqzl.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++;
  }
};
// 发送指令
const dialogVisible = ref(false);
const dataList=ref({})
const sendCommand = (item) => {
  dialogVisible.value = true;
  dataList.value=item
}
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>