445 lines
12 KiB
Vue
445 lines
12 KiB
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
|
||
}
|
||
})
|
||
}
|
||
// var player = polyvPlayer({
|
||
// wrap: "#player",
|
||
// width: 400,
|
||
// height: 300,
|
||
// vid: vid, //云点播平台的视频唯一id。
|
||
// });
|
||
},
|
||
// 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> |