86 lines
3.0 KiB
Vue
86 lines
3.0 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">
|
|
<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>
|