xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改图片轮播

Browse Source
master
fanluyan 2 years ago
parent 7bf6a3e8b0
commit 98e915aa7c
4 changed files with 197 additions and 181 deletions
Show Stats Download Patch File Download Diff File

4
src/assets/css/theme.less
Unescape Escape View File

@ -264,7 +264,7 @@
> .el-tree-node__content { > .el-tree-node__content {
// 设置颜色 // 设置颜色
color: #fff; color: #fff;
background: @orange-color !important; background: #f39b33 !important;
} }
.el-menu--horizontal .el-menu-item.is-active i { .el-menu--horizontal .el-menu-item.is-active i {
color: @orange-color; color: @orange-color;
@ -276,7 +276,7 @@
.el-tree-node.is-current .el-tree-node.is-current
> .el-tree-node__content { > .el-tree-node__content {
color: #fff; color: #fff;
background: @orange-color; background: #f39b33 !important;
} }
.gallery-thumbs .swiper-slide-active { .gallery-thumbs .swiper-slide-active {

60
src/utils/request.js
Unescape Escape View File

@ -1,36 +1,36 @@
import axios from "axios"; import axios from "axios";
// import { Loading } from "element-ui"; //项目已经全局引入element的话可以不单独引入 import { Loading } from "element-ui"; //项目已经全局引入element的话可以不单独引入
// let loading; //定义loading变量 let loading; //定义loading变量
// function startLoading() { function startLoading() {
// //使用Element loading-start 方法 //使用Element loading-start 方法
// loading = Loading.service({ loading = Loading.service({
// lock: true, lock: true,
// text: "加载中……", text: "加载中……",
// background: "rgba(255, 255, 255, 0.7)", background: "rgba(255, 255, 255, 0.7)",
// }); });
// } }
// function endLoading() { function endLoading() {
// //使用Element loading-close 方法 //使用Element loading-close 方法
// loading.close(); loading.close();
// } }
// 那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。 // 那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
// 声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。 // 声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
// 调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。 // 调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
// let needLoadingRequestCount = 0; let needLoadingRequestCount = 0;
// export function showFullScreenLoading() { export function showFullScreenLoading() {
// if (needLoadingRequestCount === 0) { if (needLoadingRequestCount === 0) {
// startLoading(); startLoading();
// } }
// needLoadingRequestCount++; needLoadingRequestCount++;
// } }
// export function tryHideFullScreenLoading() { export function tryHideFullScreenLoading() {
// if (needLoadingRequestCount <= 0) return; if (needLoadingRequestCount <= 0) return;
// needLoadingRequestCount--; needLoadingRequestCount--;
// if (needLoadingRequestCount === 0) { if (needLoadingRequestCount === 0) {
// endLoading(); endLoading();
// } }
// } }
const service = axios.create({ const service = axios.create({
// process.env.NODE_ENV === 'development' 来判断是否开发环境 // process.env.NODE_ENV === 'development' 来判断是否开发环境
@ -43,7 +43,7 @@ const service = axios.create({
service.interceptors.request.use( service.interceptors.request.use(
(config) => { (config) => {
//showFullScreenLoading(); showFullScreenLoading();
return config; return config;
}, },
(error) => { (error) => {
@ -55,7 +55,7 @@ service.interceptors.request.use(
service.interceptors.response.use( service.interceptors.response.use(
(response) => { (response) => {
if (response.status === 200) { if (response.status === 200) {
// tryHideFullScreenLoading(); tryHideFullScreenLoading();
return response.data; return response.data;
} else { } else {
Promise.reject(); Promise.reject();

72
src/views/components/carouselChart.vue
Unescape Escape View File

@ -11,7 +11,7 @@
v-for="item in terminalPhoto" v-for="item in terminalPhoto"
:key="item.id" :key="item.id"
> >
<img :src="item.path" style="width: 100%" alt="" /> <img :src="item.path" alt="" />
</swiper-slide> </swiper-slide>
<div <div
class="swiper-button-next swiper-button-white" class="swiper-button-next swiper-button-white"
@ -33,7 +33,7 @@
v-for="(item, index) in terminalPhoto" v-for="(item, index) in terminalPhoto"
:key="item.id" :key="item.id"
> >
<img style="width: 100%" :src="item.path" alt="" /> <img :src="item.path" alt="" />
<p class="timeInfo"> <p class="timeInfo">
{{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }} {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
</p> </p>
@ -111,55 +111,59 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.slide { box-sizing: border-box;
width: 20%;
}
.gallery-top { .gallery-top {
// height: 80% !important; //background: #fcc;
height: 80% !important; width: calc(100% - 6px);
height: 80%;
overflow: hidden;
border: 3px solid transparent;
.slide-1 {
width: 100%; width: 100%;
overflow: hidden;
img {
width: 1360px;
height: auto;
object-fit: cover;
}
}
} }
.gallery-thumbs { .gallery-thumbs {
height: 20% !important;
box-sizing: border-box;
padding: 10px 0px;
width: 100%; width: 100%;
margin-left: 2px; height: 18%;
background-color: #f0f0f8; .slide {
width: 20%;
.swiper-button-next { border: 3px solid transparent;
right: 0px; overflow: hidden;
box-sizing: border-box;
img {
width: 320px;
height: auto;
object-fit: cover;
} }
.swiper-button-prev {
left: 0px;
} }
.timeInfo { .timeInfo {
position: absolute; position: absolute;
bottom: 0; bottom: 0px;
width: 100%; width: 100%;
background: #f0f0f0; background: #f0f0f0;
padding: 4px 0px; padding: 8px 0px;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
color: @color-text-primary; color: @color-text-primary;
} }
} }
.swiper-slide { .nopic {
background-size: cover; display: flex;
background-position: center; align-items: center;
//border: 3px solid transparent; justify-content: center;
} img {
object-fit: fill;
.gallery-thumbs .swiper-slide { width: 100% !important;
// width: 20%; height: 100% !important;
// height: 80px;
// opacity: 0.4;
}
.slide {
border: 3px solid transparent;
} }
.gallery-thumbs .swiper-slide-active {
border: 3px solid @color-primary;
} }
} }
</style> </style>

20
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -1,4 +1,5 @@
<template> <template>
<div class="monitorBox">
<div class="monitor-container"> <div class="monitor-container">
<!-- 左侧数据列表树 --> <!-- 左侧数据列表树 -->
<div class="sideBar"> <div class="sideBar">
@ -27,7 +28,6 @@
</div> </div>
<!-- <router-view></router-view> --> <!-- <router-view></router-view> -->
<!-- 中心内容 --> <!-- 中心内容 -->
<!-- <picturemain :photoData="photoData" v-if="showBigPic"></picturemain> --> <!-- <picturemain :photoData="photoData" v-if="showBigPic"></picturemain> -->
<!-- 带参数的中心内容右侧参数区 --> <!-- 带参数的中心内容右侧参数区 -->
<div class="picSetBox"> <div class="picSetBox">
@ -66,6 +66,7 @@
<!-- <paramArea></paramArea> --> <!-- <paramArea></paramArea> -->
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -143,13 +144,13 @@ export default {
console.log(this.currentNodekey); console.log(this.currentNodekey);
this.channelId = this.currentNodekey; this.channelId = this.currentNodekey;
console.log(this.channelId); console.log(this.channelId);
this.getChannelList(this.channelId); //获取通道id接口
}); });
} }
}) })
.catch((err) => { .catch((err) => {
console.log(err); //代码错误、请求失败捕获 console.log(err); //代码错误、请求失败捕获
}); });
this.getChannelList(this.channelId); //获取通道id接口
}, },
//点击获取当前点击的tree数据 //点击获取当前点击的tree数据
handleNodeClick(data, node) { handleNodeClick(data, node) {
@ -190,6 +191,7 @@ export default {
}, },
//获取图片 //获取图片
getTerminalPhotoList(id, date, termId) { getTerminalPhotoList(id, date, termId) {
this.terminalPhoto = [];
console.log(id, date, termId); console.log(id, date, termId);
getTerminalPhotoListJoggle({ getTerminalPhotoListJoggle({
channelid: id, channelid: id,
@ -198,6 +200,7 @@ export default {
}) })
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.terminalPhoto = res.data.list; this.terminalPhoto = res.data.list;
console.log(this.terminalPhoto); console.log(this.terminalPhoto);
}) })
@ -213,6 +216,7 @@ export default {
return i.value === val; return i.value === val;
}); });
console.log(channelObj); console.log(channelObj);
this.getTerminalPhotoList(val, this.dateValue, channelObj.termid); this.getTerminalPhotoList(val, this.dateValue, channelObj.termid);
}, },
}, },
@ -220,16 +224,23 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.monitorBox {
width: calc(100% - 16px);
height: calc(100% - 32px);
padding: 16px 8px;
background: #ffffff;
.monitor-container { .monitor-container {
display: flex; display: flex;
height: 100%; height: 100%;
border: 1px solid @border-color-base;
box-sizing: border-box; box-sizing: border-box;
background: @color-white; background: @color-white;
border: 1px solid #dddddd;
border-radius: 4px;
.sideBar { .sideBar {
width: 300px; width: 300px;
border-right: 1px solid @border-color-base; border-right: 1px solid @border-color-base;
overflow: auto; overflow: auto;
padding: 16px 0px;
.el-tree { .el-tree {
.el-tree-node__content { .el-tree-node__content {
height: 40px; height: 40px;
@ -259,7 +270,7 @@ export default {
} }
} }
.parameterArea { .parameterArea {
width: 300px; width: 220px;
padding: 16px 16px; padding: 16px 16px;
border-left: 1px solid #dcdfe6; border-left: 1px solid #dcdfe6;
.monitorItemBox, .monitorItemBox,
@ -277,4 +288,5 @@ export default {
} }
} }
} }
}
</style> </style>

Write Preview
Loading…
Cancel
Save