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' >
					<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.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)
				this.urlList2 = this.urlList.splice(this.urlList.length-2,2)
				console.log(this.urlList,'asdbj');
			});
		},
		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>