xunjian_app/pages/onsitpection/home/index.vue

<template>
	<view class="u-flex u-f-d-c home u-p-l-30 u-p-r-30">
		<view class="u-flex u-f-d-c m-w min-hei">
			<view class="u-m-18">
				<u-image width="690rpx" height="300rpx" src="https://xj.chuanghai-tech.com/image/f6ac3cbb2d2d2f29d769cec3b051e05.png"></u-image>
			</view>
			<view @click="tsanavtask()" class="info-swiper u-m-b-40 u-flex u-col-center">
				<view class="info-ti"></view>
				<view class="info-icon u-flex u-row-center u-col-center">
					<u-image width="40" height="40" :src="tzicon"></u-image>
				</view>
				<view class="u-m-l-16 u-flex f-d-c u-col-top">
					<view class="annou-title">{{ taskdetail.title || '最新任务' }}</view>
					<view class="annou-cig">{{ taskdetail.content || '内容' }}</view>
				</view>
				<view class="right-icon u-flex u-row-right">
					<view v-show="taskCount != 0" class="hint">
						{{ taskCount }}
					</view>
					<u-icon name="arrow-right" color="rgba(153, 153, 153, 1)" size="25"></u-icon>
				</view>
			</view>
			<view class="u-flex f-d-c u-col-top m-w">
				<view class="u-font-32 u-m-b-30" style="color: #000000">主要功能</view>
				<view class="to-menus u-p-t-28 u-p-b-28">
					<view class="nav-itm">
						<navigator hover-class="none" :url="index.url" class="u-flex u-f-d-c" v-for="(index, key) in nav_obj1" :key="key">
							<view class="menu-icon">
								<u-image :width="index.size" :height="index.size" :src="index.imgurl"></u-image>
							</view>
							<view class="u-m-t-16 u-f-26">{{ index.name }}</view>
						</navigator>
					</view>
					<view class="nav-itm">
						<navigator hover-class="none" :url="index.url" class="u-flex u-f-d-c" v-for="(index, key) in nav_obj2" :key="key">
							<view class="menu-icon">
								<u-image :width="index.size" :height="index.size" :src="index.imgurl"></u-image>
							</view>
							<view class="u-m-t-16 u-f-28">{{ index.name }}</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-t-46 mai-color u-p-l-16 u-p-r-16 sc-view">
			<view class="u-flex u-row-between u-m-b-30">
				<view class="u-font-32" style="color: #000000">当日巡检</view>
				<navigator hover-class="none" url="/scan_pages/seemore/seemore" class="u-f-24 u-flex" style="font-weight: 400; color: #4a8bff">
					<view class="u-m-r-8">查看更多</view>
					<u-icon name="arrow-right"></u-icon>
				</navigator>
			</view>

			<view class="scr-hei">
				<block v-if="partlist.length > 0">
					<block v-for="(index, key) in partlist" :key="key">
						<cDisk :more="0" :parobj="index" :prourl="`/scan_pages/patrol/patrol?taskId=${index.id}&status=${index.status}`" />
					</block>
				</block>
				<block v-else>
					<u-empty text="暂无数据" mode="list"></u-empty>
				</block>
			</view>
		</view>
		<u-tabbar :before-switch="beforeSwitch" :height="tabheight" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { taskecl, patrolTask, tasknewst } from '@/api/index.js'
// import banner from "@/static/img/banner.png";
import tzicon from '@/static/img/tzicon.png'
import nav1 from '@/static/img/navbar/nav1.png'
import nav2 from '@/static/img/navbar/nav2.png'
import nav3 from '@/static/img/navbar/nav3.png'
import nav4 from '@/static/img/navbar/nav4.png'
import nav5 from '@/static/img/navbar/nav5.png'
import nav6 from '@/static/img/navbar/nav6.png'
import nav7 from '@/static/img/navbar/nav7.png'
import nav8 from '@/static/img/navbar/nav8.png'
import cDisk from '@/components/c-disk/index.vue'
export default {
	components: {
		cDisk
	},
	data() {
		return {
			ifOnShow: false, //页面刷新
			taskCount: 0, //我收到的处理中的任务
			//导航栏
			nav_obj1: [
				{
					name: '公司简介',
					icon: 'company',
					url: '/pages/company/company',
					imgurl: nav1,
					size: 82.9
				},
				{
					name: '数据中心',
					icon: 'data_sys',
					url: '/pages/datasys/datasys',
					imgurl: nav2,
					size: 82.9
				},
				{
					name: '巡检路线',
					icon: 'polling',
					url: '/scan_pages/checkpoint/checkpoint',
					imgurl: nav3,
					size: 82.9
				},
				{
					name: '巡检记录',
					icon: 'polling_rcd',
					url: '/scan_pages/patrolrecored/patrolrecored',
					imgurl: nav4,
					size: 82.9
				}
			],
			nav_obj2: [
				{
					name: '临时任务',
					icon: 'temporary_task',
					url: '/task_pages/taskarrment/taskarrment',
					imgurl: nav5,
					size: 82.9
				},
				{
					name: '任务查询',
					icon: 'task_sear',
					url: `/task_pages/taskarrment/tasklist/tasklist`,
					imgurl: nav6,
					size: 82.9
				},
				{
					name: '资产查询',
					icon: 'assert_sear',
					url: '/pages/assetsear/assetsear',
					imgurl: nav7,
					size: 82.9
				},
				{
					name: '库存查询',
					icon: 'num_sear',
					url: '/pages/numsear/numsear',
					imgurl: nav8,
					size: 82.9
				}
			],
			//背景图
			// banner: banner,
			tzicon: tzicon, //图片
			partlist: null,
			taskdetail: null,
			tabheight: null
		}
	},
	computed: {
		...mapState({
			tabbar: (state) => state.tabbar.tabbar,
			timer: (state) => state.user.timer
		})
	},
	onHide() {
		this.ifOnShow = true
	},
	onShow() {
		if (this.ifOnShow) {
			this.init()
		}
	},
	onLoad() {
		this.init()
		this.tabheight = getApp().globalData.tabhei
	},
	//下拉刷新
	onPullDownRefresh() {
		this.init()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	methods: {
		//底部导航栏
		beforeSwitch(id) {
			if (id == 1) {
				this.$store.dispatch('user/gettasklist')
				return false
			} else {
				return true
			}
		},
		//查看处理中任务列表
		tsanavtask() {
			this.$store.state.user.taskdetail = this.taskdetail
			if (this.taskCount !== 0) {
				uni.navigateTo({
					url: `/task_pages/taskarrment/tasklist/tasklist?staus=${0}&id=${1}`
				})
			} else {
				//只有一条任务跳转任务详情
				uni.navigateTo({
					url: '/task_pages/taskarrment/viewtask/viewtask'
				})
			}
		},
		//获取当日巡检列表与最新一条任务讯息
		init() {
			//获取当日巡检计划
			patrolTask(this.timer).then(({ data }) => {
				this.partlist = data.list
			})
			//获取最新任务
			tasknewst().then(({ data }) => {
				this.taskdetail = data
			})
			//获取我收到处理中的任务个数
			taskecl().then(({ data }) => {
				this.taskCount = 0
				data.forEach((Element) => {
					if (Element.status == 1) {
						this.taskCount = Element.count
					}
				})
			})
		}
	}
}
</script>

<style lang="scss">
@import '@/static/css/chj.css';

.home {
	width: 100%;
	background: #ffffff;
	// border-top: 1rpx solid #000000;
}

.mai-color {
	width: 100%;
	background: #ffffff;
}

.info-swiper {
	width: 100%;
	height: 120rpx;
	box-sizing: border-box;
	background: #ffffff;
	box-shadow: 0px 0px 13rpx 0px rgba(6, 0, 1, 0.11);
	border-radius: 6rpx;
	position: relative;

	.info-ti {
		width: 9rpx;
		height: 44rpx;
		background: #4a8bff;
	}

	.info-icon {
		width: 58rpx;
		height: 58rpx;
		background: #ffffff;
		box-shadow: 0px 0px 5rpx 0px rgba(6, 0, 1, 0.11);
		border-radius: 50%;
		margin-left: 15rpx;
	}

	.annou-title {
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #000000;
	}

	.annou-cig {
		font-size: 24rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #999999;
		margin-top: 10rpx;
	}

	.hint {
		width: 30rpx;
		height: 30rpx;
		margin-right: 30rpx;
		border-radius: 50%;
		background-color: #f19536;
		font-size: 24rpx;
		text-align: center;
		line-height: 30rpx;
		color: #fbeee5;
	}

	.right-icon {
		position: absolute;
		right: 14rpx;
		width: 80rpx;
	}
}

.to-menus {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #ffffff;
	box-shadow: 0px 0px 13rpx 0px rgba(6, 0, 1, 0.11);
	border-radius: 6rpx;

	.nav-itm {
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 90px;
	}
}

.scr-hei {
	background: #ffffff;
	box-shadow: 0px 0px 13rpx 0px rgba(6, 0, 1, 0.11);
	border-radius: 6rpx;
	position: relative;
}

.sc-view {
	.u-progress-info {
		font-size: 36rpx;
		font-weight: 400;
		color: #4a8bff;
	}
}
</style>