SHZHJCYJPTYWXTAPP/pages/home/home.vue

<template>
	<view class="container">
		<uni-nav-bar :fixed="true" backgroundColor="#3F9EFF" statusBar="false" height="75px">
			<block slot="left">
				<view style="display: flex;flex-direction: column;justify-content: center;">
					<image src="/static/images/nav_logo.png" class="logo" mode="widthFix"></image>
				</view>
			</block>
			<view style="display: flex;flex:1,justify-content: center;align-items: center;">
				<text style="color: #ffffff; font-size: 1rem;font-family: Microsoft YaHei;">山洪灾害监测预警平台运维系统</text>
			</view>
			<block slot="right">
				<view style="margin-right:20rpx">
					<uni-badge class="uni-badge-left-margin" absolute="rightTop" :is-dot="noticeDot" :text="noticeValue"
						size="small">
						<uIcons class="input-uni-icon" type="notification" size="24" color="#FFFFFF"
							@click="onNoticeMoreClick" />
					</uni-badge>
				</view>
			</block>
		</uni-nav-bar>
		<!-- 头部按钮 start -->
		<view class="nav">
			<u-grid :col="4" :border="false">
				<u-grid-item bg-color="transparent" v-for="(item, index) in navButton" :key="index">
					<navigator v-if="item.badge" :url="item.url" hover-class="none" class="nav-item"
						open-type="navigate">
						<uni-badge class="uni-badge-left-margin" absolute="rightTop" :text="item.value" size="small">
							<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
						</uni-badge>
						<view style="font-size: 0.7rem;font-weight: bold;">{{ item.name }}</view>
					</navigator>
					<navigator v-else :url="item.url" hover-class="none" class="nav-item" open-type="navigate">
						<image :src="item.img" mode="widthFix" class="nav-item-img"></image>
						<view style="font-size: 0.7rem;font-weight: bold;">{{ item.name }}</view>
					</navigator>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 头部按钮 end -->
		<view v-if="showHome.admin">
			<uSection style="margin-bottom: 0px;" title="实时统计" type="line">
				<uGroup>
					<uni-grid :column="4" :highlight="true">
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text class="text" style="font-size: 1rem;color: orangered;">{{realData.rtus}}</text>
								<text style="font-size: 0.7rem;font-weight: bold;">测站总数</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text class="text"
									style="font-size: 1rem;color: orangered;">{{realData.warningRtus}}</text>
								<text style="font-size: 0.7rem;font-weight: bold;">预警设备</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text class="text"
									style="font-size: 1rem;color: orangered;">{{realData.unconfirmOrderCount}}</text>
								<text style="font-size: 0.7rem;font-weight: bold;">未接工单</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text class="text"
									style="font-size: 1rem;color: orangered;">{{realData.equipmentInspectionPercent}}</text>
								<text style="font-size: 0.7rem;font-weight: bold;">已完成巡检</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uGroup>
			</uSection>
			<uSection style="margin-bottom: 0px;" title="预警统计" type="line">
				<uGroup>
					<uni-table ref="rtu_table" border stripe type="" emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="150" align="center">
								<view style="text-align: center;color: black;">机构名称</view>
							</uni-th>
							<uni-th align="center">
								<view style="text-align: center;color: black;">测站数量</view>
							</uni-th>
							<uni-th align="center">
								<view style="text-align: center;color: black;">预警数量</view>
							</uni-th>
						</uni-tr>
						<uni-tr v-for="item in rtuStatisticsList" :key="item.id">
							<uni-td align="center">
								<view style="text-align: center;">{{ item.orgName }}</view>
							</uni-td>
							<uni-td align="center">
								<view style="text-align: center;">{{ item.rtuCount }}</view>
							</uni-td>
							<uni-td align="center">
								<view style="text-align: center;">{{ item.warningRtuCount }}</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</uGroup>
			</uSection>
		</view>
		<view v-if="showHome.orgAdmin">
			<uSection title="实时统计" type="line">
				<uGroup>
					<uni-grid :column="4" :highlight="true">
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text style="font-size: 1rem;color: orangered;">{{realData.rtus}}</text>
								<text style="font-size: 0.7rem;font-weight: bold;">测站总数</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text style="font-size: 1rem;color: orangered;">{{realData.warningRtus}}</text>
								<text style="font-size: 0.7rem;font-weight: bold;">预警设备</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text style="font-size: 1rem;color: orangered;">{{realData.unconfirmOrderCount}}</text>
								<text style="font-size: 0.7rem;font-weight: bold;">未接工单</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<text
									style="font-size: 1rem;color: orangered;">{{realData.equipmentInspectionPercent}}%</text>
								<text style="font-size: 0.7rem;font-weight: bold;">已完成巡检</text>
							</view>
						</uni-grid-item>

					</uni-grid>
				</uGroup>
			</uSection>
			<uSection style="margin-bottom: 0px;" title="今日工单动态" titleFontSize="0.8rem" type="line">
				<uGroup>
					<uni-list>
						<uni-list-item v-for="item in todayOrderProcessList" :key="item.id" showArrow clickable
							@click="toOrderProcessDetail(item.id)">
							<template v-slot:body>
								<view style="display: flex;flex-direction: column;width:100%;">
									<view
										style="display:flex;flex-direction: row;justify-content: start;align-items: center;">
										<image class="order-title-image" style="box-shadow:0 0 2px 2px lightblue"
											src="/static/images/logo_app.png" mode="widthFix">
										</image>
										<view style="margin-left:5px;">
											<text style="font-size:1rem;font-weight: bold;">{{item.rtuName}}</text>
										</view>
										<view style="margin-left:5px;">
											<text style="font-size:0.9rem;">[{{item.rtuCode}}]</text>
										</view>
									</view>
									<view>
										<uIcons class="input-uni-icon" type="loop" size="18" color="skyblue" />
										<text style="font-size:0.8rem;padding-left: 5px;">状态:</text>
										<text
											style="font-size:0.8rem;padding-left: 5px;">{{item.orderStatusName}}</text>
									</view>

									<view>
										<uIcons class="input-uni-icon" type="auth" size="18" color="skyblue" />
										<text
											style="font-size:0.8rem;padding-left: 5px;">{{item.orderProcessUserName}}</text>
										<text style="font-size:0.8rem;padding-left: 5px;"></text>
										<text style="font-size:0.8rem;padding-left: 5px;">{{item.updateTime}}</text>
									</view>
									<view style="display:flex;flex-direction:row;align-items: center;">
										<uIcons class="input-uni-icon" type="compose" size="18" color="skyblue" />
										<text style="font-size:0.8rem;padding-left: 10rpx;">{{item.processDesc}}</text>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</uGroup>
			</uSection>
			<uSection style="margin-bottom: 0px;" title="今日巡检动态" titleFontSize="0.8rem" type="line">
				<uGroup>
					<uni-list>
						<uni-list-item v-for="item in todayEquipmentInspectionList" :key="item.id" showArrow clickable
							@click="onEquipmentInspectionItemClick(item.id)">
							<template v-slot:body>
								<view style="display: flex;flex-direction: column;width:100%;">
									<view
										style="display:flex;flex-direction: row;justify-content: start;align-items: center;">
										<image class="order-title-image" style="box-shadow:0 0 2px 2px lightblue"
											src="/static/images/home/n3.png" mode="widthFix">
										</image>
										<view style="margin-left:5px;">
											<text style="font-size:1rem;font-weight: bold;">{{item.rtuName}}</text>
										</view>
										<view style="margin-left:5px;">
											<text style="font-size:0.9rem;">[{{item.rtuCode}}]</text>
										</view>
									</view>
									<view>
										<uIcons class="input-uni-icon" type="auth" size="18" color="skyblue" />
										<text
											style="font-size:0.8rem;padding-left: 5px;">{{item.servicePersonName}}</text>
										<text style="font-size:0.8rem;padding-left: 5px;">时间:</text>
										<text style="font-size:0.8rem;padding-left: 5px;">{{item.createTime}}</text>
									</view>
									<view style="display:flex;flex-direction:row;align-items: center;">
										<uIcons class="input-uni-icon" type="compose" size="18" color="skyblue" />
										<text style="font-size:0.8rem;padding-left: 10rpx;">{{item.reportDesc}}</text>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</uGroup>
			</uSection>
		</view>
		<view v-if="showHome.orgServicePerson">
			<uSection style="margin-bottom: 10px;" title="未接工单" titleFontSize="1rem" type="line">
				<template v-slot:right>
					<view style="margin-right:20px;">
						<text style="font-size:0.8rem;color:grey;">工单数量：</text>
						<text style="font-size:0.8rem;color:orangered;font-weight: bold;">{{unconfirmOrderCount}}</text>
					</view>
				</template>
				<uni-list>
					<uni-list-item v-for="item in unconfirmOrderList" :key="item.id">
						<template v-slot:body>
							<view style="display: flex;flex-direction: column;width:100%;">
								<view
									style="display:flex;flex-direction: row;justify-content: start;align-items: center;">
									<view
										style="width:74%;display:flex;flex-direction: row;justify-content: start;align-items: center;">
										<image class="order-title-image" style="box-shadow:0 0 2px 2px lightblue"
											src="/static/images/logo_app.png" mode="widthFix">
										</image>
										<view style="margin-left:5px;">
											<text style="font-size:1rem;font-weight: bold;">{{item.rtuName}}</text>
										</view>
										<view style="margin-left:5px;">
											<text style="font-size:0.9rem;">[{{item.rtuCode}}]</text>
										</view>
									</view>
									<view style="width:26%;display:flex;flex-direction: row;justify-content: flex-end;">
										<view
											style="display:flex;flex-direction: row;justify-content: center;align-items: center; width: 100px;height:28px;margin-right: 10px;border-radius:7px;background-color:lightblue"
											@click="onOrderItemClick(item.id)">
											<uIcons class="input-uni-icon" type="compose" size="18" color="coral" />
											<view style="padding-left:5px;">
												<text style="color:black;font-size:0.7rem">接单确认</text>
											</view>
										</view>
									</view>
								</view>
								<view>
									<uIcons class="input-uni-icon" type="notification" size="18" color="skyblue" />
									<text style="font-size:0.8rem;padding-left: 5px;">报单时间:</text>
									<text style="font-size:0.8rem;padding-left: 5px;">{{item.createTime}}</text>
								</view>
								<view style="display:flex;flex-direction:row;align-items: center;">
									<image class="slot-image" src="/static/images/icon_warning.png" mode="widthFix">
									</image>
									<text style="font-size:0.8rem;padding-left: 10rpx;">{{item.orderDesc}}</text>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uSection>
		</view>
	</view>
</template>

<script>
	import {
		fakePosition,
		fakeBannerList,
		fakeNavButton,
		fakeServiceButton
	} from "@/api/mock/home.js";
	import http from '@/http/api.js';
	import uBadge from '@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue'
	import uGroup from '@/uni_modules/uni-group/uni-group.vue'
	import uSection from '@/uni_modules/uni-section/uni-section.vue'
	import uNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import uDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
	import pageNav from '@/components/page-nav/page-nav.vue';
	import uTable from '@/uni_modules/uni-table/components/uni-table/uni-table.vue'
	import uPagination from '@/uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue'
	import uBreadcrumb from '@/uni_modules/uni-breadcrumb/components/uni-breadcrumb/uni-breadcrumb.vue'
	import uList from '@/uni_modules/uni-list/components/uni-list/uni-list.vue'
	import uListItem from '@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue'
	import uIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uGroup,
			uSection,
			uNavBar,
			uDataPicker,
			pageNav,
			uList,
			uListItem,
			uTable,
			uBreadcrumb,
			uPagination,
			uIcons,
		},
		data() {
			return {
				timer: null,
				noticeDot: false,
				noticeValue: 0,
				value: 1,
				customStyle: {
					backgroundColor: '#62ed0d',
					color: '#fff'
				},
				unconfirmOrderCount: '0',
				position: '',
				positionArr: [],
				status: 'loadmore',
				list: 15,
				page: 0,
				keyword: '',
				focus: false,
				bannerList: [],
				noticeList: [],
				warningList: [],
				navButton: [],
				unconfirmOrderList: [],
				todayEquipmentInspectionList: [],
				todayOrderProcessList: [],
				rtuStatisticsList: [],
				role: {
					'admin': 'admin',
					'orgAdmin': 'org_admin',
					'orgServicePerson': 'org_servcie_person',
				},
				showHome: {
					'admin': false,
					'orgAdmin': false,
					'orgServicePerson': false,
				},
				realData: {
					rtuCount: 0,
					warningRtuCount: 0,
					orderDelayProcess: 0,
					equipmentinspectionRtu: 0,
				},
				adminNavBtnlist: [{
						name: '实时数据',
						img: '/static/images/manage/site.png',
						url: '/pages/rtu-manage/rtudata',
						badge: false,
						value: 0,
					},
					{
						name: '工单查询',
						img: '/static/images/home/order_manage.png',
						url: '/pages/check-order/admincheckorderlist',
						badge: false,
						value: 0,
					},
					{
						name: '巡检查询',
						img: '/static/images/home/my_inspection.png',
						url: '/pages/equipment-inspection/equipmentinspectionreportlist',
						badge: false,
						value: 0,
					},
					{
						name: '统计报表',
						img: '/static/images/manage/statistics.png',
						url: '/pages/report-forms/adminreport',
						badge: false,
						value: 0,
					},
					{
						name: '通讯录',
						img: '/static/images/manage/g3.png',
						url: '/pages/report-forms/contact',
						badge: false,
						value: 0,
					}
				],
				orgAdminNavBtnlist: [{
						name: '我的工单',
						img: '/static/images/home/my_order.png',
						url: '/pages/check-order/mycheckorderlist',
						badge: false,
						value: 0,
					},
					{
						name: '工单查询',
						img: '/static/images/home/order_manage.png',
						url: '/pages/check-order/checkorderlist',
						badge: false,
						value: 0,
					},
					{
						name: '巡检任务',
						img: '/static/images/home/inspection.png',
						url: '/pages/equipment-inspection/equipmentinspectionlist',
						badge: false,
						value: 0,
					},
					{
						name: '巡检查询',
						img: '/static/images/home/my_inspection.png',
						url: '/pages/equipment-inspection/equipmentinspectionreportlist',
						badge: false,
						value: 0,
					},
					{
						name: '统计报表',
						img: '/static/images/manage/statistics.png',
						url: '/pages/report-forms/report',
						badge: false,
						value: 0,
					}
				],
				orgServicePersonNavBtnlist: [{
						name: '我的工单',
						img: '/static/images/home/my_order.png',
						url: '/pages/check-order/mycheckorderlist',
						badge: false,
						value: 0,
					},
					{
						name: '工单查询',
						img: '/static/images/home/order_manage.png',
						url: '/pages/check-order/checkorderlist',
						badge: false,
						value: 0,
					},
					{
						name: '巡检任务',
						img: '/static/images/home/inspection.png',
						url: '/pages/equipment-inspection/equipmentinspectionlist',
						badge: false,
						value: 0,
					},
					{
						name: '巡检历史',
						img: '/static/images/home/my_inspection.png',
						url: '/pages/equipment-inspection/myequipmentinspectionreportlist',
						badge: false,
						value: 0,
					},
				],
			};
		},
		onLoad() {
			this.getHomeInfo();
			if (this.userInfo.role_name === this.role['admin']) {
				this.showHome.admin = true;
				this.showHome.orgAdmin = false;
				this.showHome.orgServicePerson = false;
				this.navButton = this.adminNavBtnlist;
				this.getRtuStatisticsList();
			} else if (this.userInfo.role_name === this.role['orgAdmin']) {
				this.showHome.admin = false;
				this.showHome.orgAdmin = true;
				this.showHome.orgServicePerson = false;
				this.navButton = this.orgAdminNavBtnlist;
				this.getTodayOrderProcessList();
				this.getTodayEquipmentInspectionReport();
			} else if (this.userInfo.role_name === this.role['orgServicePerson']) {
				this.showHome.admin = false;
				this.showHome.orgAdmin = false;
				this.showHome.orgServicePerson = true;
				this.navButton = this.orgServicePersonNavBtnlist;
				this.getUnconfirmOrderList();
			} else {
				this.$u.route({
					url: '/pages/login/login-account'
				})
			}

			this.timer = setInterval(() => {
				//TODO 
				this.getHomeInfo();
				if (this.userInfo.role_name === this.role['admin']) {
					this.getRtuStatisticsList();
				} else if (this.userInfo.role_name === this.role['orgAdmin']) {
					this.getTodayOrderProcessList();
					this.getTodayEquipmentInspectionReport();
				} else if (this.userInfo.role_name === this.role['orgServicePerson']) {
					this.getUnconfirmOrderList();
				}
			}, 5000);
		},
		onUnload() {
			if (this.timer != null) {
				clearTimeout(this.timer);
			}
		},
		onShow() {
			this.getHomeInfo();
			if (this.userInfo.role_name === this.role['admin']) {
				this.showHome.admin = true;
				this.showHome.orgAdmin = false;
				this.showHome.orgServicePerson = false;
				this.navButton = this.adminNavBtnlist;
				this.getRtuStatisticsList();
			} else if (this.userInfo.role_name === this.role['orgAdmin']) {
				this.showHome.admin = false;
				this.showHome.orgAdmin = true;
				this.showHome.orgServicePerson = false;
				this.navButton = this.orgAdminNavBtnlist;
				this.getTodayOrderProcessList();
				this.getTodayEquipmentInspectionReport();
			} else if (this.userInfo.role_name === this.role['orgServicePerson']) {
				this.showHome.admin = false;
				this.showHome.orgAdmin = false;
				this.showHome.orgServicePerson = true;
				this.navButton = this.orgServicePersonNavBtnlist;
				this.getUnconfirmOrderList();
			} else {
				this.$u.route({
					url: '/pages/login/login-account'
				})
			}


		},
		onHide() {
			// if (this.timer != null) {
			// 	clearTimeout(this.timer);
			// }
		},
		onReachBottom() {
			// 后续将改为与后端联动
			// if (this.page >= 3) return;
			// this.status = 'loading';
			// this.page = ++this.page;
			// setTimeout(() => {
			// 	this.list += 10;
			// 	if (this.page >= 3) this.status = 'nomore';
			// 	else this.status = 'loading';
			// 	this.newsList.push(...[{}, {}]);
			// }, 2000);
		},
		methods: {
			toOrderProcessDetail(id) {
				console.log("opne record ", id)
				var url = '/pages/check-order/orderprocessreportdetail?processId=' + id;
				uni.navigateTo({
					url: url
				})
			},
			onNoticeMoreClick() {
				uni.navigateTo({
					url: '/pages/news/noticelist'
				})
			},
			onNoticeItemClick(id) {
				console.log('执行click事件', id)
				uni.navigateTo({
					url: '/pages/news/detail?id=' + id
				})
			},
			onOrderMoreClick() {
				uni.navigateTo({
					url: '/pages/check-order/todaycheckorderlist'
				})
			},
			onOrderItemClick(id) {
				var that = this;
				uni.showModal({
					content: '确定进行接单确认操作？',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							var postData2 = {};
							postData2['id'] = id;
							http.request({
								url: '/galaxy-test/rtu/check/order/confirm',
								method: 'POST',
								data: postData2
							}).then(res => {
								console.log(res)
								if (res.success) {
									uni.showModal({
										content: '接单已成功，是否立即填报？',
										showCancel: true,
										success(res) {
											if (res.confirm) {
												var url =
													'/pages/check-order/orderprocesslist?id=' + id;
												uni.navigateTo({
													url: url
												})
											}
										}
									});
								}
							}).catch(err => {
								console.log(err)
							})
						}
					}
				});
			},
			onEquipmentinspectionMoreClick() {
				uni.navigateTo({
					url: '/pages/equipment-inspection/todayequipmentinspectionreportlist'
				})
			},
			onEquipmentInspectionItemClick(id) {
				var url = '/pages/equipment-inspection/equipmentinspectionreportdetail?id=' + id;
				uni.navigateTo({
					url: url
				})
			},
			getHomeInfo() {
				const that = this;
				http.request({
					url: '/galaxy-test/real/data/home/info',
					method: 'GET'
				}).then(res => {
					if (res.data != null) {
						that.realData = res.data;
						if (that.userInfo.role_name === that.role['orgServicePerson']) {
							if (that.realData.myOrderCount > 0) {
								that.navButton[0].badge = true;
								that.navButton[0].value = that.realData.myOrderCount;
							} else {
								that.navButton[0].badge = false;
							}
							if (that.realData.equipmentInspectionCount > 0) {
								that.navButton[2].badge = true;
								that.navButton[2].value = that.realData.equipmentInspectionCount;
							} else {
								that.navButton[2].badge = false;
							}
						} else if (that.userInfo.role_name === that.role['orgAdmin']) {
							if (that.realData.myOrderCount > 0) {
								that.navButton[0].badge = true;
								that.navButton[0].value = that.realData.myOrderCount;
							} else {
								that.navButton[0].badge = false;
							}
							if (that.realData.equipmentInspectionCount > 0) {
								that.navButton[2].badge = true;
								that.navButton[2].value = that.realData.equipmentInspectionCount;
							} else {
								that.navButton[2].badge = false;
							}
						} else if (that.userInfo.role_name === that.role['admin']) {

						}
						that.noticeDot = res.data.hasNewNotice;
						that.noticeValue = res.data.newNoticeCount;
					}

				}).catch(err => {
					console.log(err)
				})
			},
			getLastNotice() {
				const that = this;
				http.request({
					url: '/galaxy-test/notice/last/list',
					method: 'GET'
				}).then(res => {
					if (res.data != null) {
						const len = res.data['length'];
						var list = [];
						for (var i = 0; i < len; i++) {
							let dict = res.data['' + i];
							list.push(dict);
						}
						that.noticeList = list;
					}

				}).catch(err => {
					console.log(err)
				})
			},
			getRtuStatisticsList() {
				const that = this;
				http.request({
					url: '/galaxy-test/rtu/base/statistics',
					method: 'GET'
				}).then(res => {
					if (res.data != null) {
						that.rtuStatisticsList = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getUnconfirmOrderList() {
				const that = this;
				http.request({
					url: '/galaxy-test/rtu/check/order/unconfirm/list',
					method: 'GET'
				}).then(res => {
					if (res.data != null) {
						that.unconfirmOrderList = res.data;
						that.unconfirmOrderCount = "" + res.data.length;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getTodayOrderProcessList() {
				const that = this;
				http.request({
					url: '/galaxy-test/rtu/check/order/process/today/list',
					method: 'GET'
				}).then(res => {
					if (res.data != null) {
						that.todayOrderProcessList = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getTodayEquipmentInspectionReport() {
				const that = this;
				http.request({
					url: '/galaxy-test/equipment/inspection/report/today/list',
					method: 'GET'
				}).then(res => {
					if (res.data != null) {
						that.todayEquipmentInspectionList = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			changePicker(e) {
				console.log(this.pickerArr[e.detail.value].name);
				this.position = this.pickerArr[e.detail.value].name;
			},
			handleFocus() {
				this.focus = !this.focus;
			},
			handleSearchBlur() {
				this.focus = false;
			},
		}
	};
</script>

<style lang="scss">
	$nav-height: 75px;

	.order-title-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		// margin-right: 10px;
		width: 20px;
		height: 20px;
		border-radius: 50%;

	}

	.uni-badge-left-margin {
		margin-left: 0px;
	}

	.uni-badge-absolute {
		margin-left: 40px;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		// margin-right: 10px;
		width: 20px;
		height: 20px;
	}

	.nav-item-name {
		font-size: 0.9rem;
		font-weight: bold;
	}

	.logo {
		flex-shrink: 0;
		width: 100rpx;
		height: auto;
	}

	.nav-title {
		height: $nav-height;
	}

	.nav-title-left {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.nav-title-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		// background-color: #f8f8f8;
		// height: $nav-height;
		// border-radius: 15px;
		// padding: 0 15px;
		flex-wrap: nowrap;
		// margin: 7px 0;
		// line-height: $nav-height;
	}

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

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

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
		overflow: hidden;

	}

	.head {
		position: relative;
		top: 0;
		left: 0;
		z-index: 1;
	}



	.head-bg {
		position: absolute;
		left: 0px;
		top: 75px;
		z-index: -1;
		width: 750rpx;
		height: 270rpx;
		background: #0bb9c8;
	}

	.nav-wrap {
		width: 100%;
		padding: 0 22rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.picker-box {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #ffffff;

			.arrow {
				margin-left: 10rpx;
			}
		}

		.logo {
			flex-shrink: 0;
			width: 100rpx;
			height: auto;
		}

		.search-input {
			width: 300rpx;
			height: 50rpx;
		}

		.tool {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.icon {
				height: auto;
			}

			.search-icon {
				width: 40rpx;
				margin-right: 34rpx;
			}

			.message-icon {
				width: 32rpx;
				margin-right: 27rpx;
			}

			.qr-icon {
				width: 37rpx;
			}
		}
	}

	.swiper-box {
		margin: 50rpx auto 0;
		width: 710rpx;
		height: 253rpx;

		.swiper-item {
			width: 100%;
			height: 100%;

			.banner {
				width: 100%;
				height: 100%;
			}
		}
	}

	.nav {
		margin: 0rpx 0;
		box-sizing: border-box;
		padding: 0 10rpx;


		&-item {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 130rpx;

			&-img {
				width: 80rpx;
				height: 80rpx;
			}

			&-name {
				font-size: 0.7rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #585b61;
			}
		}
	}


	.video-box {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		width: 100%;

		.video-body {
			display: flex;
			justify-content: center;
			flex-direction: row;
		}

		.video-title {
			display: flex;
			justify-content: center;
			flex-direction: row;

			.text {
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				width: 640rpx;
				// flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

	.notice-box {
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 20px 20px 20px 20px;
		margin: 0 20rpx;
		padding: 30rpx 20rpx;

		.img {
			width: 75rpx;
			height: auto;
			margin-right: 36rpx;
			margin-left: 10rpx;
		}

		.notice-info {
			flex: 1;

			.notice-cell:first-of-type {
				margin-bottom: 15rpx;
			}
		}

		.notice-cell {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #585b61;

			.icon {
				width: 63rpx;
				margin-right: 18rpx;
			}

			.text {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

	.service-box {
		background: #ffffff;
		border-radius: 20px 20px 20px 20px;
		margin: 30rpx 20rpx 0;
		padding: 0rpx 20rpx;

		.service-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 120rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #585b61;

			.img {
				width: 70rpx;
				height: auto;
			}
		}
	}



	.more {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #a6abb5;
	}

	.orders {
		background: #ffffff;
		border-radius: 20px 20px 20px 20px;
		margin: 30rpx 20rpx 60rpx;
		padding: 30rpx 20rpx;

		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ctitle {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #585b61;
			}

			.more {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #a6abb5;
			}
		}

		.orders-list {
			margin-top: 30rpx;

			.orders-item {
				&:not(:last-of-type) {
					padding: 0 0 30rpx;
					margin-bottom: 30rpx;
					border-bottom: 1px solid #eeeeee;
				}

				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					flex: 1;
					height: 160rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.info {
						min-width: 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #585b61;
						line-height: 36rpx;
					}

					.date {
						display: flex;
						align-items: center;

						.icon {
							width: 21rpx;
							height: 21rpx;
							margin-right: 9rpx;
						}

						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #a6abb5;
					}
				}

				// .img {
				// 	flex-shrink: 0;
				// 	width: 252rpx;
				// 	height: 160rpx;
				// 	border-radius: 20rpx;
				// 	background-color: #82848a;
				// }
			}
		}


	}
</style>