ybxf-security-uniapp/pagesA/fire/data_statistics/index.vue

<template>
	<view class="container uni-container">
		<view class="">
			<uni-row :gutter="24">
				<uni-col :span="11" v-for="(item, index) in tableData" :key="index" style="">
					<view class="demo-layout bg-purple-light">
						<view class="top-title">
							<image :src="item.img" class="img-cl"></image>
							<text class="title-name">{{ item.name }}</text>
						</view>
						<view class="data-value">{{ item.value }}</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getDevcoverage, //查询设备覆盖率
		getScanbyday, //查询日均扫码总数
		getScanbyperson,//查询人均扫码总数
		getScantotal,//查询巡查扫码总数
		getDevtypecover,//查询设备类型覆盖率统计
		getFinddenger,//查询发现隐患数
		getFixdenger//查询整改隐患数
	} from '@/api/statistics';
	import {
		getOrgId
	} from '@/api/fpdDetection/index.js';
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				query:{
					orgIds:[''],
					},
				tableData: [{
						name: '巡查扫码总数',
						value:null,
						img:`${baseUrlImg}/modal/shaoma.png`
					},
					{
						name: '日均扫码数',
						value:null,
						img:`${baseUrlImg}/modal/shaoma.png`
					},
					{
						name: '人均扫码数',
						value:null,
						img:`${baseUrlImg}/modal/shaoma.png`
					},
					{
						name: '设备覆盖率',
						value: null,
						img:`${baseUrlImg}/modal/sheshi.png`
					},
					{
						name: '设备类型覆盖率',
						value: null,
						img:`${baseUrlImg}/modal/sheshi.png`
					},
					{
						name: '发现隐患总数',
						value: null,
						img:`${baseUrlImg}/modal/jingao.png`
					},
					{
						name: '整改隐患总数',
						value: null,
						img:`${baseUrlImg}/modal/jingao.png`
					},
					{
						name: '整改隐患平均时间',
						value: null,
						img:`${baseUrlImg}/modal/jingao.png`
					}
				]
			}
		},
		onShow() {
			getOrgId({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				userId: this.$store.state.user.id
			}).then(response => {
				// console.log(response, 'response');
				this.query.orgIds[0] =response.data[0].dwid
				this.getData()
			}).catch(err => {
				this.loading = false
				this.$modal.msg(err)
			})
		},
		methods: {
			async getData() {
				// console.log('orgIds',this.query);
				const res1 = await  getDevtypecover()
				const res2 = await  getScanbyday()
				const scantotal = await  getScantotal({userId: this.$store.state.user.id})
				const scanbyperson = await  getScanbyperson()
				const finddenger = await  getFinddenger()
				const fixdenger = await  getFixdenger()
				this.tableData[0].value = scantotal.data
				this.tableData[1].value = res2.data
				this.tableData[2].value = scanbyperson.data
				this.tableData[3].value = (res1.data-0)*100+'%'
				this.tableData[4].value = (res1.data-0)*100+'%'
				this.tableData[5].value = finddenger.data
				this.tableData[6].value = fixdenger.data
				this.tableData[7].value = 2.5
				// console.log('res1',res1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9 !important;
	}

	/deep/ .uni-row {
		display: flex;
		flex-wrap: wrap;
	}

	.uni-col {
		flex-grow: 1;
		flex-basis: 50%;
		margin-bottom: 40rpx;
		/* 每个元素占据的宽度为一行的一半 */
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 210rpx;
		border-radius: 24rpx;
	}

	.bg-purple {
		background: #fff;
	}

	.bg-purple-light {
		background: #fff;
	}

	.bg-purple-dark {
		background: #fff;
	}

	.img-cl {
		width: 48rpx;
		height: 48rpx;
		margin:40rpx 10rpx 16rpx 24rpx;
	
	}
	.title-name{
		font-size: 28rpx;
		color: #4CB2B6;
		padding-top: 20rpx;
	}
	.data-value{
		font-size: 44rpx;
		margin-left: 80rpx;
	}
	.top-title{
		display: flex;
		align-items: center;
	}
</style>