警报

src/views/dataBI/components/Securityforces.vue

@@ -0,0 +1,83 @@
+<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>