84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<template>
|
|
<div class="security-forces">
|
|
<div class="security-forces-content noScollLine" v-loading="loading">
|
|
<div v-for="(item, index) in list" :key="index" class="mt5 mb5">
|
|
<div class="flex align-center title">
|
|
<img src="@/assets/images/bi/abll.png" /><span class="f18">{{ item.ssbm }}</span>
|
|
</div>
|
|
<div class="row-container">
|
|
<el-row class="mb2 pl20 pb2">
|
|
<el-col :span="12">值守点位:<span class="num"> {{ item.zsdSl }} </span>个</el-col>
|
|
<el-col :span="12">保安巡逻组:<span class="num"> {{ item.baxlzSl }} </span>组</el-col>
|
|
</el-row>
|
|
<el-row class="pl20 pb2">
|
|
<el-col :span="12">保安值守:<span class="num"> {{ item.baSl }} </span>个</el-col>
|
|
<el-col :span="12">保安巡逻:<span class="num"> {{ item.baxlSl }} </span>个</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { qcckGet } from "@/api/qcckApi.js";
|
|
import { onMounted, ref } from 'vue';
|
|
const list = ref([])
|
|
const loading = ref(false)
|
|
onMounted(()=>{
|
|
getCount()
|
|
})
|
|
|
|
// 更新数据
|
|
const getCount = () =>{
|
|
loading.value = true;
|
|
qcckGet({},'/mosty-jbld/dptj/getAbxxtj').then(res=>{
|
|
loading.value = false;
|
|
list.value = res || []
|
|
}).catch(()=>{
|
|
loading.value = false;
|
|
})
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.security-forces {
|
|
padding: 10px 10px 5px 10px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
.security-forces-content {
|
|
height: 100%;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
.title {
|
|
font-family: "YSBTH";
|
|
-webkit-background-clip: text;
|
|
background-image: linear-gradient(to top, #a3c6f5 20%, #ffffff 80%);
|
|
background-clip: text;
|
|
color: transparent;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.el-row {
|
|
background: url("~@/assets/images/bi/nrk.png") no-repeat center center;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
.num {
|
|
font-size: 18px;
|
|
color: rgb(1, 252, 254);
|
|
margin: 0 5px;
|
|
}
|
|
.el-col{
|
|
padding: 2px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-loading-mask{
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
</style>
|