From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 16 七月 2025 22:39:23 +0800 Subject: [PATCH] 添加时间筛选 --- src/views/systemSetting/device/point/index.vue | 128 ++++++++++++++++++++++++------------------ 1 files changed, 72 insertions(+), 56 deletions(-) diff --git a/src/views/systemSetting/device/point/index.vue b/src/views/systemSetting/device/point/index.vue index d7d4b94..2f11ed6 100644 --- a/src/views/systemSetting/device/point/index.vue +++ b/src/views/systemSetting/device/point/index.vue @@ -4,8 +4,15 @@ <department-aside @selectedDepartment="selectedDepartment" /> </el-aside> - <el-container> - <el-header style="display: flex; flex-direction: column; height: 120px"> + <el-container class="point-container"> + <el-header + style=" + display: flex; + flex-direction: column; + height: 120px; + padding: 0 40px; + " + > <div style="display: flex; justify-content: space-between; height: 80px" > @@ -28,7 +35,7 @@ <div v-for="item in videoData" :key="item.id" - style="position: relative" + style="position: relative; height: 350px" > <div class="video-title">{{ item.name }}{{ item.community }}</div> @@ -104,30 +111,32 @@ .catch((err) => this.$message.error(err)); }, loadVideo(item) { - if (item.platResourceId) { + if (item.code || item.platResourceId) { if (Hls.isSupported()) { var video = document.getElementById(item.id); var hls = new Hls(); - videoPoint.getVideoPointUrl(item.platResourceId).then((res) => { - if (res.code === 0) { - hls.loadSource(res.data); - hls.attachMedia(video); - this.videoList.push(video); - // hls.on(Hls.Events.MANIFEST_PARSED, function () { - // // video.play(); - // document.body.addEventListener( - // "click", - // function () { - // video.play(); - // }, - // false - // ); - // }); - setTimeout(() => { - video.play(); - }, 2000); - } - }); + videoPoint + .getVideoPointUrl(item.code || item.platResourceId) + .then((res) => { + if (res.code === 0) { + hls.loadSource(res.data); + hls.attachMedia(video); + this.videoList.push(video); + // hls.on(Hls.Events.MANIFEST_PARSED, function () { + // // video.play(); + // document.body.addEventListener( + // "click", + // function () { + // video.play(); + // }, + // false + // ); + // }); + setTimeout(() => { + video.play(); + }, 2000); + } + }); } } else { this.$message.error("鏆傛棤瑙嗛"); @@ -146,28 +155,35 @@ }, }, beforeDestroy() { - videoList.forEach((element) => { + this.videoList.forEach((element) => { element.push(); }); }, }; </script> <style lang="scss" scoped> +.point-container { + margin-left: 5px; + border: 1px solid #ccc; + padding: 10px; +} .button-one { height: 40px; width: 80px; - margin-left: 20px; + //margin-left: 20px; padding: 0; - background-color: #09152f; + // background-color: #09152f; color: rgb(75, 155, 183); border: 1px solid rgb(75, 155, 183); } - +.title { + color: #333; +} .button-two { height: 40px; width: 80px; padding: 0; - background-color: #09152f; + // background-color: #09152f; color: rgb(75, 155, 183); border: 1px solid rgb(75, 155, 183); } @@ -178,7 +194,7 @@ height: 40px; width: 80px; padding: 0; - background-color: #09152f; + // background-color: #09152f; color: rgb(75, 155, 183); border: 1px solid rgb(75, 155, 183); } @@ -239,17 +255,17 @@ } .el-pagination { - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - background-color: #071f39; - color: #4b9bb7; - } + // &::v-deep li, + // &::v-deep .btn-prev, + // &::v-deep .btn-next { + // background-color: #071f39; + // color: #4b9bb7; + // } - &::v-deep .active { - background-color: #409eff; - color: #fff; - } + // &::v-deep .active { + // background-color: #409eff; + // color: #fff; + // } } .bottonThird { @@ -264,24 +280,24 @@ cursor: pointer; } -::v-deep .el-header { - background-color: #09152f; - color: #000; - line-height: 60px; -} +// ::v-deep .el-header { +// background-color: #09152f; +// color: #000; +// line-height: 60px; +// } -::v-deep .el-aside { - background-color: #09152f; -} +// ::v-deep .el-aside { +// background-color: #09152f; +// } -::v-deep .el-menu { - background-color: #09152f; -} +// ::v-deep .el-menu { +// background-color: #09152f; +// } -::v-deep .el-main, -::v-deep .el-footer { - background-color: #09152f; -} +// ::v-deep .el-main, +// ::v-deep .el-footer { +// background-color: #09152f; +// } ::v-deep .el-tree-node__label { line-height: 30px; @@ -307,4 +323,4 @@ video::-webkit-media-controls-toggle-closed-captions-button { display: none; } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0