76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
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" @click="openTc(item.type)">
|
|
<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;font-size: 24px;">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<PoliceReports v-model="openJqzs"/>
|
|
<NumberWarnings v-model="openYjzs"/>
|
|
<keyPerson v-model="openZdry"/>
|
|
<keyGroups v-model="openZdqt"/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { qcckPost } from "@/api/qcckApi.js";
|
|
import { ref, onMounted } 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 = ref([
|
|
{ type:"jqzs", label: "今日警情", value: "0" ,icon:require('@/assets/images/top-1.png')},
|
|
{ type:"yjzs", 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];
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
// 打开警情总数
|
|
const openJqzs = ref(false)
|
|
const openYjzs = ref(false)
|
|
const openZdry = ref(false)
|
|
const openZdqt = ref(false)
|
|
const openTc = (val) => {
|
|
switch (val) {
|
|
case 'jqzs':
|
|
openJqzs.value = true
|
|
break;
|
|
case 'yjzs':
|
|
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>
|