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

<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: 180px">
          <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
        </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 class="Module">
      <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: 5px">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view style="background-color: #e9eef4; height: 15rpx"></view>
  </view>
</template>
<script setup lang="ts">
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'
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: '项目管理',
    url: '/subPages/police/myEnterprisesUnit/myEnterprisesUnit',
  },
  {
    id: 1,
    icon: icon02,
    name: '整改工单',
    url: '',
  },
  {
    id: 2,
    icon: icon03,
    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>