From 1f9476a5c37fda99dee9abcf8e2e205d3f16f041 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Sat, 23 Sep 2023 09:36:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E8=BD=AE?= =?UTF-8?q?=E6=92=AD=E4=BB=A5=E5=8F=8A=E5=B7=A6=E4=BE=A7=E6=A0=91=E7=8A=B6?= =?UTF-8?q?=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/favicon.ico | Bin 4286 -> 8121 bytes .../components/carouselChart copy.vue | 917 ------------------ .../components/carouselChart.vue | 190 ++-- .../components/carouselChartOld.vue | 612 ++++++++++++ .../realTimeMonitor/components/siderBar.vue | 24 +- .../components/takePicButton.vue | 20 +- .../components/takeVideoButton.vue | 15 +- src/views/realTimeMonitor/index.vue | 39 +- 8 files changed, 762 insertions(+), 1055 deletions(-) delete mode 100644 src/views/realTimeMonitor/components/carouselChart copy.vue create mode 100644 src/views/realTimeMonitor/components/carouselChartOld.vue diff --git a/public/favicon.ico b/public/favicon.ico index df36fcfb72584e00488330b560ebcf34a41c64c2..a6dd7264940f5e7a8c2a15cc960c8aad4d594e18 100644 GIT binary patch literal 8121 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 literal 4286 zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56 zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei z@g6Xq-pDoPl=MANPiR7%172VA%r)kevtV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp= zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8 zx!=3<4seY*%=OlbCbcae?5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3 z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD zsW0Ab)ZK@0cIW%W7z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6 z={Xwx{TKxD#iCLfl2vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S 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;