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 }} <span class="pointer" @click="openTc(item.type,'zs')" v-if="item.type == 'yjzs'">{{ item.value }}</span></div>
            <div v-if="!item.isChild" class="mt4 f12 pointer" style="color: #ffffff;font-size: 24px;" @click="openTc(item.type,'zs')" >{{ item.value }}</div>
            <div v-else class="mt4 flex align-center just-between" style="color: #ffffff;">
              <span class="f12" style="color: #ff0000;" @click="openTc(item.type,'wqs')">未签收:{{ item.wqsyj }}</span>
              <span class="f12" style="color: #4cf35d;" @click="openTc(item.type,'yfk')">已反馈:{{ item.yfkyj }}</span>
            </div>
        </div>
    </div>
  </div>
  <PoliceReports v-model="openJqzs"/>
  <NumberWarnings v-model="openYjzs" :type="yjType" />
  <keyPerson v-model="openZdry"/>
  <keyGroups v-model="openZdqt"/>
</template>

<script setup>
import { qcckPost } from "@/api/qcckApi.js";
import { ref, onMounted, reactive } from "vue";
import PoliceReports from '@/views/home/components/policeReports.vue'
import NumberWarnings from '@/views/home/components/numberWarnings.vue'
import keyPerson from "@/views/home/components/keyPerson.vue";
import keyGroups from "@/views/home/components/keyGroups.vue";

const contentItem = reactive([
  { type:"jqzs", label: "今日警情", value: "0" ,icon:require('@/assets/images/top-1.png')},
  { type:"yjzs", label: "今日预警", value: "0",wqsyj:"0",yfkyj:"0",isChild:true,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.findIndex(v=>key == v.type)
      if(index != -1) contentItem[index].value = res[key];
      if(key == 'wqsyj' || key == 'yfkyj') {
        let inx = contentItem.findIndex(v=> v.type == 'yjzs' )
        contentItem[inx][key] = res[key];
      }
    }
  })
}


// 打开警情总数
const openJqzs = ref(false)
const openYjzs = ref(false)
const openZdry = ref(false)
const openZdqt = ref(false)
const yjType = ref('')
const openTc = (val,type) => {
  switch (val) {
    case 'jqzs':
      openJqzs.value = true
      break;
    case 'yjzs':
      yjType.value = type
      openYjzs.value = true
      break;
    case 'zdry':
      openZdry.value = true
      break;
    case 'zdqt':
      openZdqt.value = true
      break;
  }
}
</script>

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