qrcode-app/pages/apply/viewVideo.vue

<template>
	<!-- 视频查看  待开发-->
	<view class="content">
		<view class="container">
			<view class="form-sub">
				<u-form :model="model" ref="uForm" label-width="90px" class="demo-ruleForm" size="mini">
					<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">隐患信息</view>
					<u-form-item label="区域名称" prop="RISK_AREA_NAME" borderBottom ref="item1"
						@click="handleShowSheet({title: '区域名称'})">
						<u--input disabled v-model="model.RISK_AREA_NAME" border="none" suffixIcon="arrow-right"
							customStyle="margin:0px;display:flex;padding:3px 9px"
							suffixIconStyle="font-size:12px"></u--input>
					</u-form-item>
					<u-form-item label="包含下级区域" prop="ISDOWN" borderBottom>
						<u-radio-group v-model="model.ISDOWN" style="display: flex;flex-direction: row"
							placement="column">
							<u-radio :customStyle="{marginBottom: '4px',marginTop: '4px' ,marginLeft:'15px' }"
								v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name"
								@change="doTrueOrFalse()" />
						</u-radio-group>
					</u-form-item>
					<!-- <u-form-item borderBottom> -->
					<!-- <div id="player" v-if="this.ISLOCAL"></div>
					<div id="playerL" v-else>
						<video v-if="!this.ISLOCAL" id="myVideo" :src="this.FILE_PATH" controls></video>
					</div> -->
					</u-form-item>
				</u-form>

				<!-- 动态加载隐患信息 -->
				<u-sticky offset-top="20">
					<view class="sub-form">
						<view class="sub-form-wrap">
							<u--form labelPosition="left" labelWidth="auto" labelAlign="center"
								errorType="border-bottom" style="margin-bottom: 50px;" ref="sForm">
								<uni-collapse :border="false" accordion>
									<uni-card style="margin-bottom: 5px;" margin="0" spacing="0" :is-shadow="false"
										v-for="(item, index) in model.ListShow">
										<uni-collapse-item :title="(index+1) + '. ' + item.Nav_Viedo.NAME" name="1">
											<u-form-item label="区域名称" prop="Nav_Area.NAME" borderBottom>
												<u--input disabled disabledColor="#fff" v-model="item.Nav_Area.NAME"
													border="none" inputAlign="right"></u--input>
											</u-form-item>
											<u-form-item label="视频名称" prop="Nav_Viedo.NAME" borderBottom>
												<u--input disabled disabledColor="#fff" v-model="item.Nav_Viedo.NAME"
													border="none" inputAlign="right"></u--input>
											</u-form-item>
											<u-form-item v-if="item.Nav_Viedo.ISLOCAL" borderBottom>
												<video id="myVideo" :src="item.Nav_Viedo.FILE_PATH" controls></video>
											</u-form-item>
											<u-form-item v-else borderBottom style="text-align: center;">
												<button type="primary" class="btnSubDel" @click="startPlay(item)"
													style="width: 35%;">播放</button>
											</u-form-item>
										</uni-collapse-item>
									</uni-card>
								</uni-collapse>
							</u--form>

						</view>
					</view>
				</u-sticky>
				<query-selector :show="selectorInfo.showPopup" :defaultChecked="selectorInfo.defaultChecked"
					:title="selectorInfo.title" :lists="selectorInfo.dataLists" @search="handleSearch"
					@select="handleSelected" @close="selectorInfo.showPopup=false" :total="selectorInfo.totalCount" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderPagedRiskArea,
		PagedVideo
	} from '../../services/apply'
	import {
		initFilter,
		extendRule
	} from '../../utils/common'
	import config from '../../config/common';

	export default {
		data() {
			return {
				OrgId: '',
				pageIndex: 0,
				pageSize: 20,
				total: 0,
				// vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
				// vid: '', // '3cbccb39d99458bbef9fafad687a63ac_3',
				// FILE_PATH: '',
				// ISLOCAL: true,
				model: {
					RISK_AREA_NAME: '请选择区域',
					RISK_AREA_ID: '',
					ISDOWN: '否',
					SchedulingType: '',
					COUNT_WORKER: '',
					COUNT_LEVEL: '',
					START_TIME: '',
					END_TIME: '',
					SchedulingNEXTTIME: '',
					LISTPERSON_SCHEDULING: [{
						NAME: ''
					}],
					LISTUSER_LEAVE: [{
						NAME: ''
					}],
					ListShow: []
				},
				radiolist: [{
					value: false,
					name: '否'
				}, {
					value: true,
					name: '是'
				}],
				selectorInfo: {
					showPopup: false,
					totalCount: 0,
					title: '班组名称',
					// itemData: {},
					index: 0,
					dataLists: [],
					defaultText: '',
					defaultValue: '',
					name: '',
					defaultChecked: []
				},
			}
		},
		onLoad(option) {
			if (option.RISK_AREA_ID)
				this.model.RISK_AREA_ID = option.RISK_AREA_ID // 'FA89F8DA-0B46-4665-A8DD-3675829F6D6F'
			this.OrgId = option.OrgId // 'B043B28B-BBC3-C452-6052-4FBA1457ABFA'
			if (this.model.RISK_AREA_ID != undefined && this.model.RISK_AREA_ID != '') {
				
				// this.PagedCheckMain()//扫二维码 默认赋值
				const json = initFilter(this.OrgId, null, "NAME", 0, 1);
				json.IgnoreDataRule = true
				json.Limit = 2
				extendRule(json, "ID", 1, this.model.RISK_AREA_ID)
				OrderPagedRiskArea(json).then(res => {
					if (res != undefined && res.Data.length > 0) {
						this.model.RISK_AREA_NAME = res.Data[0].NAME
					}
				})
				
				this.pageIndex = 0
				this.PagedVideo();
			}
		},
		// mounted() {
		// 	this.loadPlayerScript(this.loadPlayer);
		// },
		// onReady() {
		// 	//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		// 	this.$refs.uForm.setRules(this.rules)
		// },
		methods: {
			PagedVideo(paginate) {
				this.pageIndex++
				const json = initFilter(this.OrgId, this.model.RISK_AREA_ID, "CREATE_TIME", 1, this.pageIndex, ((
					this.model.ISDOWN == '否' || this.model.ISDOWN == '') ? false : true))
				json.IgnoreDataRule = true
				json.Limit = this.pageSize
				json.SelectField = ["Nav_Area.NAME", "Nav_Viedo.NAME", "Nav_Viedo.ISLOCAL", "Nav_Viedo.FILE_PATH"]
				PagedVideo(json).then(res => {
					if (res.IsSuccessful) {
						this.total = res.TotalCount
						// this.model.ListShow = res.Data
						if (res.Data && res.Data.length > 0) {
							res.Data.forEach(e => {
								if (e.Nav_Viedo.ISLOCAL) {
									e.Nav_Viedo.FILE_PATH = config.uni_app_web_source_url + e.Nav_Viedo
										.FILE_PATH
								}
							})
						}


						if (paginate) {
							this.model.ListShow = this.model.ListShow.concat(res.Data)
						} else {
							this.model.ListShow = res.Data
						}
						// this.loadPlayerScript(this.loadPlayer);//保利威信息对接
						if (res.TotalCount == 0)
							uni.$showMsg("未获取到数据", 'none')
						// else {
						// 	for (let i = 0; i < this.model.ListShow.length; i++) {
						// 		if (!this.model.ListShow[i].Nav_Viedo.ISLOCAL)
						// 			this.loadPlayerP(i,this.model.ListShow[i].Nav_Viedo.FILE_PATH);
						// 	}
						// }
					} else {
						this.model.ListShow = [{
							CHECKCONTENT: '',
							DESCREPTION: ''
						}]
					}
				})
			},

			doTrueOrFalse() {
				this.pageIndex = 0
				if (this.model.RISK_AREA_ID != undefined && this.model.RISK_AREA_ID.length > 0)
					this.PagedVideo();
			},

			closePicker() {
				this.comPickerInfo = {
					showSheet: false,
					columns: [],
					title: '',
					name: '',
					formIndex: undefined
				}
			},

			//显示组件
			handleChange() {
				this.selectorInfo.showPopup = true
				this.selectorInfo.title = '班组名称'
				this.handleSearch()
			},

			//数据加载
			handleSearch(val, pageIndex) {
				var p = {
					name: this.selectorInfo.name,
					title: this.selectorInfo.title,
					val: val,
					pageIndex: pageIndex
				}
				this.handleShowSheet(p)
			},
			async handleShowSheet(p) {
				this.pageIndex = 0
				var defaultChecked = []
				const json = initFilter(this.OrgId, null, "NAME", 0, (p.pageIndex ?? 1));
				json.IgnoreDataRule = true
				json.Limit = 20
				if (p.val) {
					extendRule(json, "NAME", 9, p.val)
				}
				let dataSelect = await OrderPagedRiskArea(json).then(res => {
					this.selectorInfo.totalCount = res.TotalCount
					if (res != undefined && res.Data.length > 0) {
						for (let i = 0; i < res.Data.length; i++) {
							res.Data[i].name = res.Data[i].NAME
							res.Data[i].code = res.Data[i].CODE
						}
					}
					return res.Data
				})

				if (defaultChecked == null)
					defaultChecked = []
				if (dataSelect.length) {
					this.selectorInfo = {
						totalCount: this.selectorInfo.totalCount,
						showPopup: true,
						title: p.title,
						name: p.name,
						dataLists: dataSelect,
						defaultChecked: defaultChecked
					}
				} else {
					// 暂无数据
				}
			},
			startPlay(item) {
				var vid = ''
				if (item.Nav_Viedo.FILE_PATH.indexOf('=') > -1)
					vid = item.Nav_Viedo.FILE_PATH.split('=')[1]
				if (vid.length > 0) {
					uni.navigateTo({
						url: 'viewVideoplyplayer?vid=' + vid
					});
				}
			},
			handleSelected(e) {
				this.selectorInfo.showPopup = false
				this.model.RISK_AREA_NAME = e.NAME
				this.model.RISK_AREA_ID = e.ID
				this.PagedVideo()
				// this.WorkerScheduling()
			},
			// playVideo(FILE_PATH) {
			// 	var vid = ''
			// 	if (FILE_PATH.indexOf('=') > -1)
			// 		vid = FILE_PATH.split('=')[1]
			// 	if (vid.length > 0) {
			// 		uni.navigateTo({
			// 			url: 'ext-ply-player?id=' + vid
			// 		});
			// 	}
			// },

			// loadPlayerScript(callback) {
			// 	if (!window.polyvPlayer) {
			// 		const myScript = document.createElement('script');
			// 		myScript.setAttribute('src', this.vodPlayerJs);
			// 		myScript.onload = callback;
			// 		document.body.appendChild(myScript);
			// 	} else {
			// 		callback();
			// 	}
			// },
			// loadPlayer() {
			// 	const polyvPlayer = window.polyvPlayer;
			// 	this.player = polyvPlayer({
			// 		wrap: '#player',
			// 		width: 300,
			// 		height: 300,
			// 		vid: this.vid,
			// 	});
			// },

			// loadPlayerScriptIni() {
			// 	if (!window.polyvPlayer) {
			// 		const myScript = document.createElement('script');
			// 		myScript.setAttribute('src', this.vodPlayerJs);
			// 		// myScript.onload = callbackP(index);
			// 		document.body.appendChild(myScript);
			// 	}
			// },
			// loadPlayerScriptP(index, callbackP) {
			// 	debugger
			// 	if (!window.polyvPlayer) {
			// 		const myScript = document.createElement('script');
			// 		myScript.setAttribute('src', this.vodPlayerJs);
			// 		myScript.onload = callbackP(index);
			// 		document.body.appendChild(myScript);
			// 	} else {
			// 		callbackP(index);
			// 	}
			// },
			// loadPlayerP(index, path) {
			// 	const polyvPlayer = window.polyvPlayer;
			// 	debugger
			// 	var eleId = '#player' + index
			// 	var eVid = path.split('=')[1]
			// 	this.player = polyvPlayer({
			// 		wrap: eleId,
			// 		width: 300,
			// 		height: 300,
			// 		vid: eVid,
			// 	});
			// }

		},
		onReachBottom() {
			if (this.total > this.pageSize * this.pageIndex)
				this.PagedVideo(true)
		},
		// destroyed() {
		// 	if (this.player) {
		// 		this.player.destroy();
		// 	}
		// }
	}
</script>

<style>
	.content {
		background-color: #f4f7ff;
		width: 100%;
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px - 50px); // 非APP平台下生效
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh); // APP平台下生效
		/* #endif */
	}

	.container {
		padding: 20px 16px 10px 16px;
	}

	.form-sub {
		/* margin: 20px 16px 10px 16px; */
		/* border: 1px solid #EBEEF5; */
		padding: 20px 10px 10px 10px;
		/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
		background-color: #ffffff;
		border-radius: 10px;
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-cell__title-text {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-textarea {
		padding: 9px 9px 25px 9px;
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm-thr>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-cell__title-text {
		font-size: 14px;
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px 16px;
		box-sizing: border-box;
		background: #f4f7ff;
		z-index: 999;
	}
</style>