admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 弹窗功能添加以及BUG修改

Browse Source
This commit is contained in:
kun 2024-03-02 09:32:13 +08:00
parent e83fcfc461
commit fe752a70da
5 changed files with 84 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/sevenLargeScreen/laborManagement/data-dialog.vue
View File

@ -27,7 +27,7 @@ let dialogTitle = ref("" as any);
function openDialog(obj: any) {
console.log("type", obj);
if(obj.type == 1){
dialogTitle.value = "人数统计数据";
dialogTitle.value = obj.tip + '人数统计数据';
} else if(obj.type == 2) {
dialogTitle.value = "历史报警数据";
}

2
src/views/sevenLargeScreen/laborManagement/leftTop.vue
View File

@ -15,7 +15,7 @@
<i>{{ attendancePerson }}</i>
</div>
</div>
<div class="numberPeople" @click="openDialogData('总人数')">
<div class="numberPeople" @click="openDialogData('总')">
<div class="text"><i>总人数</i></div>
<div class="num">
<i>{{ toaltPerson }}</i>

45
src/views/sevenLargeScreen/laborManagement/member-count-list.vue
View File

@ -52,24 +52,38 @@
<el-button @click="getMemberCountList('search')">查询</el-button>
</div>
<div class="tabList">
<div>报警类型</div>
<div>报警名称</div>
<div>设备名称</div>
<div>报警值</div>
<div>阈值</div>
<div>超标时间</div>
<div>超标量</div>
<div>序号</div>
<div>照片</div>
<div>姓名</div>
<div>联系电话</div>
<div>所属部门</div>
<div>进场日期</div>
<div>在职状态</div>
<div>身份证号</div>
<div>人员类型</div>
<div>所属企业</div>
</div>
<el-scrollbar class="listBox" ref="refScrollbar">
<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
<div>{{ alarmTypeList[item.type] }}</div>
<div>{{ item.alarmTypeName }}</div>
<div>{{ item.deviceName }}</div>
<div>{{ item.avgData }}</div>
<div>{{ item.alarmValue }}</div>
<div>{{ item.tempAlarmTime }}</div>
<div>{{ item.exceedVal }}</div>
<div>{{index + 1}}</div>
<div class="list-img">
<el-image
fit="contain"
class="el-img"
:src="BASEURL + item.fieldAcquisitionUrl"
:preview-src-list="[BASEURL + item.fieldAcquisitionUrl]"
>
</el-image>
</div>
<div>{{item.workerName}}</div>
<div>{{item.phoneNumber}}</div>
<div>{{item.phoneNumber}}</div>
<div>{{item.personType == 1?item.teamName:item.personType == 2?item.departmentName:''}}</div>
<div>{{item.phoneNumber}}</div>
<div>身份证号</div>
<div>人员类型</div>
<div>所属企业</div>
</div>
<div class="notoDta" v-if="partyMemberList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
@ -86,6 +100,7 @@ import { GlobalStore } from "@/stores";
import { getCompanyDataList, getMemberInfoList } from "@/api/modules/labor";
const store = GlobalStore();
const props = defineProps(["tip"]);
const BASEURL = import.meta.env.VITE_API_URL;
const onlineWorkList = ref([
{ name: "在职", value: 1 },
{ name: "离职", value: 2 }
@ -145,7 +160,7 @@ const getMemberCountList = async (tip:any) => {
onMounted(async () => {
await getCompanyList();
// await getHistoryAlarmList('search');
await getMemberCountList('search');
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
// console.log("滚动容器", e);
const scrollTop = e.target.scrollTop;

39
src/views/sevenLargeScreen/videoManagement/ckplayerComp(webRtc版).vue Normal file
View File

@ -0,0 +1,39 @@
<!--ckplayer 视频播放-->
<template>
<div style="height: 100%">
<video :id="'videoItem' + name" style="width: 100%; height: 100%; object-fit: fill" controls :autoplay="autoPlay" muted />
</div>
</template>
<script>
export default {
props: ["videoUrls", "autoPlay", "poster", "deviceIp", "name"],
data() {
return {
player: "",
webRtcServer: null
};
},
// watch: {
// name: {
// handler(newName, oldName) {
// console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
// let webRtcServer = null;
// webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
// webRtcServer.connect(this.videoUrls);
// },
// immediate: true
// }
// },
mounted: function () {
console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
let webRtcServer = this.webRtcServer;
webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
webRtcServer.connect(this.videoUrls);
},
beforeDestroy: function () {
this.webRtcServer.disconnect();
},
methods: {}
};
</script>

31
src/views/sevenLargeScreen/videoManagement/ckplayerComp.vue
View File

@ -1,38 +1,33 @@
<!--ckplayer 视频播放-->
<template>
<div style="height: 100%">
<video :id="'videoItem' + name" style="width: 100%; height: 100%; object-fit: fill" controls :autoplay="autoPlay" muted />
<video :id="'videoItem' + name" controls autoplay style="width: 100%; height: 100%; object-fit: fill" />
</div>
</template>
<script>
import Srs from "@/assets/js/srs.sdk";
export default {
props: ["videoUrls", "autoPlay", "poster", "deviceIp", "name"],
data() {
return {
player: "",
webRtcServer: null
rtcPlayer: null
};
},
// watch: {
// name: {
// handler(newName, oldName) {
// console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
// let webRtcServer = null;
// webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
// webRtcServer.connect(this.videoUrls);
// },
// immediate: true
// }
// },
mounted: function () {
console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
let webRtcServer = this.webRtcServer;
webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
webRtcServer.connect(this.videoUrls);
console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name, 666);
this.player = document.getElementById("videoItem" + this.name);
//方法一：使用srs.sdk.js
this.rtcPlayer = new Srs.SrsRtcWhipWhepAsync();
this.rtcPlayer.play(this.videoUrls);
// video标签
this.player.srcObject = this.rtcPlayer.stream;
// 方法二：使用jswebrtc.min.js
// new JSWebrtc.Player(this.url, { video: player, autoplay: true, });
},
beforeDestroy: function () {
this.webRtcServer.disconnect();
this.rtcPlayer.close();
},
methods: {}
};