xzlz_JczWeb/src/views/home/components/CarWarning.vue

<template>
  <div
    class="waning-cards noScollLine"
    v-infinite-scroll="rollingLoading"
    v-loading="loading"
  >
    <div
      class="warning-card"
      v-for="(item, index) in warningList.data"
      :key="index"
         @click="plotThetrajectory(item.yjRysfzh)"
    >
      <div class="warning-image">
        <img :src="item.yjTp" alt="预警图片" v-if="item.yjTp&&!item.yjTp.includes('baidu')" />
          <img src="@/assets/images/car.png" alt="预警图片" v-else/>
      </div>
      <div class="warning-info">
        <div class="info-item">
          <span class="label">车牌号：</span>
          <span>{{ item.yjClcph }}</span>
          <span class="tag">{{ item.yjbqmc }}</span>
        </div>
        <div class="info-item">
          <span class="label">相似度：</span>
          <span class="highlight">{{ item.xsd }}%</span>
        </div>
        <div class="info-item">
          <span class="label">预警时间：</span>
          <span>{{ item.yjSj }}</span>
        </div>
        <div class="info-item flex align-center">
          <span class="label nowrap">抓拍地址：</span>
          <span class="one_text_detail">{{ item.yjDz }}</span>
        </div>
      </div>
    </div>
    <Empty :show="warningList.data.length == 0" :imgSize="100" />
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from "vue";
import { jczgetPageList,tbYjxxGsgj } from "@/api/mosty-jcz.js";
import Empty from "@/components/MyComponents/Empty/index.vue";
import emitter from "@/utils/eventBus.js";
const props = defineProps({
  jczId: {
    type: String,
    default: ""
  }
});
const warningList = reactive({
  data: [],
  total: 0
});
const loading = ref(false);
const linkQuery = ref({
  yjLx: 2,
  pageNum: 1,
  pageSize: 10,
  jczid: props.jczId
});
// 获取预警数据
const getPageList = () => {
  loading.value = true;
  jczgetPageList(linkQuery.value)
    .then((res) => {
      warningList.data =
        linkQuery.value.pageNum == 1
          ? res.records
          : warningList.data.concat(res.records);
      warningList.total = res.total;
    })
    .catch((err) => {
      console.log("预警数据请求错误", err);
    })
    .finally(() => {
      loading.value = false;
    });
};
//滚动
const rollingLoading = () => {
  if (warningList.data.length < warningList.total) {
    linkQuery.value.pageNum++;
    getPageList();
  }
};
// 轨迹上图
const plotThetrajectory = (val) => {

  tbYjxxGsgj({
    startTime: null,
    endTime: null,
    yjRysfzh: val
  }).then(res => {
    console.log(res);
    if (res && res[0].list.length > 0) {
      let coords = res[0].list.map(item => {
        return [item.jd, item.wd]
      })
      // const coords = [
      //   [
      //     94.3695802486277983689433312974870204925537109375,
      //     29.659805088901098457654370577074587345123291015625
      //   ],
      //   [
      //     94.369054723455093380835023708641529083251953125,
      //     29.66032233866609857386720250360667705535888671875
      //   ],
      //   [
      //     94.3684916577901020673380116932094097137451171875,
      //     29.660979382630298317735650925897061824798583984375
      //   ],
      //   [
      //     94.3683415069466065006054122932255268096923828125,
      //     29.660755708570601285600787377916276454925537109375
      //   ],
      //   [
      //     94.3675662718153063224235665984451770782470703125,
      //     29.659987675165101705943015986122190952301025390625
      //   ],
      //   [
      //     94.366890606904092919648974202573299407958984375,
      //     29.659353928438999759009675472043454647064208984375
      //   ],
      //   [
      //     94.3656729217579055557507672347128391265869140625,
      //     29.6582345740253998656044132076203823089599609375
      //   ],
      //   [
      //     94.3646650204280064144768402911722660064697265625,
      //     29.657336173164399184543071896769106388092041015625
      //   ],
      //   [
      //     94.364147680070203705327003262937068939208984375,
      //     29.6567231392728984928908175788819789886474609375
      //   ],
      //   [
      //     94.3636436022359958997185458429157733917236328125,
      //     29.65662527779360146951148635707795619964599609375
      //   ],
      //   [
      //     94.362367320062702447103220038115978240966796875,
      //     29.6567138191363000032652053050696849822998046875
      //   ],
      //   [
      //     94.3614396063849056872641085647046566009521484375,
      //     29.656713819753800720491199172101914882659912109375
      //   ],
      //   [
      //     94.3603242001151016893345513381063938140869140625,
      //     29.65673712009380125209645484574139118194580078125
      //   ],
      //   [
      //     94.358962121621999585840967483818531036376953125,
      //     29.65674177535930056137658539228141307830810546875
      //   ],
      //   [
      //     94.3576684689077040957272402010858058929443359375,
      //     29.65681167375640114869383978657424449920654296875
      //   ],
      //   [
      //     94.3564404495050013110812869854271411895751953125,
      //     29.65685827438640131958891288377344608306884765625
      //   ],
      //   [
      //     94.3547512464013067301493720151484012603759765625,
      //     29.656946809372101370172458700835704803466796875
      //   ]
      // ]
      emitter.emit('drawLineAnimation', {
        type: "solid",
        coords: coords,
        isclear: true,
        flag: "yjLine"
      })
    } else {
      ElMessage({ message: '暂无轨迹数据', type: 'warning' });
    }
  })
}
getPageList();
</script>

<style lang="scss" scoped>
.waning-cards {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.warning-card {
  background: url("~@/assets/images/bg_10.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 4px;
  padding: 4px 4px 4px 10px;
  box-sizing: border-box;
}

.warning-image {
  width: 60px;
  height: 80px;

  img {
    width: 100%;
    height: 100%;
  }
}

.warning-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.warning-info {
  flex: 1;
}

.info-item {
  margin-bottom: 4px;
  color: #fff;
  font-size: 14px;
}

.label {
  color: rgba(255, 255, 255, 0.7);
}

.highlight {
  color: #00f0ff;
}

.tag {
  background: rgba(250, 177, 21, 0.2);
  border-radius: 8px;
  border: 1px solid #ffac26;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 10px;
}
</style>