Skip to content

蒋秀川 / miniProject

Go to a project
Commit 48cc6bbb by 李乾广
Options

修改bug

1 parent dfc7d4f2
Inline Side-by-side
Showing 4 changed files with 200 additions and 19 deletions
h5/src/App.vue
......@@ -78,10 +78,12 @@
<van-button block @click="navBack" type="primary">查看其他监控点</van-button>
</div>
<div class="tour-btns1" v-else>
<div class="box">
<span @click="navBack">{{decodeURIComponent(paramObj.name)}}
<div class="box gate-name-box">
<span @click="navBack" class="" style="display: inline-flex;align-items: center;">
<span class="text-ellipsis">{{gateEditName}}</span>
<van-icon class="icon" name="play" />
</span>
<img src="../src/assets/edit.png" alt="" class="gate-name-edit-img" @click="gateEdit">
</div>
<div class="box box1">
<span v-if="bookmark" @click="delCollectGate">
......@@ -97,9 +99,45 @@
</div>
<!-- 监控点选择器 -->
<van-popup v-model:show="pointPopupShow" round position="bottom">
<van-picker :title="paramObj.mallName" :columns="pointList" :option-height="40" @confirm="pointConfirm"
<van-picker :default-index="pointListIndex" :title="paramObj.mallName" :columns="pointList" :option-height="40" @confirm="pointConfirm"
@cancel="pointPopupShow = false" />
</van-popup>
<!-- 监控场景名称修改 -->
<van-dialog use-slot title="监控点信息修改" v-model:show="gateEditShow" show-cancel-button @cancel="gateEditHide" @confirm="gateEditSave" :confirm-button-disabled="gateEditName.trim() == ''">
<div style="margin:20px 10px;">
<van-cell-group>
<van-field v-model="gateEditName" placeholder="请输入监控点名称">
<template #label>
<span style="display: inline-flex;align-items: center;">
监控点名称
<span class="grop-name-required">*</span>
</span>
</template>
</van-field>
</van-cell-group>
<van-cell-group style="display: flex;align-items: center;">
<van-field style="display: inline-flex;" v-model="gateEditGroup" label="所属分组" placeholder="请输入分组名称">
</van-field>
<van-button style="width: 14vw;" size="small" type="primary" @click="groupPicker = true">选择</van-button>
</van-cell-group>
<div class="group-remark">
<div>所属分组信息允许为空。</div>
<div>新分组可直接输入名称自动创建，已有分组信息从列表中选择。</div>
</div>
</div>
</van-dialog>
<!-- 监控场景分组选择 -->
<van-popup v-model:show="groupPicker" round position="bottom">
<van-picker :default-index="gateEditGroupIndex" :columns="groupList" @cancel="groupPicker = false" @confirm="groupChange" />
</van-popup>
<!-- 监控场景添加分组 -->
<van-dialog use-slot title="新增分组" v-model:show="groupAddShow" show-cancel-button @cancel="groupAddHide" @confirm="groupAddSave" :confirm-button-disabled="groupAddName.trim() == ''">
<div style="margin:20px 10px;">
<van-cell-group>
<van-field v-model="groupAddName" required label="分组名称" placeholder="请输入分组名称" />
</van-cell-group>
</div>
</van-dialog>
</div>
</div>
</template>
......@@ -121,13 +159,15 @@
}
/*获取 Url 参数 S*/
import parse from 'url-param-parser';
// let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=b163470d-e982-4325-ae7e-3bab6953cab3&type=undefined&id=217&name=启元会议室02&mallId=9216&mallName=北京总部&bookmark=false&channelNo=2&deviceSerial=AF3223648&gateUnid=85ddff30-5775-11ee-94ed-00163e143ecd&ptzEnable=0&accountId=337&terminalType=devtools&newLevel=' // 萤石
let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=d959778d-904f-468e-99dd-2193998ffda1&type=undefined&id=632&name=会议室门口01&mallId=9217&mallName=河南分公司&bookmark=false&channelNo=4&deviceSerial=F16423875&gateUnid=cf21f4a8-65c6-11ee-837e-00163e143ecd&ptzEnable=0&aiChannelId=&mallOrgName=办公室&accountId=337&terminalType=devtools&newLevel=' // 萤石
// const paramObj = parse(url).search || {}
const paramObj = parse(window.location.href).search || {}
const paramObj = parse(url).search || {}
// const paramObj = parse(window.location.href).search || {}
/********************************/
document.title = decodeURIComponent(paramObj.name);
paramObj.name = paramObj.name?decodeURIComponent(paramObj.name):'';
paramObj.mallName = paramObj.mallName?decodeURIComponent(paramObj.mallName):'';
paramObj.mallOrgName = paramObj.mallOrgName?decodeURIComponent(paramObj.mallOrgName):'';
document.title = paramObj.name;
window.localStorage.setItem('atoken', paramObj.atoken);
window.localStorage.setItem('lang', 'zh_CN');
/*获取 Url 参数 E*/
......@@ -149,25 +189,116 @@
pointPopupShow.value = true
console.log(paramObj)
};
// 监控场景编辑
const gateEditShow = ref(false)
const groupPicker = ref(false)
const gateEditName = ref('')
const gateEditGroup = ref('')
const gateEditGroupIndex = ref(0)
gateEditName.value = paramObj.name
gateEditGroup.value = paramObj.mallOrgName
// 监控场景编辑弹框显示
const gateEdit = () => {
gateEditName.value = paramObj.name
gateEditGroup.value = paramObj.mallOrgName
gateEditShow.value = true
};
// 监控场景编辑弹框关闭
const gateEditHide = () => {
gateEditName.value = paramObj.name
gateEditGroup.value = paramObj.mallOrgName
gateEditShow.value = false
};
// 监控场景编辑保存
const gateEditSave = () => {
let par = {
id:paramObj.id,
mallId:paramObj.mallId,
aiChannelId:paramObj.aiChannelId?paramObj.aiChannelId:'',
name:gateEditName.value,
mallOrgName:gateEditGroup.value,
}
tourApi.editPatrolGate(par).then(res => {
if (res.data.code == 200) {
// 更新监控点名称
gateEditShow.value = false
paramObj.name = gateEditName.value
paramObj.mallOrgName = gateEditGroup.value
document.title = paramObj.name;
reqPatrolGateList()
reqGateGroupList()
} else {
Toast.fail('修改失败');
}
})
};
// 监控场景分组修改
const groupChange = (val) => {
gateEditGroup.value = val.name
gateEditGroupIndex.value = (groupList.value.filter(v => v.text == gateEditGroup.value)[0]).index
groupPicker.value = false
};
// 获取分组列表
const groupList = ref([])
const reqGateGroupList = () => {
tourApi.getDeviceGroupList(paramObj.mallId).then(res => {
if (res.data.code == 200) {
let list = res.data.data ? res.data.data : [];
for(let i = 0; i < list.length; i++){
list[i].text = list[i].name
list[i].value = list[i].id
list[i].index = i
}
groupList.value = list;
gateEditGroupIndex.value = gateEditGroup.value?(groupList.value.filter(v => v.text == gateEditGroup.value)[0]).index:0;
}
})
}
//监控场景添加分组
const groupAddShow = ref(false)
const groupAddName = ref('')
// 监控场景添加分组弹框显示
const groupAdd = () => {
groupAddName.value = ''
groupAddShow.value = true
};
// 监控场景添加分组弹框关闭
const groupAddHide = () => {
groupAddShow.value = false
};
// 监控场景添加分组保存
const groupAddSave = () => {
// console.log('保存')
// 更新分组名称
gateEditGroup.value = groupAddName.value
groupAddShow.value = false
};
// 获取检查项列表
const pointPopupShow = ref(false)
const pointList = ref([])
const pointListIndex = ref(0)
const reqPatrolGateList = () => {
tourApi.getPatrolGateList({
pageNum: 1,
pageSize: 99999,
mallId: paramObj.mallId,
}).then(res => {
console.log(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
})
for(let i = 0; i < list.length; i++){
list[i].text = list[i].name
list[i].value = list[i].id
list[i].index = i
}
pointList.value = list;
console.log(list)
console.log(pointList.value)
pointListIndex.value = (pointList.value.filter(v => v.text == paramObj.name)[0]).index;
// console.log(list)
// console.log(pointList.value)
}
})
}
......@@ -175,8 +306,12 @@
console.log(row)
paramObj.id = row.id
paramObj.name = row.name
gateEditName.value = paramObj.name
paramObj.bookmark = row.bookmark
paramObj.mallOrgName = row.mallOrgName
paramObj.gateUnid = row.unid
document.title = paramObj.name;
pointListIndex.value = (pointList.value.filter(v => v.text == paramObj.name)[0]).index;
pointPopupShow.value = false
vionPlayer.value.playWebVideo(paramObj);
}
......@@ -576,6 +711,7 @@
}
// 截图出口
const screenshotEnd = (imgData) => {
console.log(imgData)
let reg = new RegExp('data:image/jpeg;base64,');
let regPng = new RegExp('data:image/png;base64,');
let pic = imgData.replace(reg, '')
......@@ -616,11 +752,11 @@
} else {
/***********巡店详情截图****************/
if(paramObj.newLevel) {
wx.miniProgram.navigateTo({
wx.miniProgram.redirectTo({
url: `/pages/tour/inspectionDetail/index?action=capture&picUrl=${imgUrl}&id=${paramObj.tid}`
});
} else {
wx.miniProgram.navigateTo({
wx.miniProgram.redirectTo({
url: `/pages/tour/titemDetail/index?action=capture&picUrl=${picUrl}&id=${paramObj.tid}`
});
}
......@@ -629,6 +765,7 @@
};
onMounted(() => {
reqPatrolGateList()
reqGateGroupList()
})
</script>
<style scoped lang="less">
......@@ -766,4 +903,40 @@
}
}
}
.gate-name-box{
display: inline-flex!important;
align-items: center;
}
.gate-name-edit-img{
width: 40px;
height:40px;
display: inline-block;
margin-left: 20px;
}
.group-remark{
font-size: var(--van-calendar-info-font-size);
line-height: 34px;
color: #bbb;
margin-top: 20px;
}
.grop-name-required{
position: relative;
top:4px;
font-size: 12px;
margin-left: 8px;
color: var(--van-field-required-mark-color);
content: "*";
}
.text-ellipsis{
display: inline-block;
max-width: 30vw;
margin-right: 10px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
</style>
\ No newline at end of file
h5/src/api/index.js
......@@ -68,5 +68,13 @@ const tourApi = {
getThroughVideoRecord(params, config){
return req('GET', `/patrol/patrolDeviceChannel/video/record`, params, config)
},
// 获取设备分组
getDeviceGroupList(shopId) {
return req('GET', `/patrol/b-mall-org/mall/${shopId}`);
},
// 修改监控场景
editPatrolGate(params,config) {
return req('PUT', `/patrol/patrolGate/${params.id}`, params, config)
},
}
export default tourApi;
\ No newline at end of file
h5/src/components/vionPlayer/index.vue
......@@ -240,7 +240,7 @@ export default {
const targetType = typeList[this.mirrorIndex % 2];
this._jessibuca.setMirrorRotate(targetType);
},
screenshot(filename = '', format = 'jpeg', quality = 0.2, type = 'base64') {
screenshot(filename = '', format = 'jpeg', quality = 1, type = 'base64') {
return new Promise((resolve, reject) => {
// 如果是播放状态
const isPlaying = this._jessibuca.isPlaying();
......@@ -258,7 +258,7 @@ export default {
const canvas = getWatermarkCanvasImg(this.player.width, this.player.height, this.watermarkText, image);;
// 将带有水印的 Canvas 转换回 base64
const watermarkedBase64 = canvas.toDataURL('image/png');
const watermarkedBase64 = canvas.toDataURL('image/jpeg',0.5);
// 现在，watermarkedBase64 包含了带有水印的 base64 图像数据
// console.log(watermarkedBase64);
......@@ -272,7 +272,7 @@ export default {
image.src = this._jessibuca.screenshot(filename, format, quality, type);
});
},
screenshotOrigin(filename = '', format = 'jpeg', quality = 0.2, type = 'base64') {
screenshotOrigin(filename = '', format = 'jpeg', quality = 1, type = 'base64') {
return this._jessibuca.screenshot(filename, format, quality, type);
}
},
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!