itsm-wx-handle/pages/repair/home.vue

<template>
	<view class="home">
		<view class="home_item" v-if="isDept.valueconfig==1" @click="repairsView(1)">
		  <view class="title">科室报修</view>
		  <view class="content">
				<view>
					<view class="con-title">处理中</view>
					<view class="con-value">{{repairData.deptHandlerCount}}</view>
				</view>
				<view>
					<view class="con-title">待评价</view>
					<view class="con-value">{{repairData.deptCloseCount}}</view>
				</view>
				<view>
					<view class="con-title">本月维修费用（元）</view>
					<view class="con-value-gr">{{repairData.deptCurrentMonthPrice || 0}}</view>
				</view>
		  </view>
		</view>
		<view class="home_item" @click="repairsView(0)">
		  <view class="title">我的报修</view>
		  <view class="content">
				<view>
					<view class="con-title">处理中</view>
					<view class="con-value">{{repairData.userCloseCount}}</view>
				</view>
				<view>
					<view class="con-title">待评价</view>
					<view class="con-value">{{repairData.userHandlerCount}}</view>
				</view>
		  </view>
		</view>
		<view class="home_item">
			<uni-notice-bar show-icon scrollable background-color="#ffffff" color="#000"
			:text="noticeData" />
		</view>
		<view class="home_item home-disp">
			<view class="bottom-left" @click="addRepairs">
				<view class="bottom-left-box">
					<text class="newicon newicon-kuaisubaoxiu icon"></text>
					<view>快速报修</view>
				</view>
			</view>
			<view class="bottom-right mar-t-20">
				<view class="bottom-right-item" v-if="isRepair.valueconfig==1" @click="scanCodes">
					<text class="newicon newicon-saoma icon"></text>
					<view class="name1">扫资产报修</view>
				</view>
				<view class="bottom-right-item" @click="repository">
					<text class="newicon newicon-zhishiku1 icon"></text>
					<view class="name2">知识库</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import { SM } from "@/http/http.js"
	import { ref, reactive } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { api_systemConfiguration, api_getNotice, api_getCount } from "@/http/api.js"
	import { useSetTitle } from '@/share/useSetTitle.js'
	import { repositoryListSearchStore } from '@/stores/repositorySearch'
	import { useSetTabbar } from '@/share/useSetTabbar.js'
	useSetTitle();
	const { setTabbar }  = useSetTabbar();
	// 数据
	const isDept = ref({})
	const isRepair = ref({})
	const noticeData = ref('')
	const repairData = ref({})
	const repositorySearchStore = repositoryListSearchStore();
	
	// 知识库
	function repository(){
		repositorySearchStore.clearRepositoryListSearchData()
		uni.navigateTo({
		  url: `/pages/repository/repository?type=view`
		})
	}
	
	// 报修列表
	function repairsView(type){
	  uni.navigateTo({
	    url: '/pages/repair/repairsList?type='+type
	  })
	}
	
	// 获取公告
	function getNotice(){
		api_getNotice({
			idx: 0,
			sum: 3,
			type:'wxRepair',
			notice: {
			  status: 1
			}
		}).then(res=>{
			uni.hideLoading();
			getHtml(res.list[0])
		})
	}
	
	// 获取报修数量
	function getCount(){
		uni.showLoading({
		  title: "加载中",
		  mask: true,
		});
		api_getCount({}).then(res=>{
			repairData.value = res.data
			getNotice()
		})
	}
	
	// 快速报修
	function addRepairs(){
		if(isDept.value.valueconfig==0 && isRepair.value.valueconfig==0){
			uni.showToast({
				icon: 'none',
			  title: '请先开启科室报修或公共报修'
			});
			return
		}
		uni.navigateTo({
		  url: '/pages/repair/rapidRep'
		})
	}
	
	// 扫资产报修
	function scanCodes(){
		uni.showToast({
			icon: 'none',
		  title: '暂未开通'
		});
		return;
		SM().then((res) => {
		  let postData = {
		    code: ress1,
		    account: loginUserStore.loginUser.user.account,
		  };
		})
	}
	
	// 获取文本内容
	function getHtml(data) {
	  const tempDiv = document.createElement('div');
	  tempDiv.innerHTML = data.content;
		noticeData.value = tempDiv.textContent || tempDiv.innerText || '';
	}
	
	onLoad((option) => {
		// 巡检tabbar
		for(let i = 0; i<5; i++){
			setTabbar(i)
		}
	})
	
	onShow((option) => {
		getCount()
		let data = JSON.parse(uni.getStorageSync('sysData'))
		isDept.value = data.find(i=>i.keyconfig=='deptRepair')
		isRepair.value = data.find(i=>i.keyconfig=='cmdbRepair')
	})
	

</script>

<style lang="scss" scoped>
	.home{
		height: 100vh;
		padding: 20rpx;
		background: #fff;
		.home_item{
			padding: 20rpx;
			box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			.title{
			  font-size: 26rpx;
			  color: $uni-primary;
			  padding-left: 18rpx;
			  position: relative;
				margin-bottom: 20rpx;
			  &:before{
			    content: '';
			    width: 8rpx;
			    height: 25rpx;
			    background-color: $uni-primary;
			    position: absolute;
			    left: 0;
			    top: 50%;
			    transform: translateY(-50%);
			  }
			}
			.content{
				display: flex;
				align-items: center;
				justify-content: space-around;
				text-align: center;
				.con-title{
					color: #949494;
					font-size: 24rpx;
					margin-bottom: 15rpx;
				}
				.con-value{
					color: #000;
					font-size: 50rpx;
				}
				.con-value-gr{
					color: #49B856;
					font-size: 50rpx;
				}
			}
			.uni-noticebar{
				margin: 0 !important;
				padding: 0 !important;
			}
		}
		.home-disp{
			display: flex;
			justify-content: space-around;
			.bottom-left{
				height: 380rpx;
				background: linear-gradient( 269deg, #54B99C 0%, #7AC481 100%);
				border-radius: 10rpx;
				flex: 1.5;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				margin-top: 20rpx;
				.bottom-left-box{
					text-align: center;
					.icon{
						font-size: 100rpx;
						position: relative;
						top: -20rpx;
					}
				}
			}
			.mar-t-20{
				margin-top: 20rpx;
			}
			.bottom-right{
				flex: 2;
				.bottom-right-item{
					height: 175rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					border: 2rpx solid #6FC073;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.icon{
						font-size: 50rpx;
						color: #6FC073;
						position: absolute;
						left: 60rpx;
					}
					.name1{
						font-size: 32rpx;
						position: absolute;
						right: 50rpx;
					}
					.name2{
						font-size: 32rpx;
						position: absolute;
						right: 80rpx;
					}
				}
			}
		}
	}
</style>