|
@@ -11,6 +11,8 @@
|
|
<script type="text/javascript" charset="utf-8" src="js/moment-with-locales.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="js/moment-with-locales.min.js"></script>
|
|
<link rel="stylesheet" href="antd/antd.min.css" />
|
|
<link rel="stylesheet" href="antd/antd.min.css" />
|
|
<script type="text/javascript" charset="utf-8" src="antd/antd.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="antd/antd.min.js"></script>
|
|
|
|
+<!-- 编辑图片 -->
|
|
|
|
+<script type="text/javascript" charset="utf-8" src="imgEdit/ped.min.js"></script>
|
|
<!-- 播放器 -->
|
|
<!-- 播放器 -->
|
|
<link rel="stylesheet" href="aliplayer/aliplayer-min.css" />
|
|
<link rel="stylesheet" href="aliplayer/aliplayer-min.css" />
|
|
<script type="text/javascript" charset="utf-8" src="aliplayer/aliplayer-h5-min.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="aliplayer/aliplayer-h5-min.js"></script>
|
|
@@ -50,7 +52,7 @@
|
|
<a-menu-item key="5"> 客户休息区 </a-menu-item>
|
|
<a-menu-item key="5"> 客户休息区 </a-menu-item>
|
|
</a-menu>
|
|
</a-menu>
|
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|
- 收银台 <a-icon type="right" />
|
|
|
|
|
|
+ 收银台 <a-icon type="down" />
|
|
</a>
|
|
</a>
|
|
</a-dropdown>
|
|
</a-dropdown>
|
|
</div>
|
|
</div>
|
|
@@ -87,37 +89,49 @@
|
|
<div class="checkWork-body">
|
|
<div class="checkWork-body">
|
|
<div class="checkWork-body-tabs">
|
|
<div class="checkWork-body-tabs">
|
|
<div class="tabs-items active">
|
|
<div class="tabs-items active">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-items">
|
|
<div class="tabs-items">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-items">
|
|
<div class="tabs-items">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-items">
|
|
<div class="tabs-items">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-items">
|
|
<div class="tabs-items">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-items">
|
|
<div class="tabs-items">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-items">
|
|
<div class="tabs-items">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
<div class="tabs-items">
|
|
<div class="tabs-items">
|
|
|
|
+ <div v-if="isDelItem"><a-icon class="aicon" type="close" /></div>
|
|
<div>正常营业</div>
|
|
<div>正常营业</div>
|
|
<div>0/4</div>
|
|
<div>0/4</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="tabs-items">
|
|
|
|
+ <div class="edit" v-if="!isDelItem" @click="isDelItem=true">编辑</div>
|
|
|
|
+ <div class="edit" @click="isDelItem=false" v-else>取消编辑</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="checkWork-body-tabCons">
|
|
<div class="checkWork-body-tabCons">
|
|
<div class="tabCons-items">
|
|
<div class="tabCons-items">
|
|
@@ -128,8 +142,8 @@
|
|
</div>
|
|
</div>
|
|
<!-- 拍照图片 -->
|
|
<!-- 拍照图片 -->
|
|
<div class="photos">
|
|
<div class="photos">
|
|
- <div><a-avatar :size="40" shape="square" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></div>
|
|
|
|
- <div><a-avatar :size="40" shape="square" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></div>
|
|
|
|
|
|
+ <div @click="previewImgs('https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png')"><a-avatar :size="40" shape="square" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></div>
|
|
|
|
+ <div @click="previewImgs('https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png')"><a-avatar :size="40" shape="square" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></div>
|
|
</div>
|
|
</div>
|
|
<!-- 评分 -->
|
|
<!-- 评分 -->
|
|
<div>
|
|
<div>
|
|
@@ -163,20 +177,22 @@
|
|
<div class="pzPopus">
|
|
<div class="pzPopus">
|
|
<!-- 评论 -->
|
|
<!-- 评论 -->
|
|
<div class="pz-pinglun">
|
|
<div class="pz-pinglun">
|
|
- <div><a-textarea placeholder="请填写备注内容(选填)" :rows="4" /></div>
|
|
|
|
- <span class="icons">
|
|
|
|
|
|
+ <div class="remarks">
|
|
|
|
+ <a-textarea placeholder="请填写备注内容(选填)" :rows="4" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="icons">
|
|
<a-icon class="aicon" type="camera" />
|
|
<a-icon class="aicon" type="camera" />
|
|
- </span>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<!-- 图片列表 -->
|
|
<!-- 图片列表 -->
|
|
<div class="imglist">
|
|
<div class="imglist">
|
|
<div>
|
|
<div>
|
|
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png">
|
|
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png">
|
|
- <a-icon class="aicon" type="close-circle" />
|
|
|
|
|
|
+ <a-icon class="aicon" type="close" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png">
|
|
<img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png">
|
|
- <a-icon class="aicon" type="close-circle" />
|
|
|
|
|
|
+ <a-icon class="aicon" type="close" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 提交 -->
|
|
<!-- 提交 -->
|
|
@@ -185,8 +201,18 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-drawer>
|
|
</a-drawer>
|
|
|
|
+
|
|
|
|
+ <!-- 加载条 -->
|
|
|
|
+ <div v-if="showLoading" class="loading">
|
|
|
|
+ <a-spin />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
<script>
|
|
|
|
+ window.onload = function(){
|
|
|
|
+ vm.showLoading = false
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 初始化vm 实例
|
|
var vm = new Vue({
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
el: '#app',
|
|
data: {
|
|
data: {
|
|
@@ -194,6 +220,10 @@
|
|
showYt: false, // 显示云台控制
|
|
showYt: false, // 显示云台控制
|
|
showYtbtns: false,
|
|
showYtbtns: false,
|
|
showPz: false,// 显示拍照弹框
|
|
showPz: false,// 显示拍照弹框
|
|
|
|
+ isDelItem: false, // 是否显示考评项删除按钮
|
|
|
|
+ showLoading: true, // 页面加载条
|
|
|
|
+ isEditImg: false, // 是否编辑图片
|
|
|
|
+ PED: null, // 图片编辑对象
|
|
},
|
|
},
|
|
mounted () {
|
|
mounted () {
|
|
this.videoInit()
|
|
this.videoInit()
|
|
@@ -207,7 +237,7 @@
|
|
// 初始化播放器
|
|
// 初始化播放器
|
|
_this.player = new Aliplayer({
|
|
_this.player = new Aliplayer({
|
|
'id': 'player-con',
|
|
'id': 'player-con',
|
|
- 'source': 'https://play.zyucgj.com/live/34020000001320000001.m3u8?auth_key=1599027535-0-0-621dab70e039a552649ccd535d1cc3f9',
|
|
|
|
|
|
+ 'source': 'https://player.alicdn.com/video/aliyunmedia.mp4',
|
|
'width': '100%',
|
|
'width': '100%',
|
|
'height': '240px',
|
|
'height': '240px',
|
|
'autoplay': false,
|
|
'autoplay': false,
|
|
@@ -253,10 +283,10 @@
|
|
'y': 8
|
|
'y': 8
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- 'name': 'snapshot',
|
|
|
|
|
|
+ 'name': 'liveDisplay',
|
|
'align': 'tl',
|
|
'align': 'tl',
|
|
'x': 15,
|
|
'x': 15,
|
|
- 'y': 8
|
|
|
|
|
|
+ 'y': 2
|
|
}
|
|
}
|
|
]
|
|
]
|
|
}
|
|
}
|
|
@@ -265,11 +295,6 @@
|
|
_this.sendMsg('message','The player is created')
|
|
_this.sendMsg('message','The player is created')
|
|
}
|
|
}
|
|
)
|
|
)
|
|
- /* h5截图按钮, 截图成功回调 */
|
|
|
|
- _this.player.on('snapshoted', function (data) {
|
|
|
|
- const pictureData = data.paramData.base64
|
|
|
|
- _this.sendMsg('snapshoted','截图成功回调')
|
|
|
|
- })
|
|
|
|
// 控制栏
|
|
// 控制栏
|
|
_this.player.on('playing', function () {
|
|
_this.player.on('playing', function () {
|
|
_this.showYt = true
|
|
_this.showYt = true
|
|
@@ -299,10 +324,27 @@
|
|
// 打开拍照
|
|
// 打开拍照
|
|
openCamera(){
|
|
openCamera(){
|
|
this.showPz = true
|
|
this.showPz = true
|
|
|
|
+ this.sendMsg('getWinStatus',JSON.stringify({key:'showPz',val: true}))
|
|
},
|
|
},
|
|
// 关闭拍照弹框
|
|
// 关闭拍照弹框
|
|
onClosePz(){
|
|
onClosePz(){
|
|
this.showPz = false
|
|
this.showPz = false
|
|
|
|
+ this.sendMsg('getWinStatus',JSON.stringify({key:'showPz',val: false}))
|
|
|
|
+ },
|
|
|
|
+ // 预览图片
|
|
|
|
+ previewImgs(url){
|
|
|
|
+ let _this = this
|
|
|
|
+ _this.sendMsg('getWinStatus',JSON.stringify({key:'isEditImg',val: true}))
|
|
|
|
+ this.PED = new window.PED.imageInfo(url,function(data){
|
|
|
|
+ console.log(data)
|
|
|
|
+ _this.sendMsg('getWinStatus',JSON.stringify({key:'isEditImg',val: false}))
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 关闭图片编辑
|
|
|
|
+ closeImgsEdit(){
|
|
|
|
+ console.log('0000000000000000')
|
|
|
|
+ this.PED.hidePED()
|
|
|
|
+ this.sendMsg('getWinStatus',JSON.stringify({key:'isEditImg',val: false}))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|