Skip to content

蒋秀川 / miniProject

Go to a project
Commit 9e26f6e8 by 李乾广
Options

修改bug

1 parent f63b2fbd
Expand all
Inline Side-by-side
Showing 5 changed files with 161 additions and 13 deletions
h5/README.md 0 → 100644
# project
> A Vue.js project
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
#萤石播放视频截图功能需要找到源码，把下载动作拦截掉,方法是JS_CapturePicture（），重排代码后位置大概在48405行，z.oTool.downloadFile（）方法注释掉
#如果萤石视频流切换路由时，视频流没有停掉，是因为js中代码一个判断报错，将代码21403行，方法hide中代码换成最简单的获取dom方法 document.getElementById(this.jSPlugin.id, "-ez-ptz-item").style = "display: none";
#h5端萤石视频截图报错，需要将预计59500多行的this.getPic方法中的var a中的 rect:this.stYUVRect 改为 rect: {...this.stYUVRect}
\ No newline at end of file \ No newline at end of file
h5/package.json
...@@ -10,11 +10,14 @@ ...@@ -10,11 +10,14 @@
"axios": "^0.26.1", "axios": "^0.26.1",
"blueimp-md5": "^2.16.0", "blueimp-md5": "^2.16.0",
"echarts": "^5.3.2", "echarts": "^5.3.2",
"ezuikit-js": "^0.5.3", "ezuikit-js": "^7.7.0",
"jquery": "^3.7.1",
"moment": "^2.29.4",
"postcss-px-to-viewport": "^1.1.1", "postcss-px-to-viewport": "^1.1.1",
"rollup-plugin-copy": "^3.4.0", "rollup-plugin-copy": "^3.4.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-param-parser": "^0.0.2", "url-param-parser": "^0.0.2",
"vant": "^3.0.0", "vant": "^3.6.12",
"vconsole": "^3.14.6", "vconsole": "^3.14.6",
"vue": "^3.0.6", "vue": "^3.0.6",
"weixin-js-sdk": "^1.6.0" "weixin-js-sdk": "^1.6.0"
......
h5/src/App.vue
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
<livePlayer ref="livePlayerRef" :params="paramObj"></livePlayer> <livePlayer ref="livePlayerRef" :params="paramObj"></livePlayer>
<div class="tour-btns" v-if="paramObj.type=='titem'"> <div class="tour-btns" v-if="paramObj.type=='titem'">
<van-button @click="navBackTour" type="primary">返回上一页</van-button> <van-button @click="navBackTour" type="primary">返回上一页</van-button>
<van-button @click="pictureBtn" type="primary">确认并截图</van-button> <van-button @click="goCaptureImg" type="primary">确认并截图</van-button>
</div> </div>
<div class="tour-btns" v-else-if="paramObj.type=='view'"> <div class="tour-btns" v-else-if="paramObj.type=='view'">
<van-button block @click="navBack" type="primary">查看其他监控点</van-button> <van-button block @click="navBack" type="primary">查看其他监控点</van-button>
...@@ -102,11 +102,21 @@ ...@@ -102,11 +102,21 @@
<span v-else @click="collectGate"> <span v-else @click="collectGate">
<van-icon class="iconMargin" name="star-o" />收藏 <van-icon class="iconMargin" name="star-o" />收藏
</span> </span>
<span @click="pictureBtn"> <span @click="goCaptureImg">
<van-icon class="iconMargin" name="photograph" />巡检 <van-icon class="iconMargin" name="photograph" />巡检
</span> </span>
</div> </div>
</div> </div>
<!-- 监控点选择器 -->
<van-popup v-model:show="pointPopupShow" round position="bottom">
<van-picker
:title="paramObj.mallName"
:columns="pointList"
:option-height="40"
@confirm="pointConfirm"
@cancel="pointPopupShow = false"
/>
</van-popup>
</div> </div>
</div> </div>
</template> </template>
...@@ -128,7 +138,9 @@ ...@@ -128,7 +138,9 @@
} }
/*获取 Url 参数 S*/ /*获取 Url 参数 S*/
import parse from 'url-param-parser'; import parse from 'url-param-parser';
const paramObj = parse(window.location.href).search || {} let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=ab680ffc-2e74-482b-a180-ba27c70f2b56&type=undefined&id=91&channelid=660&platform=2&name=海康GB-01&mallId=9219&mallName=国标设备测试&bookmark=false&channelNo=1&deviceSerial=33011015992467054043:33010285991117359447&accountId=337'
const paramObj = parse(url).search || {}
// const paramObj = parse(window.location.href).search || {}
/********************************/ /********************************/
document.title = decodeURIComponent(paramObj.name); document.title = decodeURIComponent(paramObj.name);
window.localStorage.setItem('atoken', paramObj.atoken); window.localStorage.setItem('atoken', paramObj.atoken);
...@@ -149,10 +161,44 @@ ...@@ -149,10 +161,44 @@
}); });
} }
const navBack = () => { const navBack = () => {
wx.miniProgram.redirectTo({ pointPopupShow.value = true
url: `/pages/tour/gate/index?type=${paramObj.type}&atoken=${paramObj.atoken}&userId=${paramObj.userId}&id=${paramObj.id}&channelid=${paramObj.channelid}&platform=${paramObj.platform}&mallId=${paramObj.mallId}&name=${paramObj.name}` console.log(paramObj)
}); // wx.miniProgram.redirectTo({
// url: `/pages/tour/gate/index?type=${paramObj.type}&atoken=${paramObj.atoken}&userId=${paramObj.userId}&id=${paramObj.id}&channelid=${paramObj.channelid}&platform=${paramObj.platform}&mallId=${paramObj.mallId}&name=${paramObj.name}`
// });
}; };
// 获取检查项列表
const pointPopupShow = ref(false)
const pointList = ref([])
const reqPatrolGateList = () => {
tourApi.getPatrolGateList({
pageNum: 1,
pageSize: 99999,
mallId: paramObj.mallId,
}).then(res => {
console.log(res)
if (res.data.code == 200) {
let list = res.data.data&&res.data.data.list?res.data.data.list:[];
list.forEach((one)=>{
one.text = one.name
one.value = one.id
})
pointList.value = list;
console.log(list)
console.log(pointList.value)
}
})
}
const pointConfirm = (row) => {
console.log(row)
paramObj.channelid = row.channelId
paramObj.id = row.id
paramObj.name = row.name
paramObj.bookmark = row.bookmark
pointPopupShow.value = false
// livePlayerRef.value.playerEz.play();
livePlayerRef.value.loadTourVideo();
}
const navBackTour = () => { const navBackTour = () => {
wx.miniProgram.navigateBack(); wx.miniProgram.navigateBack();
} }
...@@ -226,6 +272,7 @@ ...@@ -226,6 +272,7 @@
} }
const deleteTemplate = (item,index) => { const deleteTemplate = (item,index) => {
checkboxRefsShow.value.splice(index,1) checkboxRefsShow.value.splice(index,1)
checked.value.splice(index,1)
} }
...@@ -421,7 +468,6 @@ ...@@ -421,7 +468,6 @@
ctx.drawImage(image, 0, 0, window.innerWidth, heightC); ctx.drawImage(image, 0, 0, window.innerWidth, heightC);
capture() capture()
} }
// this.$refs.livePlayerRef.value.playerEz.stop();
// wx.miniProgram.redirectTo({ // wx.miniProgram.redirectTo({
// url: `/pages/tour/index/index?action=capture&picUrl=${picUrl}&id=${paramObj.id}&channelid=${paramObj.channelid}&mallId=${paramObj.mallId}&title=${paramObj.name}&atoken=${paramObj.atoken}&userId=${paramObj.userId}` // url: `/pages/tour/index/index?action=capture&picUrl=${picUrl}&id=${paramObj.id}&channelid=${paramObj.channelid}&mallId=${paramObj.mallId}&title=${paramObj.name}&atoken=${paramObj.atoken}&userId=${paramObj.userId}`
// }); // });
...@@ -502,7 +548,68 @@ ...@@ -502,7 +548,68 @@
//每次过程结束时，将结束值赋给初始值，一直延续 //每次过程结束时，将结束值赋给初始值，一直延续
lastLoc.value = curLoc lastLoc.value = curLoc
} }
onMounted(() => {})
// 前端截图
const goCaptureImg = () => {
// livePlayerRef.value.captureImg(paramObj)
getPatrolTemplateList()
getAssociateList()
getUserList()
Toast.loading({
duration: 0,
message: '视频截图中···',
forbidClick: true,
});
var capturePicturePromise = livePlayerRef.value.playerEz.capturePicture('default',(data) => {
let imgData = data.base64
let reg = new RegExp('data:image/jpeg;base64,');
let pic = imgData.replace(reg,'')
tourApi.uploadScreenshot({gateId: paramObj.id,pic:pic}).then(res => {
console.log(res)
let result = res.data;
if (result.code == 200) {
Toast.success('截图成功');
pictureProcess(result.data.pic)
}else{
Toast.success(result.msg);
}
})
});
}
const pictureProcess = (imgUrl) => {
picUrl.value = imgUrl;
Toast.clear();
if(paramObj.type!='titem'){
// picUrl.value = 'https://store.keliuyun.com/images/patrol/capture/20230825/ecd2a635-84af-4968-bc30-1af130460d12.jpg'
livePlayerRef.value.playerEz.stop();
let image = new Image()
image.src = 'https://store.keliuyun.com/images/'+ picUrl.value;
image.style.width = window.innerWidth + 'px';
let heightC = window.innerWidth / 1.78
image.style.height = heightC + 'px'
image.crossOrigin = 'Anonymous'
image.onload = () => {
captureCanvas.value.width = window.innerWidth;
captureCanvas.value.height = heightC;
let ctx = captureCanvas.value.getContext("2d");
ctx.drawImage(image, 0, 0, window.innerWidth, heightC);
capture()
}
// this.$refs.livePlayerRef.value.playerEz.stop();
// wx.miniProgram.redirectTo({
// url: `/pages/tour/index/index?action=capture&picUrl=${picUrl}&id=${paramObj.id}&channelid=${paramObj.channelid}&mallId=${paramObj.mallId}&title=${paramObj.name}&atoken=${paramObj.atoken}&userId=${paramObj.userId}`
// });
}else{
/***********巡店详情截图****************/
wx.miniProgram.navigateTo({
url: `/pages/tour/titemDetail/index?action=capture&picUrl=${picUrl}&id=${paramObj.tid}`
});
}
};
onMounted(() => {
reqPatrolGateList()
})
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.tour-btns { .tour-btns {
...@@ -588,13 +695,16 @@ ...@@ -588,13 +695,16 @@
align-items: center; align-items: center;
} }
.template-name-title{ .template-name-title{
width: 140px; width: 5em;
min-width: 140px; min-width: 5em;
font-size: var(--van-cell-font-size); font-size: var(--van-cell-font-size);
color: var(--van-field-label-color); color: var(--van-field-label-color);
} }
.template-btn{ .template-btn{
width: 130px; width: 6em;
}
.template-name-content /deep/.van-cell{
padding-left: 0px;
} }
.template-list-model{ .template-list-model{
.template-list-box{ .template-list-box{
......
h5/src/api/index.js
...@@ -27,6 +27,10 @@ const tourApi = { ...@@ -27,6 +27,10 @@ const tourApi = {
uploadScreenshot(params,config){ uploadScreenshot(params,config){
return req('post', `/patrol/b-patrol-screenshot`, params, config) return req('post', `/patrol/b-patrol-screenshot`, params, config)
}, },
// 获取抓拍图
getScreenshotList(params,config){
return req('GET', `/b-patrol-screenshot/list`, params, config)
},
// 巡店模板 // 巡店模板
getPatrolTemplateListFun(params,config){ getPatrolTemplateListFun(params,config){
return req('get', `/patrol/b-patrol-template/list`, params, config) return req('get', `/patrol/b-patrol-template/list`, params, config)
...@@ -45,5 +49,12 @@ const tourApi = { ...@@ -45,5 +49,12 @@ const tourApi = {
confirmPatrolRecord(params,config) { confirmPatrolRecord(params,config) {
return req('post', `/patrol/patrolRecord`, params, config) return req('post', `/patrol/patrolRecord`, params, config)
}, },
// 云控制
ptzStart(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config)
},
ptzStop(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config)
},
} }
export default tourApi; export default tourApi;
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!