police 添加数据统计接口

collect_information/src/pages/police/index/index.scss

@@ -1,43 +1,65 @@
+.nameTitle {
+  position: absolute;
+  top: 277rpx;
+  left: 55px;
+  height: 125rpx;
+  background-color: #fff;
+  width: 650rpx;
+  border-radius: 12rpx;
+  box-shadow: 0px 10px 10px -4px #e3e3e3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .itemSchool {
+    border-right: solid 1.5rpx #dadada;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 25%;
+    font-size: 24px
+  }
+
+  .itemSchool text:nth-child(1) {
+    margin-bottom: 10rpx;
+    color: #898a8a;
+    margin-left: -8px;
+  }
+}
 .swiperDemoItem {
   color: #3886d0;
   display: flex;
   padding: 20px 0 0 50px;
   overflow: hidden;
   height: 70rpx;
+  margin-top: 70px;
 
   .swiperDemoIndex {
     width: 15px;
     height: 45px;
     background-image: linear-gradient(to bottom, #5d9cf9, #317ad9);
-    //background: rgb();
     border-radius: 20px;
     margin-right: 15px;
   }
 }
-
+.Module {
+  background-color: #fff;
+  overflow: hidden;
   .subModule {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-  margin-right: -3px;
-  margin-left: -1px;
-
     .subModuleItem {
-    width: 33%;
+      width: 246rpx;
-    height: 180rpx;
+      height: 140rpx;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       padding-bottom: 10rpx;
-    border: 1px solid #ccc;
-    border-left: 0;
-    margin-top: -1px;
-
       .subModuleIndex {
-      width: 65rpx;
+        width: 45rpx;
-      height: 65rpx;
+        height: 45rpx;
-
         image {
           width: 100%;
           height: 100%;
@@ -45,3 +67,7 @@
       }
     }
   }
+
+}
+
+

collect_information/src/pages/police/index/index.scss.bak

@@ -0,0 +1,47 @@
+.swiperDemoItem {
+  color: #3886d0;
+  display: flex;
+  padding: 20px 0 0 50px;
+  overflow: hidden;
+  height: 70rpx;
+
+  .swiperDemoIndex {
+    width: 15px;
+    height: 45px;
+    background-image: linear-gradient(to bottom, #5d9cf9, #317ad9);
+    //background: rgb();
+    border-radius: 20px;
+    margin-right: 15px;
+  }
+}
+
+.subModule {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-right: -3px;
+  margin-left: -1px;
+
+  .subModuleItem {
+    width: 33%;
+    height: 180rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 10rpx;
+    border: 1px solid #ccc;
+    border-left: 0;
+    margin-top: -1px;
+
+    .subModuleIndex {
+      width: 65rpx;
+      height: 65rpx;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

collect_information/src/pages/police/index/index.vue

@@ -2,56 +2,120 @@
   <view>
     <view class="swiperDemo">
       <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
-        <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 200px">
+        <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 180px">
           <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false"/>
+          <view>1123</view>
         </nut-swiper-item>
       </nut-swiper>
     </view>
+    <view class="nameTitle">
+      <view class="itemSchool" >
+        <text>单位数量</text>
+        <text
+            style=" white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 80px;text-align: center">{{numberStatistics.enterprisesUnitCount}}</text>
+      </view>
+      <view class="itemSchool">
+        <text>服务项目</text>
+        <text>
+          {{numberStatistics.serviceProjectCount}}
+        </text>
+      </view>
+      <view class="itemSchool">
+        <text>有保安证人员</text>
+        <text>{{numberStatistics.securityUserCount}}</text>
+      </view>
+      <view class="itemSchool">
+        <text>无保安证人员</text>
+        <text>{{numberStatistics.noCardSecurityUserCount}}</text>
+      </view>
+    </view>
     <view class="swiperDemoItem">
       <view class="swiperDemoIndex"></view>
       <view>请选择</view>
     </view>
     <!--九宫格-->
-    <view>
+    <view class="Module">
       <view class="subModule" >
-        <view class="subModuleItem" v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.url)">
+        <view class="subModuleItem" v-for="item in subModuleList" :key="item.id"
+              @click="subNavigation(item.url)">
           <view class="subModuleIndex">
             <image :src="item.icon"></image>
           </view>
-          <view style=" font-size: 12px;color: #414141;margin-top: 9px">{{ item.name }}</view>
+          <view style=" font-size: 12px;color: #414141;margin-top: 5px">{{item.name}}</view>
         </view>
       </view>
     </view>
+    <view style="background-color: #e9eef4;height: 15rpx"></view>
+
   </view>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue'
+import {onMounted, ref} from 'vue'
 import Taro from "@tarojs/taro";
 import icon from '@/assets/images/project.png'
+import icon01 from '@/assets/images/回单.jpg'
+import icon02 from '@/assets/images/工单.jpg'
+import icon03 from '@/assets/images/排名.jpg'
+import icon04 from '@/assets/images/法制宣传.jpg'
+import icon06 from '@/assets/images/警保风采.jpg'
 import './index.scss'
-const list = ref([process.env.TARO_APP_MINIO_URL + '/police-security/2024/11/5/dunpai.jpg',process.env.TARO_APP_MINIO_URL + '/police-security/2024/11/5/xingqiu.jpg'])
+import api from "@/request";
+import {DataStatisticsRes} from "@/types/pages/police";
+const list = ref([process.env.TARO_APP_MINIO_URL + '/police-security/2024/11/5/dunpai.jpg'])
 const swiperRef = ref() //轮播图
 const subModuleList = ref([
   {
     id: 0,
     icon: icon,
-    name: '企事业单位',
+    name: '项目管理',
     url: '/subPages/police/myEnterprisesUnit/myEnterprisesUnit'
   },
   {
     id: 1,
-    icon: icon,
+    icon: icon02,
-    name: '警保风采',
+    name: '整改工单',
     url: ''
   },
   {
     id: 2,
-    icon: icon,
+    icon: icon03,
-    name: '待定',
+    name: '考核排名',
+    url: ''
+  },
+  {
+    id: 3,
+    icon: icon06,
+    name: '警保风采',
+    url: ''
+  },
+  {
+    id: 4,
+    icon: icon04,
+    name: '法制宣传',
+    url: ''
+  },
+  {
+    id: 5,
+    icon: icon01,
+    name: '整改回单',
     url: ''
   }
 ])
 
+const  numberStatistics = ref<DataStatisticsRes>({
+  enterprisesUnitCount:0,
+  serviceProjectCount:0,
+  securityUserCount:0,
+  noCardSecurityUserCount:0
+})
+const dataStatistics = async ()=>{
+    const resp = await api.get<DataStatisticsRes>('/policeIndex/dataStatistics')
+    numberStatistics.value = resp.data as DataStatisticsRes
+}
+onMounted(async()=>{
+  await dataStatistics()
+})
+
 const subNavigation = async (url: string) => Taro.navigateTo({url})
 
 </script>

collect_information/src/pages/police/index/index.vue.bak

@@ -0,0 +1,57 @@
+<template>
+  <view>
+    <view class="swiperDemo">
+      <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
+        <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 200px">
+          <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false"/>
+        </nut-swiper-item>
+      </nut-swiper>
+    </view>
+    <view class="swiperDemoItem">
+      <view class="swiperDemoIndex"></view>
+      <view>请选择</view>
+    </view>
+    <!--九宫格-->
+    <view>
+      <view class="subModule">
+        <view class="subModuleItem" v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.url)">
+          <view class="subModuleIndex">
+            <image :src="item.icon"></image>
+          </view>
+          <view style=" font-size: 12px;color: #414141;margin-top: 9px">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue'
+import Taro from "@tarojs/taro";
+import icon from '@/assets/images/project.png'
+import './index.scss'
+const list = ref([process.env.TARO_APP_MINIO_URL + '/police-security/2024/11/5/dunpai.jpg',process.env.TARO_APP_MINIO_URL + '/police-security/2024/11/5/xingqiu.jpg'])
+const swiperRef = ref() //轮播图
+const subModuleList = ref([
+  {
+    id: 0,
+    icon: icon,
+    name: '企事业单位',
+    url: '/subPages/police/myEnterprisesUnit/myEnterprisesUnit'
+  },
+  {
+    id: 1,
+    icon: icon,
+    name: '警保风采',
+    url: ''
+  },
+  {
+    id: 2,
+    icon: icon,
+    name: '待定',
+    url: ''
+  }
+])
+
+const subNavigation = async (url: string) => Taro.navigateTo({url})
+
+</script>

collect_information/types/pages/police/index.ts

@@ -0,0 +1,13 @@
+export interface DataStatisticsRes {
+    /*企事业单位数量 */
+    enterprisesUnitCount: number;
+
+    /*服务项目数量 */
+    serviceProjectCount: number;
+
+    /*保安人员数量 */
+    securityUserCount: number;
+
+    /*无证保安人员数量 */
+    noCardSecurityUserCount: number;
+}