From 98e915aa7c24e7df4e4fb2f58827cbfc39a558b3 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Thu, 20 Apr 2023 12:00:03 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87=E8=BD=AE?= =?UTF-8?q?=E6=92=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/theme.less | 4 +- src/utils/request.js | 66 +++---- src/views/components/carouselChart.vue | 78 +++++---- src/views/realTimeMonitor/index.vue | 230 +++++++++++++------------ 4 files changed, 197 insertions(+), 181 deletions(-) diff --git a/src/assets/css/theme.less b/src/assets/css/theme.less index 3b18259..1216700 100644 --- a/src/assets/css/theme.less +++ b/src/assets/css/theme.less @@ -264,7 +264,7 @@ > .el-tree-node__content { // 设置颜色 color: #fff; - background: @orange-color !important; + background: #f39b33 !important; } .el-menu--horizontal .el-menu-item.is-active i { color: @orange-color; @@ -276,7 +276,7 @@ .el-tree-node.is-current > .el-tree-node__content { color: #fff; - background: @orange-color; + background: #f39b33 !important; } .gallery-thumbs .swiper-slide-active { diff --git a/src/utils/request.js b/src/utils/request.js index 0f8ba0d..ba8b8cd 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -1,36 +1,36 @@ import axios from "axios"; -// import { Loading } from "element-ui"; //项目已经全局引入element的话可以不单独引入 -// let loading; //定义loading变量 -// function startLoading() { -// //使用Element loading-start 方法 -// loading = Loading.service({ -// lock: true, -// text: "加载中……", -// background: "rgba(255, 255, 255, 0.7)", -// }); -// } -// function endLoading() { -// //使用Element loading-close 方法 -// loading.close(); -// } -//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。 -//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。 -//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。 -// let needLoadingRequestCount = 0; -// export function showFullScreenLoading() { -// if (needLoadingRequestCount === 0) { -// startLoading(); -// } -// needLoadingRequestCount++; -// } +import { Loading } from "element-ui"; //项目已经全局引入element的话可以不单独引入 +let loading; //定义loading变量 +function startLoading() { + //使用Element loading-start 方法 + loading = Loading.service({ + lock: true, + text: "加载中……", + background: "rgba(255, 255, 255, 0.7)", + }); +} +function endLoading() { + //使用Element loading-close 方法 + loading.close(); +} +// 那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。 +// 声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。 +// 调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。 +let needLoadingRequestCount = 0; +export function showFullScreenLoading() { + if (needLoadingRequestCount === 0) { + startLoading(); + } + needLoadingRequestCount++; +} -// export function tryHideFullScreenLoading() { -// if (needLoadingRequestCount <= 0) return; -// needLoadingRequestCount--; -// if (needLoadingRequestCount === 0) { -// endLoading(); -// } -// } +export function tryHideFullScreenLoading() { + if (needLoadingRequestCount <= 0) return; + needLoadingRequestCount--; + if (needLoadingRequestCount === 0) { + endLoading(); + } +} const service = axios.create({ // process.env.NODE_ENV === 'development' 来判断是否开发环境 @@ -43,7 +43,7 @@ const service = axios.create({ service.interceptors.request.use( (config) => { - //showFullScreenLoading(); + showFullScreenLoading(); return config; }, (error) => { @@ -55,7 +55,7 @@ service.interceptors.request.use( service.interceptors.response.use( (response) => { if (response.status === 200) { - // tryHideFullScreenLoading(); + tryHideFullScreenLoading(); return response.data; } else { Promise.reject(); diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index 07be9b2..2abc0dd 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -11,7 +11,7 @@ v-for="item in terminalPhoto" :key="item.id" > - +
- +

{{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}

@@ -111,55 +111,59 @@ export default { display: flex; flex-direction: column; height: 100%; - .slide { - width: 20%; - } + box-sizing: border-box; .gallery-top { - // height: 80% !important; - height: 80% !important; - width: 100%; + //background: #fcc; + width: calc(100% - 6px); + height: 80%; + overflow: hidden; + border: 3px solid transparent; + .slide-1 { + width: 100%; + overflow: hidden; + + img { + width: 1360px; + height: auto; + object-fit: cover; + } + } } .gallery-thumbs { - height: 20% !important; - box-sizing: border-box; - padding: 10px 0px; width: 100%; - margin-left: 2px; - background-color: #f0f0f8; - - .swiper-button-next { - right: 0px; - } - .swiper-button-prev { - left: 0px; + height: 18%; + .slide { + width: 20%; + border: 3px solid transparent; + overflow: hidden; + box-sizing: border-box; + img { + width: 320px; + height: auto; + object-fit: cover; + } } + .timeInfo { position: absolute; - bottom: 0; + bottom: 0px; width: 100%; background: #f0f0f0; - padding: 4px 0px; + padding: 8px 0px; font-size: 14px; text-align: center; color: @color-text-primary; } } - .swiper-slide { - background-size: cover; - background-position: center; - //border: 3px solid transparent; - } - - .gallery-thumbs .swiper-slide { - // width: 20%; - // height: 80px; - // opacity: 0.4; - } - .slide { - border: 3px solid transparent; - } - .gallery-thumbs .swiper-slide-active { - border: 3px solid @color-primary; + .nopic { + display: flex; + align-items: center; + justify-content: center; + img { + object-fit: fill; + width: 100% !important; + height: 100% !important; + } } } diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index 077d996..a788d2d 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -1,69 +1,70 @@ @@ -143,13 +144,13 @@ export default { console.log(this.currentNodekey); this.channelId = this.currentNodekey; console.log(this.channelId); + this.getChannelList(this.channelId); //获取通道id接口 }); } }) .catch((err) => { console.log(err); //代码错误、请求失败捕获 }); - this.getChannelList(this.channelId); //获取通道id接口 }, //点击获取当前点击的tree数据 handleNodeClick(data, node) { @@ -190,6 +191,7 @@ export default { }, //获取图片 getTerminalPhotoList(id, date, termId) { + this.terminalPhoto = []; console.log(id, date, termId); getTerminalPhotoListJoggle({ channelid: id, @@ -198,6 +200,7 @@ export default { }) .then((res) => { console.log(res); + this.terminalPhoto = res.data.list; console.log(this.terminalPhoto); }) @@ -213,6 +216,7 @@ export default { return i.value === val; }); console.log(channelObj); + this.getTerminalPhotoList(val, this.dateValue, channelObj.termid); }, }, @@ -220,59 +224,67 @@ export default {