sgxt_web/src/views/home/model/yszs.vue

<template>
  <div class="ww100 h80 flex just-between align-center pl10 pr10">
    <div class="flex align-center" v-for="(item, idx) in contentItem" :key="idx">
        <div class="mr10"><img :src="item.icon" alt=""></div>
        <div class="vountItem">
            <div style="color:#ffffff" class="f16 lh20">{{ item.label }}</div>
            <div class="mt4 f12" style="color: #ffffff;">{{ item.value }}</div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { qcckPost } from "@/api/qcckApi.js";
import { ref, onMounted } from "vue";
const contentItem = ref([
  { type:"xs", label: "线索总数", value: "0" ,icon:require('@/assets/images/top-1.png')},
  { type:"xscz", label: "已处置线索总数", value: "0",icon:require('@/assets/images/top-2.png') },
  { type:"zdry", label: "重点人总数", value: "0",icon:require('@/assets/images/top-3.png') },
  { type:"zdqt", label: "重点群体总数", value: "0" ,icon:require('@/assets/images/top-4.png')},
]);

onMounted(() => {
  getCount()
});

const getCount = () =>{
  qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForZs').then(res=>{
    for(let key in res){
      let index = contentItem.value.findIndex(v=>key == v.type)
      if(index != -1) contentItem.value[index].value = res[key];
    }
  })
}

</script>

<style lang="scss" scoped>
.vountItem{
    width: 128px;
    height: 50px;
    background: url('~@/assets/images/line.png') no-repeat bottom center;
}
</style>