82 lines
2.6 KiB
Vue
82 lines
2.6 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 v-if="!item.isChild" class="mt4 f12" style="color: #ffffff;font-size: 24px;">{{ item.value }}</div>
|
||
<div v-else class="mt4 flex align-center just-between" style="color: #ffffff;">
|
||
<!-- 未处置： -->
|
||
<span class="f24" style="color: #ff0000;" title="未处置">0</span>
|
||
<!-- 已处置： -->
|
||
<span class="f24" style="color: #4cf35d;" title="已处置">0</span>
|
||
</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:"zdry", label: "重点人员总数", value: "0",icon:require('@/assets/images/top-3.png') },
|
||
{ type:"zdqt", label: "重点群体总数", value: "0" ,icon:require('@/assets/images/top-4.png')},
|
||
{ type:"yjzs", label: "今日预警", value: "0",isChild:true,icon:require('@/assets/images/top-2.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>
|