diff --git a/public/favicon.ico b/public/favicon.ico index df36fcf..a6dd726 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/views/realTimeMonitor/components/carouselChart copy.vue b/src/views/realTimeMonitor/components/carouselChart copy.vue deleted file mode 100644 index 0182e4d..0000000 --- a/src/views/realTimeMonitor/components/carouselChart copy.vue +++ /dev/null @@ -1,917 +0,0 @@ - - - - diff --git a/src/views/realTimeMonitor/components/carouselChart.vue b/src/views/realTimeMonitor/components/carouselChart.vue index 67da73e..7d224b1 100644 --- a/src/views/realTimeMonitor/components/carouselChart.vue +++ b/src/views/realTimeMonitor/components/carouselChart.vue @@ -35,7 +35,7 @@ autoplay > -
+
-
- - +
+
+
- - +
+
+ +
+
+ +
+
@@ -191,7 +193,7 @@ export default { }, mounted() { console.log(this.terminalPhoto); - this.changeBigPic(this.terminalPhoto[0][0], 0); + this.changeBigPic(this.terminalPhoto[0], 0); }, watch: { terminalPhoto: { @@ -206,6 +208,7 @@ export default { this.roleUser = localStorage.getItem("role"); console.log(this.roleUser); }, + methods: { //下载图片 downLoadPic(url, name) { @@ -326,32 +329,17 @@ export default { }, //点击大图左右按钮 leftClick() { - console.log("我点击了左侧按钮", this.activeSmall, this.currentPage); + console.log("我点击了左侧按钮", this.activeSmall); this.activeSmall--; - if (this.activeSmall < 0) { - this.currentPage--; - this.$refs.carousel.setActiveItem(this.currentPage); - this.activeSmall = - this.terminalPhoto[this.terminalPhoto.length - 1].length - 1; - } - this.changeBigPic( - this.terminalPhoto[this.currentPage][this.activeSmall], - this.activeSmall - ); + this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5; + this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall); }, rightClick() { console.log(this.activeSmall); console.log(this.terminalPhoto.length); this.activeSmall++; - if (this.activeSmall > this.photoNum - 1) { - this.currentPage++; - this.$refs.carousel.setActiveItem(this.currentPage); - this.activeSmall = 0; - } - this.changeBigPic( - this.terminalPhoto[this.currentPage][this.activeSmall], - this.activeSmall - ); + this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5; + this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall); }, //获取第一张大图 changeBigPic(data, i) { @@ -373,73 +361,27 @@ export default { loadImage() { this.picLoading = false; }, - changeItem(e) { - // console.log(this.currentPage); - // this.currentPage = e; - // if (e === 0) { - // this.activeSmall = 0; - // //this.changeBigPic(this.terminalPhoto[0][0], 0); - // } else { - // this.activeSmall = 0; - // // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0); - // } - //this.active = e; // 将走马灯的 下标 指定为 tab 的下标 - }, //鼠标滚动 handleScroll(e) { let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上 console.log(e.deltaY, direction); if (direction == "down") { - if ( - this.currentPage == this.terminalPhoto.length - 1 && - this.activeSmall == - this.terminalPhoto[this.terminalPhoto.length - 1].length - 1 - ) { - this.$message({ - message: "已经是最后一张图", - type: "success", - showClose: true, - duration: 500, - }); - return; - } else { - // this.rightClick(); - this.activeSmall++; - if (this.activeSmall > this.photoNum - 1) { - this.currentPage++; - this.$refs.carousel.setActiveItem(this.currentPage); - this.activeSmall = 0; - } - console.log(this.activeSmall); - } + console.log(this.$refs.scrollBox.offsetWidth / 5); + this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5; } if (direction == "up") { - if (this.currentPage == 0 && this.activeSmall == 0) { - this.$message({ - showClose: true, - duration: 500, - message: "已经是最新一张图", - type: "success", - }); - return; - } else { - // this.leftClick(); - console.log(this.activeSmall); - this.activeSmall--; - console.log(this.activeSmall); - if (this.activeSmall < 0) { - this.currentPage--; - console.log("我是页数", this.currentPage); - this.$refs.carousel.setActiveItem(this.currentPage); - this.activeSmall = this.terminalPhoto[this.currentPage].length - 1; - console.log(this.terminalPhoto); - console.log(this.terminalPhoto[this.currentPage].length); - console.log("我是选中的值", this.activeSmall); - } - console.log(this.activeSmall); - } + this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5; } }, + //缩略图的左右箭头 + smallLeftClick() { + console.log("缩略图箭头左侧"); + this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth; + }, + smallRightClick() { + console.log("缩略图箭头右侧"); + this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth; + }, }, }; @@ -543,41 +485,68 @@ export default { width: 100%; height: 20%; margin-bottom: 6px; - .el-carousel { + .scrollPicContain { + // width: 1380px; + display: flex; height: 100%; - .el-carousel__container { - height: 100% !important; - } - .el-carousel__arrow { + position: relative; + .arrow { + opacity: 0; + position: absolute; + cursor: pointer; + font-size: 14px; + border-radius: 30px; + position: absolute; + top: 50%; + transform: translateY(-50%); color: #4cdbc8; font-weight: bold; background-color: rgba(31, 45, 61, 0.8); + display: flex; + justify-content: center; + align-items: center; + text-align: center; + line-height: 60px; + width: 30px; + height: 30px; + z-index: 4; &:hover { background-color: rgba(31, 45, 61, 1); } } + .leftArrow { + left: 16px; + } + .rightArrow { + right: 16px; + } + &:hover { + .arrow { + opacity: 1; + transition: all 0.5s ease-in; + } + } } .el-car-item { + width: 100%; + height: 100%; display: flex; - justify-content: center; + overflow-x: hidden; + overflow-y: hidden; + scroll-behavior: smooth; .smallPic { - width: 20%; + width: 18%; border: 3px solid transparent; box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; + flex-shrink: 0; + white-space: nowrap; position: relative; cursor: pointer; .picBox { width: 100%; height: 100%; } - // .el-image { - // width: 100%; - // height: 100%; - // } img { width: 100%; height: 100%; @@ -607,6 +576,9 @@ export default { } } } + .littlePic { + justify-content: center; + } } } diff --git a/src/views/realTimeMonitor/components/carouselChartOld.vue b/src/views/realTimeMonitor/components/carouselChartOld.vue new file mode 100644 index 0000000..67da73e --- /dev/null +++ b/src/views/realTimeMonitor/components/carouselChartOld.vue @@ -0,0 +1,612 @@ + + + + diff --git a/src/views/realTimeMonitor/components/siderBar.vue b/src/views/realTimeMonitor/components/siderBar.vue index 19c6900..cbe8d74 100644 --- a/src/views/realTimeMonitor/components/siderBar.vue +++ b/src/views/realTimeMonitor/components/siderBar.vue @@ -132,10 +132,24 @@ export default { this.lineTreeData = res.data.list; this.onlineNum = res.data.onlineNum; this.totalNum = res.data.totalNum; - - this.$nextTick(() => { - this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来 - }); + if (this.zzradio == 0) { + console.log("装置为离线"); + this.$nextTick(() => { + console.log(this.lineTreeData); + this.currentData = this.lineTreeData[0]; + console.log(this.currentData); + this.handleNodeClick(this.currentData); + this.$nextTick(() => { + this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来 + this.scrollView(); + }); + }); + } else { + this.$nextTick(() => { + this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来 + this.scrollView(); + }); + } }) .catch((err) => { console.log(err); //代码错误、请求失败捕获 @@ -196,7 +210,7 @@ export default { handleNodeClick(data) { console.log(data); this.currentData = data; - this.scrollView(); + // this.scrollView(); this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中 this.$store.commit("termId", this.currentData.id); //将currentData保存在vuex中 this.$store.commit("protocol", this.currentData.protocol); //将currentData保存在vuex中 diff --git a/src/views/realTimeMonitor/components/takePicButton.vue b/src/views/realTimeMonitor/components/takePicButton.vue index 508bbe7..c8c71de 100644 --- a/src/views/realTimeMonitor/components/takePicButton.vue +++ b/src/views/realTimeMonitor/components/takePicButton.vue @@ -40,13 +40,20 @@ export default { }, watch: { termId: { - handler(newVal, oldVal) {}, + handler(newVal, oldVal) { + console.log("我改变了"); + clearInterval(this.statusTimer); + this.statusTimer = null; + this.statusNum = 0; + this.picLoading = false; + }, deep: true, immediate: true, }, }, mounted() { console.log(this.channelIdList); + console.log("我是主动拍照"); }, computed: { termId() { @@ -194,5 +201,16 @@ export default { this.picLoading = false; }, }, + destroyed() { + console.log("离开了"); + clearInterval(this.statusTimer); + this.statusTimer = null; + this.statusNum = 0; + }, + beforeRouteLeave(to, from, next) { + // 路由跳转前，清除轮询 + next(); + console.log("7777777777777777777777777"); + }, }; diff --git a/src/views/realTimeMonitor/components/takeVideoButton.vue b/src/views/realTimeMonitor/components/takeVideoButton.vue index fc9e798..7c9222a 100644 --- a/src/views/realTimeMonitor/components/takeVideoButton.vue +++ b/src/views/realTimeMonitor/components/takeVideoButton.vue @@ -85,11 +85,16 @@ export default { // deep: true, // immediate: true, // }, - // termId: { - // handler(newVal, oldVal) {}, - // deep: true, - // immediate: true, - // }, + termId: { + handler(newVal, oldVal) { + clearInterval(this.statusTimer); + this.statusTimer = null; + this.statusNum = 0; + this.picLoading = false; + }, + deep: true, + immediate: true, + }, // channelId: { // handler(newVal, oldVal) {}, // deep: true, diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index 6f6f9a2..0643f2e 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -148,25 +148,28 @@ export default { } else { this.terminalPhoto = res.data.list; } - let newDataList = []; - let current = 0; - if (this.terminalPhoto && this.terminalPhoto.length > 0) { - for (let i = 0; i <= this.terminalPhoto.length - 1; i++) { - if (i % this.photoNum !== 0 || i === 0) { - if (!newDataList[current]) { - newDataList.push([this.terminalPhoto[i]]); - } else { - newDataList[current].push(this.terminalPhoto[i]); - } - } else { - current++; - newDataList.push([this.terminalPhoto[i]]); - } - } - } - this.terminalPhoto = [...newDataList]; + // let newDataList = []; + // let current = 0; + // if (this.terminalPhoto && this.terminalPhoto.length > 0) { + // for (let i = 0; i <= this.terminalPhoto.length - 1; i++) { + // if (i % this.photoNum !== 0 || i === 0) { + // if (!newDataList[current]) { + // newDataList.push([this.terminalPhoto[i]]); + // } else { + // newDataList[current].push(this.terminalPhoto[i]); + // } + // } else { + // current++; + // newDataList.push([this.terminalPhoto[i]]); + // } + // } + // } + // this.terminalPhoto = [...newDataList]; + // this.$nextTick(() => { + // this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0); + // }); this.$nextTick(() => { - this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0); + this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0); }); this.swiperLoading = false;