police 添加数据统计接口
This commit is contained in:
parent
1e44856b58
commit
4b94332ae6
|
|
@ -1,47 +1,73 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.subModule {
|
||||
.Module {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
.subModule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -3px;
|
||||
margin-left: -1px;
|
||||
|
||||
.subModuleItem {
|
||||
width: 33%;
|
||||
height: 180rpx;
|
||||
width: 246rpx;
|
||||
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;
|
||||
height: 65rpx;
|
||||
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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="subModule">
|
||||
<view class="subModuleItem" v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.url)">
|
||||
<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: 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,
|
||||
name: '警保风采',
|
||||
icon: icon02,
|
||||
name: '整改工单',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: icon,
|
||||
name: '待定',
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
export interface DataStatisticsRes {
|
||||
/*企事业单位数量 */
|
||||
enterprisesUnitCount: number;
|
||||
|
||||
/*服务项目数量 */
|
||||
serviceProjectCount: number;
|
||||
|
||||
/*保安人员数量 */
|
||||
securityUserCount: number;
|
||||
|
||||
/*无证保安人员数量 */
|
||||
noCardSecurityUserCount: number;
|
||||
}
|
||||
Loading…
Reference in New Issue