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

<template>
  <div class="mian_box">
    <div class="item" v-for="item in dataList" :key="item">
      <img :src="item.img" alt="" class="item-img" />
      <div class="item-content">
        <div class="item-title">{{ item.zdmc }}</div>
        <div @click="openDialog(item.dm)" class="item-num">{{ item.num }}</div>
      </div>
    </div>
  </div>
  <pointList v-model="pointListShow" :lxType="lxType" />
</template>
<script setup>
import pointList from "./pointList.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { divide } from "lodash";
import { ref, onMounted, reactive } from "vue";
const lxType = ref();
const pointListShow = ref(false);
const dataList = ref([])
const openDialog = (val) => {
  if (val == '1') {
    lxType.value = 'jcz';
  } else {
    lxType.value = 'kk';
  }
  pointListShow.value = true;
};
onMounted(() => {
  getTotal()
})

const dataContent = [
  {
    key: '临时交通卡点',
    img: require('@/assets/images/lsjt.png'),
  },
  {
    key: '智能抓拍',
    img: require('@/assets/images/znzp.png'),
  },
  {
    key: '公安检查站',
    img: require('@/assets/images/jc.png'),
  }, {
    key: '临时治安卡点',
    img: require('@/assets/images/lsza.png'),
  },
]


const getTotal = () => {
  qcckGet({}, "/mosty-jcz/jcztj/jczZqlxtj").then(res => {
    dataList.value = res.map(item => {
      const content = dataContent.findIndex(items => items.key == item.zdmc)
      return {
        ...item,
        img: dataContent[content].img
      }
    });
    console.log(dataList.value);

  })
}
</script>
<style lang="scss" scoped>
.mian_box {
  display: flex;
  justify-content: space-around;
  font-size: 24px;
  color: #fff;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
width: 90%;
margin: auto;
  .item {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 50%;
  }

  .item-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .item-content {
    flex: 1;
  }

  .item-title {
    text-align: center;
    font-size: 14px;
  }

  .item-num {
    text-align: center;
    color: #00f0ff;
    cursor: pointer;
  }
}
</style>