ruoyi-miniapp/pages/index.vue

<template>
	<cs-page
		:selected="0"
		title="智慧生态"
		isTab
	>
		<view class="view-container">
			<van-dropdown-menu
				safe-area-tab-bar
				active-color="#17C653"
			>
				<van-dropdown-item
					:value="queryParams.deptId"
					:options="dropOption.dept"
					use-before-toggle
					@before-toggle="dorpToggle"
					@change="
						v => {
							querySelect(v, 'deptId')
						}
					"
				/>
				<van-dropdown-item
					:value="queryParams.selectWeek"
					:options="dropOption.select_week"
					@change="
						v => {
							querySelect(v, 'selectWeek')
						}
					"
				/>
			</van-dropdown-menu>
			<scroll-view
				:scroll-y="true"
				:style="{ maxHeight: `${viewHeigth}px` }"
				class="view"
				:refresher-enabled="true"
				@refresherrefresh="refresherrefresh"
				:refresher-triggered="refresherTriggered"
				@refresherpulling="refresherpulling"
			>
				<view class="box row-1">
					<view
						class="wd-flex"
						style="justify-content: space-around"
					>
						<view
							class="wd-flex wd-flex-col wd-flex-center"
							style="gap: 4px"
						>
							<u-count-to
								:start-val="0"
								:end-val="detail.taskCount"
								bold
								font-size="24"
								color="#071437"
							></u-count-to>
							<view class="">任务数量</view>
						</view>
						<view
							class="wd-flex wd-flex-col wd-flex-center"
							style="gap: 4px"
						>
							<u-count-to
								:start-val="0"
								:end-val="detail.inspectionsCount"
								bold
								font-size="24"
								color="#071437"
							></u-count-to>
							<view class="">执法记录</view>
						</view>
						<view
							class="wd-flex wd-flex-col wd-flex-center"
							style="gap: 4px"
						>
							<u-count-to
								:start-val="0"
								:end-val="detail.enterpriseCount"
								bold
								font-size="24"
								color="#071437"
							></u-count-to>
							<view class="">企业数量</view>
						</view>
					</view>
					<qiun-data-charts
						type="ring"
						:opts="opts"
						:chartData="chartData"
						:canvas2d="true"
						style="height: 144px"
					></qiun-data-charts>
					<view
						class="wd-flex"
						style="gap: 12px; flex-wrap: wrap"
					>
						<view
							class="wd-flex wd-flex-col wd-flex-center"
							v-for="item in detail.legendData"
							:key="item"
							style="
								border: 1px solid #f9f9f9;
								width: calc(100% / 3 - 8px);
								padding: 12px;
								gap: 4px;
								border-radius: 4px;
							"
						>
							<view
								class="wd-flex wd-flex-col"
								style="gap: 4px"
							>
								<view
									class="wd-flex"
									style="align-items: center; gap: 4px"
								>
									<view
										:style="{
											width: '8px',
											height: '4px',
											borderRadius: '4px',
											backgroundColor: item.color,
										}"
									></view>
									<view class="">{{ item.name }}</view>
								</view>
								<view class="wd-flex wd-flex-center">
									<u-count-to
										:start-val="0"
										:end-val="Number(item.value)"
										bold
										font-size="16"
										color="#071437"
									></u-count-to>
									%
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="box row-1">
					<view
						class="wd-flex"
						style="margin-top: 12px; justify-content: center"
					>
						<view
							style="
								background-color: #f9f9f9;
								display: inline-flex;
								padding: 4px;
							"
						>
							<view
								class="tab"
								v-for="(item, index) in tabs"
								:key="index"
								:style="{
									'--index': tabs.findIndex(i => i.type == queryParams.type),
								}"
								@tap="changeTab(item.type)"
							>
								<view
									class="name"
									:style="{
										color:
											queryParams.type == item.type ? '#071437' : '#78829d',
									}"
								>
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view style="min-height: 220px">
						<view
							v-for="(item, index) in list"
							:key="index"
							class="wd-flex"
							style="justify-content: space-between; padding: 12px"
						>
							<view class="wd-font-800">{{ item.name }}</view>
							<view
								class="wd-font-800"
								style="color: #ff6f1e"
							>
								<view>
									<u-count-to
										:start-val="0"
										:end-val="item.count"
										bold
										font-size="14"
										color="#FF6F1E"
									></u-count-to>
									<text>{{ queryParams.type == 1 ? '天' : '次' }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</cs-page>
</template>

<script>
	import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
	import { HomeApi } from '@/api/common/home.js'
	export default {
		data() {
			return {
				dictMap: {},
				queryParams: {
					selectWeek: '',
					deptId: '',
					type: 1,
				},
				detail: {},
				opts: {},
				chartData: {},
				viewHeigth: 0,
				tabs: [
					{
						name: '资质逾期',
						type: 1,
					},
					{
						name: '整改次数',
						type: 2,
					},
				],
				refresherTriggered: false,
				list: [],
				dropOption: {},
				color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653'],
			}
		},
		onLoad: async function () {
			await uni.hideTabBar()
			uni.hideTabBar({
				animation: false,
			})
			this.getDict()
			if (!this.$roles.checkRole(['director'])) {
				this.queryParams.deptId = this.$store.getters.deptId
			}
			this.init()
		},
		onReady() {
			this.$nextTick(() => {
				this.getPageHeight()
			})
		},
		onShow() {
			this.init()
		},
		methods: {
			getPageHeight() {
				const query = uni.createSelectorQuery().in(this)
				query
					.select('.view-container')
					.boundingClientRect(data => {
						this.viewHeigth = data.height - 35 - 25
					})
					.exec()
			},
			async getDict() {
				const dict = await getDictBatchByType({
					type: ['select_week'].join(','),
				})
				const dept = await getDeptTree()
				this.dropOption.dept = [
					...dept.data.map(i => {
						return {
							value: i.id,
							text: i.name,
						}
					}),
					{
						value: '',
						text: '全部',
					},
				]
				this.dropOption.select_week = [
					...dict.data.select_week.map(i => {
						return {
							value: i.value,
							text: i.label,
						}
					}),
					{
						value: '',
						text: '全部',
					},
				]
			},
			async init() {
				// if (!this.$roles.checkRole(['director'])) {
				//   this.queryParams.deptId = this.$store.getters.deptId
				// }
				const res = await HomeApi.getPieData(this.queryParams)
				this.detail = res.data
				let curIndex = 0
				const data = this.detail.completionRate.map((item, index) => {
					const res = { ...item, color: this.color[curIndex] }
					curIndex > this.color.length ? 0 : curIndex++
					return res
				})
				this.detail.legendData = data
				this.setPieData(data, this.detail.taskCompletionRate)
				this.getList()
			},
			async getList() {
				const res = await HomeApi.getListData(this.queryParams)
				this.list = res.data
			},
			setPieData(data, max) {
				const pieData = data.map(i => {
					return {
						name: i.name,
						value: Number(i.pieValue),
					}
				})
				if (Number(max) < 100) {
					pieData.push({
						name: '',
						value: 100 - Number(max),
						color: '#fff',
					})
				}
				this.opts = {
					legend: {
						show: false,
					},
					color: this.color,
					rotate: false,
					rotateLock: false,
					padding: [0, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					title: {
						name: `${max}%`,
						fontSize: 24,
						color: '#071437',
						fontWeight: 'bold',
					},
					subtitle: {
						name: '完成率',
						fontSize: 14,
						color: '#78829D',
					},
					extra: {
						ring: {
							ringWidth: 15,
							activeOpacity: 0.5,
							offsetAngle: 90,
							labelWidth: 15,
							border: false,
							borderColor: '#FFFFFF',
							linearType: 'none',
						},
					},
				}
				this.chartData = {
					series: [
						{
							data: pieData,
						},
					],
				}
			},
			sectionChange(index) {
				this.queryParams.enterprise = index
			},
			querySelect(v, key) {
				this.queryParams[key] = v.detail
				this.init()
			},
			changeTab(type) {
				this.queryParams.type = type
				this.getList()
			},
			refresherpulling() {
				const that = this
				if (!this.refresherTriggered) {
					this.refresherTriggered = true
					setTimeout(() => {
						that.refresherTriggered = false
					}, 1000)
				}
			},
			refresherrefresh() {
				this.init()
			},
			dorpToggle(e) {
				if (!this.$roles.checkRole(['director'])) {
					uni.showToast({
						icon: 'none',
						title: '暂无权限',
					})
					e.detail.callback(false)
				} else {
					e.detail.callback(true)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.view-container {
		height: 100%;
	}
	.view {
		padding: 0 12px;
		padding-bottom: 12px;
		display: flex;
		gap: 12px;
		flex-flow: column nowrap;
		.box {
			padding: 12px;
			background-color: #fff;
			border: 1px solid #f9f9f9;
			border-radius: 12px;
			margin-top: 12px;
			&:last-child {
				margin-bottom: 12px;
			}
		}
		.row-1 {
			display: flex;
			flex-flow: column nowrap;
			gap: 12px;
		}
		.tab {
			position: relative;
			padding: 4px 16px;
			.name {
				z-index: 2;
				position: inherit;
				font-weight: bold;
			}
			&:first-child::before {
				content: '';
				position: absolute;
				inset: 0;
				background-color: #fff;
				border-radius: 2px;
				transform: translateX(calc(var(--index) * 100%));
				transition: 0.2s all;
				z-index: 1;
			}
		}
	}
	::v-deep .van-dropdown-menu {
		box-shadow: none;
		height: 35px !important;
		font-size: 13px;
		border-bottom: 1px solid #f1f1f4;
	}
</style>