ybxf-security-uniapp/pages/work/index.vue

<template>
	<view>
		<image :src="worktop" style="height: 340rpx;width: 90%;margin-left: 40rpx;"></image>
		<!-- 		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#4cd964"></uni-segmented-control>
		<view v-if="current === 0"> -->
		<view class="grid-body">
			<uni-card :border="false">
				<uni-section title="事件中心" type="line" titleFontSize='18px'>
					<uni-grid :column="3" :showBorder="false" @change="changeGrid">
						<uni-grid-item v-for="(item, index) in urlList1" :key="index">
							<view class="example-body">
								<view class="grid-item-box" @click="handleToInfo(item.menuUrl,item.menuName)">
									<image :src="urlIconTran(item.menuIcon)" class="tubiao"></image>
									<text class="text">{{ item.menuName }}</text>
									<u-badge v-if="item.menuName == '指令'&&unread != 0" :value="unread" type="error"
										class="huibiao"></u-badge>
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
				<uni-section title="管理中心" type="line" titleFontSize='18px'>
					<uni-grid :column="3" :showBorder="false" @change="changeGrid">
						<uni-grid-item v-for="(item, index1) in urlList" :key="index1">
							<view class="example-body">
								<view class="grid-item-box" @click="handleToInfo(item.menuUrl,item.menuName)">
									<image :src="urlIconTran(item.menuIcon)" class="tubiao"></image>
									<text class="text">{{ item.menuName }}</text>
									<u-badge v-if="item.menuName == '指令'&&unread != 0" :value="unread" type="error"
										class="huibiao"></u-badge>
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
				<uni-section title="乡镇消防工作档案" type="line" titleFontSize='18px' v-if="urlList2.length&&urlList2.length>0">
					<uni-grid :column="3" :showBorder="false" @change="changeGrid">
						<uni-grid-item v-for="(item, index) in urlList2" :key="index">
							<view class="example-body">
								<view class="grid-item-box" @click="handleToInfo(item.menuUrl,item.menuName)">
									<image :src="urlIconTran(item.menuIcon)" class="tubiao"></image>
									<text class="text">{{ item.menuName }}</text>
									<u-badge v-if="item.menuName == '指令'&&unread != 0" :value="unread" type="error"
										class="huibiao"></u-badge>
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</uni-card>
		</view>
	</view>
</template>
<script>
	import storage from '@/utils/storage';
	import {
		getNoticeList, // 通知公告列表
		getNoticeReadData //指令未读的数量
	} from '@/api/notice';
	import {
		getMenusByUser
	} from '@/api/login';
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				urls: baseUrlImg,
				roles: this.$store.state.user.roles,
				current: 0,
				swiperDotIndex: 0,
				worktop: `${baseUrlImg}/working/worktop.png`, //图片
				zhudongjiancha: `${baseUrlImg}/working/zhudongjiancha.png`,
				yinhuanguanli: `${baseUrlImg}/working/yinhuanguanli.png`,
				user_business: `${baseUrlImg}/working/user_business.png`,
				tabler_clock_edit: `${baseUrlImg}/working/tabler_clock_edit.png`,
				tabler_chart_histogram: `${baseUrlImg}/working/tabler_chart_histogram.png`,
				outline_trumpet: `${baseUrlImg}/working/outline_trumpet.png`,
				outline_permissions: `${baseUrlImg}/working/outline_permissions.png`,
				meirixuncha: `${baseUrlImg}/working/big1.png`,
				fire_extinguishe: `${baseUrlImg}/working/weixingxiaofang.png`,
				unit_info: `${baseUrlImg}/working/danweixinxi.png`,
				zhilin: `${baseUrlImg}/working/zhilin.png`,
				unit_arc: `${baseUrlImg}/working/danweijianzhu.png`,
				xiaofangsheshi: `${baseUrlImg}/working/xiaofangsheshi.png`,
				renyuan: `${baseUrlImg}/working/renyuan.png`,
				drill: `${baseUrlImg}/working/drill.png`,
				archive: `${baseUrlImg}/working/gongzuodangan.png`,
				items: ['事件中心', '管理中心'],
				current: 0,
				urlList: [],
				urlList1: [],
				unread: 0, //未读数量
				urlList2: []
			};
		},
		onLoad() {
			this.getMenu();
		},
		onShow() {

			this.getData()
		},
		methods: {
			getData() {
				getNoticeReadData({
					userId: this.$store.state.user.id
				}).then(response => {
					this.unread = response.data
					console.log(this.unread, 'this.unread');
				})
			},
			getMenu() {
				console.log('this.$store.state.user.id: ', this.$store.state.user.id);
				getMenusByUser({
					id: this.$store.state.user.id
				}).then(response => {
					console.log(response.data, 'dddd');
					// this.urlList2 = this.urlList.splice(this.urlList.length-2,2)
					this.urlList2 = response.data.filter(item => item.menuUrl == '/pagesA/fire/fire_inspetItem/fire_inspetItem' || item.menuUrl =='/pagesA/fire/archive/nav')
					this.urlList = response.data.filter(item => !this.urlList2.includes(item)).sort((a, b) => a.menuSort - b.menuSort).splice(12);
					// this.urlList = response.data.sort((a, b) => a.menuSort - b.menuSort).splice(12);
					this.urlList1 = response.data.sort((a, b) => a.menuSort - b.menuSort).splice(0,12)

					console.log(this.urlList2, 'asdbj',this.urlList);
				});
			},
			urlIconTran(val) {
				if (val == 'outline_permissions') {
					return this.outline_permissions;
				} else if (val == 'meirixuncha') {
					return this.meirixuncha;
				} else if (val == 'zhudongjiancha') {
					return this.zhudongjiancha;
				} else if (val == 'check_inspection') {
					return this.zhudongjiancha;
				} else if (val == 'yinhuanfucha') {
					return this.yinhuanguanli
				} else if (val == 'tabler_clock_edit') {
					return this.tabler_clock_edit;
				} else if (val == 'outline_trumpet') {
					return this.outline_trumpet;
				} else if (val == 'outline_trumpet') {
					return this.outline_trumpet;
				} else if (val == 'yinhuanguanli') {
					return this.yinhuanguanli;
				} else if (val == 'user_business') {
					return this.user_business;
				} else if (val == 'fire_extinguishe') {
					return this.fire_extinguishe;
				} else if (val == 'unit_info') {
					return this.unit_info;
				} else if (val == 'unit_arc') {
					return this.unit_arc;
				} else if (val == 'drill') {
					return this.drill;
				} else if (val == 'xiaofangsheshi') {
					return this.xiaofangsheshi;
				} else if (val == 'archive') {
					return this.archive;
				} else if (val == 'renyuan') {
					return this.renyuan;
				} else if (val == 'tabler_chart_histogram') {
					return this.tabler_chart_histogram;
				} else if (val == 'zhilin') {
					return this.zhilin;
				} else if (val == 'zlgztzs_icon') {
					return this.renyuan
				} else if (val == 'fire_inspetItem') {
					return this.archive;
				} else if (val == 'fireWork') {
					return this.archive;
				} else if (val == 'fireSpecial') {
					return this.archive;
				}
			},
			// 顶部个人信息跳转
			onClick() {
				uni.switchTab({
					url: '/pages/mine/index'
				});
			},
			changeGrid(e) {},
			// 根据不同的url，进行页面的跳转
			handleToInfo(url, name) {
				this.$tab.navigateTo(url);

				console.log(this.$store, this.$store.state.user, this.$store.getters, 'sdddddddddddd', url);
			},
			// 分段器点击 事件中心、管理中心转换
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
		height: auto;
	}

	.tubiao {
		width: 142upx;
		height: 142upx;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.tabIcon {
		color: white;
	}

	/* #endif */
	.text {
		text-align: center;
		color: #000;
		font-size: 26rpx;
		margin-top: -18upx;
		// margin-top: 10rpx;
	}

	.grid-item-box {
		position: relative;
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	// 按钮样式
	button {
		width: 132rpx;
		height: 52rpx;
		border-radius: 50rpx;
		background-color: #f7d1dc;
		border-color: #d51a52;
		color: #d51a52;
		font-size: 25rpx;
		border: 3rpx solid;
		font-weight: bold;
		padding: 0;
		margin-left: 70rpx;
	}

	::v-deep .u-navbar__content {
		// background-color: #4cb2b6 !important;
	}

	.container {
		height: 140vh;
		// height: 100vh;
		background-color: #fff;
	}

	// 修改分段器默认样式
	::v-deep .segmented-control {
		border-bottom: 1px solid #e5e5e5;
	}

	::v-deep .segmented-control__text {
		color: #4cb2b6 !important;
	}

	::v-deep .segmented-control__text span {
		color: #3d3d3d !important;
	}

	::v-deep .segmented-control__item--text {
		padding: 8px 0;
	}

	//徽标
	// /deep/.u-page__tag-item {
	// 		margin-right: 40px;
	// 		margin-top: 0 !important;
	// 	}
	/deep/.u-badge[data-v-662d25bf] {}

	.huibiao,
	/deep/.u-badge--error.data-v-662d25bf,
	/deep/.u-badge--error {
		position: absolute;
		right: 56rpx;
		top: 46rpx;
	}
</style>