hldy_app_mini/component/public/severcard.vue

<template>
	<view>
		<view class="fixed-card" :style="openleft?{}:{right:`-34vw`}" v-if="qcobj.startTime">
			<view class="fixed-card-left">
				<image class="card-left-img" :style="!qcobj?.previewFile?'width: 450rpx':''"
					:src="qcobj?.previewFile? 'https://www.focusnu.com/media/upFiles/' + qcobj?.previewFile: `/static/index/newindex/wendu/2.png`" mode="aspectFill"/>
				<view class="">
					{{qcobj.directiveName}}
				</view>
			</view>
			<view>
				<view class="big-time">
					{{qcobj.startTime?.slice(11, 16) }} - {{qcobj.endTime?.slice(11, 16) }}
				</view>
				<view class="icon-people">
					<image class="people-img" src="/static/index/newindex/leftmenu/iconleft.png" />
					<text v-if="qcobj.optType == 1" style="white-space: nowrap;">单人执行</text>
					<text v-if="qcobj.optType == 2" style="white-space: nowrap;">协助执行</text>
					
					<image style="margin-left: 1vw;" class="people-img"
						src="/static/index/newindex/leftmenu/iconright.png" />
					
					<text v-if="qcobj.optType == 1">{{qcobj.employeeName}}</text>
					<text v-if="qcobj.optType == 2">{{qcobj.optNames}}</text>
				</view>
				<view class="icon-button">
					<view class="" :class="qcobj.izStart=='N'?'button-right':'button-left'"  @click="start()">
						开始服务
					</view>
					<view :class="(qcobj.izFinish=='N'&&qcobj.izStart=='Y')?'button-right':'button-left'" @click="end()">
						结束服务 
					</view>
				</view>
			</view>
			<view class="left-open" @click="openleft = !openleft">
				<image :style="openleft?{}:{transform: `rotate(180deg)`}" class="open-img"
					src="/static/index/newindex/leftmenu/openleft.png" />
			</view>
		</view>
		
		<tanchuang :show="open>0" font="是否结束服务指令？" @back="open = 0" @right="ends()"> </tanchuang>
	</view>
</template>

<script setup lang="ts">
	 import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent,watch } from 'vue';
	 import { queryOrderlist,startDirectiveServe,finishDirectiveServe,queryOrderInfoList } from '@/pages/procurement/api/lunpan.js'
	 import { startOrder,endOrder,editSubPicPath,editSubMp4,queryEmpList,transferOrder,assistOrder} from '@/pages/NursingNew/component/doctorask/api/api.js'
	 const qcobj = ref({})
	 const openleft = ref(true)
	 const open = ref(0);
	 const zdcont = ref('');
	 const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	 const emit = defineEmits([ 'start' ,'end'])
	 const form = reactive({
	 	pageNo: 1,
	 	pageSize: 10,
	 	employeeId:uni.getStorageSync('userInfo').employessId, 
	 	nuId:uni.getStorageSync('nuId'),
		workType:2
	 })
	 onMounted(()=>{
		 firstgetqueryCgdList()
	 })
	 const firstgetqueryCgdList = () => {
	 	queryOrderlist(form).then(res => {
	 		if(res.result.records.length>0){
				qcobj.value = res.result.records[0];
				openleft.value = qcobj.value.izStart=='Y'?true:false;
	 			// clickLeftMenu(0,res.result.records[0])
	 		}else{
	 			qcobj.value = {};
	 		}
	 	})
	 }
	 const clickLeftMenu = (index : any, item : object) => {
	 	queryOrderInfoList({ mainId: item.id }).then(res => {
	 		if(res.result.length>0){
	 			qcobj.value = res.result[0];
				openleft.value = qcobj.value.izStart=='Y'?true:false;
	 		}else{
	 			qcobj.value = {};
	 		}
	 	})
	 }
	 const start = () => {
		 if(qcobj.value.izStart!='N'){return}
	 	startOrder({ id: qcobj.value.id }).then(res => {
	 		if (res.success) {
	 			qcobj.value.izStart = 'Y';
	 			clickLeftMenu(0,{id:qcobj.value.mainId})
	 		} else {
	 			uni.showToast({
	 				icon: 'none',
	 				title: res.message
	 			})
	 		}
	 	})
	 }
	 // const end = () => {
		//  if(qcobj.value.izFinish!='N'&&qcobj.value.izStart!='Y'){return}
	 // 	finishDirectiveServe({ id: qcobj.value.id }).then(res => {
	 // 		if (res.success) {
	 // 			qcobj.value.izFinish = 'Y';
	 // 			firstgetqueryCgdList()
	 // 		} else {
	 // 			uni.showToast({
	 // 				icon: 'none',
	 // 				title: res.message
	 // 			})
	 // 		}
	 // 	})
	 // }
	const end = ()=>{
		if(qcobj.value.izStart=='Y'&& qcobj.value.izFinish=='N'){
			open.value=3;
		}
	}
	const ends = ()=>{
			endOrder({id:qcobj.value.id}).then(res=>{
			if(res.success){
				open.value=0;
				firstgetqueryCgdList()
			}else{
				
			}
		})
		
	}
	defineExpose({
		 firstgetqueryCgdList
	})
</script>

<style lang="less" scoped>
.left-open {
		position: absolute;
		left: -1.5vw;
		top: 50%;
		transform: translateY(-50%);
		width: 3vw;
		height: 5vw;
		border: 1rpx solid #B8C4DA;
		background-color: #F2F7FD;
		z-index: 999;
		border-radius: 3vw;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.5s ease;
	
		.open-img {
			width: 3vw;
			height: 3vw;
		}
	}
	.fixed-card {
		position: fixed;
		right: 1vw;
		top: 2vh;
		width: 35vw;
		height: 28vh;
		background-color: rgba(239, 246, 255, 0.95);
		border-radius: 1.5vw;
		border: 1rpx solid #638DFF;
		box-shadow: 0 2rpx 6rpx #A0B9FF;
		display: flex;
		align-items: center;
		transition: all 0.5s ease;
		z-index: 999;
	
		.fixed-card-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 2vw;
			.card-left-img {
				width: 12vw;
				height: 8vw;
			}
		}
	
		.big-time {
			font-weight: 600;
			font-size: 1.8vw;
			padding-left: 1vw;
		}
	
		.icon-people {
			display: flex;
			margin: 0.3vw 0;
			color: #555555;
			width: 18vw;
			padding-left: 1vw;
			.people-img {
				width: 1.5vw;
				height: 1.5vw;
				margin-right: 0.3vw;
				margin-top: 0.1vw;
			}
		}
	
		.icon-button {
			display: flex;
			margin-top: 1vw;
			font-size: 1.5vw;
			width: 18vw;
			justify-content: space-around;
	
			.button-left {
				width: 8vw;
				height: 3.3vw;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.2vw;
				border: 1rpx solid #C7D2E4;
				color: #333333;
			}
	
			.button-right {
				width: 8vw;
				height: 3.3vw;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.2vw;
				border: 1rpx solid #5AAEFF;
				color: #249BFA;
				background: linear-gradient(to bottom, #fff, #D1EAFF);
			}
		}
	}
</style>