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

轮播图

Browse Source
master
fanluyan 2 years ago
parent 12270b6a7c
commit 3c5ffe8de0
6 changed files with 12057 additions and 171 deletions
Show Stats Download Patch File Download Diff File

11961
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
Unescape Escape View File

@ -33,7 +33,8 @@
"less": "^4.1.3", "less": "^4.1.3",
"less-loader": "^11.1.0", "less-loader": "^11.1.0",
"style-resources-loader": "^1.5.0", "style-resources-loader": "^1.5.0",
"vue-awesome-swiper": "^3.1.3", "swiper": "^5.3.6",
"vue-awesome-swiper": "^4.1.0",
"vue-cli-plugin-style-resources-loader": "^0.1.5", "vue-cli-plugin-style-resources-loader": "^0.1.5",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
}, },

12
src/main.js
Unescape Escape View File

@ -13,11 +13,11 @@ Vue.use(ElementUI, {
import * as echarts from "echarts"; import * as echarts from "echarts";
Vue.prototype.$echarts = echarts; Vue.prototype.$echarts = echarts;
// 引入 vue-awesome-swiper // // 引入 vue-awesome-swiper
import VueAwesomeSwiper from "vue-awesome-swiper"; // import VueAwesomeSwiper from "vue-awesome-swiper";
//引入 vue-awesome-swiper 样式 // //引入 vue-awesome-swiper 样式
import "swiper/dist/css/swiper.css"; // import "swiper/dist/css/swiper.css";
Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */); // Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */);
import "./assets/css/reset.css"; //默认样式 import "./assets/css/reset.css"; //默认样式
import "./assets/css/theme.less"; //修改主题颜色 import "./assets/css/theme.less"; //修改主题颜色
@ -50,7 +50,7 @@ new Vue({
//使用钩子函数对路由进行权限跳转 //使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | 可视化智能管控系统`; document.title = `${to.meta.title} | 视频监控可视化平台`;
const role = localStorage.getItem("username"); const role = localStorage.getItem("username");
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
if (!role && to.path !== "/login") { if (!role && to.path !== "/login") {

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

@ -55,36 +55,25 @@
</template> </template>
<script> <script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default { export default {
components: {
Swiper,
SwiperSlide,
},
props: { props: {
terminalPhoto: { terminalPhoto: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}, },
mounted() {
// 实现swiper双向控制
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper;
const swiperThumbs = this.$refs.swiperThumbs.swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
});
},
data() { data() {
return { return {
swiperOptionTop: { swiperOptionTop: {
//zoom: true,//缩放功能
loop: true, loop: true,
loopedSlides: 5, // looped slides should be the same loopedSlides: 5, // looped slides should be the same
//spaceBetween: 10, spaceBetween: 10,
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
// autoplay: {
// //自动轮播
// delay: 2000,
// disableOnInteraction: false,
// },
navigation: { navigation: {
nextEl: ".swiper-button-next", nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev", prevEl: ".swiper-button-prev",
@ -96,15 +85,19 @@ export default {
spaceBetween: 10, spaceBetween: 10,
centeredSlides: true, centeredSlides: true,
slidesPerView: "auto", slidesPerView: "auto",
// touchRatio: 0.2, touchRatio: 0.2,
slideToClickedSlide: true, slideToClickedSlide: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
}, },
}; };
}, },
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper;
const swiperThumbs = this.$refs.swiperThumbs.$swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
});
},
methods: {}, methods: {},
}; };
@ -186,19 +179,11 @@ export default {
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;
} }
.swiper-button-next.swiper-button-white, .swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-prev:after,
.swiper-button-prev.swiper-button-white, .swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next.swiper-button-white { .swiper-container-rtl .swiper-button-next:after {
background-size: 45% 45%; transform: scale(0.5);
}
.gallery-thumbs {
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white,
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
top: 60%;
}
} }
} }
</style> </style>

168
src/views/components/carouselChart2.vue
Unescape Escape View File

@ -1,39 +1,60 @@
<template> <template>
<!-- banner区域 --> <div class="thumb-example2">
<div class="banner"> <swiper
<div class="wrapper"> class="swiper gallery-top"
<div class="swiper-box" style="height: 500px" v-if="childDataList.length"> :options="swiperOptionTop"
<!-- swiper1 --> ref="swiperTop"
<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> >
<swiper-slide class="" v-for="item in childDataList" :key="item.id"> <swiper-slide
<img :src="item.path" alt="" style="width: 100%" /> :class="`slide-${index + 1}`"
</swiper-slide> v-for="(item, index) in terminalPhoto"
:key="item.id"
<div v-bind:style="{
class="swiper-button-next swiper-button-white" 'background-image': 'url(' + item.path + ')',
slot="button-next" }"
></div> ></swiper-slide>
<div <!-- <swiper-slide class="slide-2"></swiper-slide>
class="swiper-button-prev swiper-button-white" <swiper-slide class="slide-3"></swiper-slide>
slot="button-prev" <swiper-slide class="slide-4"></swiper-slide>
></div> <swiper-slide class="slide-5"></swiper-slide> -->
</swiper> <div
<!-- swiper2 Thumbs --> class="swiper-button-next swiper-button-white"
<swiper slot="button-next"
:options="swiperOptionThumbs" ></div>
class="gallery-thumbs" <div
ref="swiperThumbs" class="swiper-button-prev swiper-button-white"
> slot="button-prev"
<swiper-slide class="" v-for="item in childDataList" :key="item.id"> ></div>
<img :src="item.path" alt="" style="height: 100%; width: 100%" /> </swiper>
</swiper-slide> <!-- swiper2 Thumbs -->
</swiper> <swiper
</div> class="swiper gallery-thumbs"
</div> :options="swiperOptionThumbs"
ref="swiperThumbs"
>
<swiper-slide
:class="`slide-${index + 1}`"
v-for="(item, index) in terminalPhoto"
:key="item.id"
v-bind:style="{
'background-image': 'url(' + item.path + ')',
}"
></swiper-slide>
</swiper>
</div> </div>
</template> </template>
<script> <script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default { export default {
name: "swiper-example-thumbs-gallery",
title: "Thumbs gallery with Two-way control",
components: {
Swiper,
SwiperSlide,
},
props: { props: {
terminalPhoto: { terminalPhoto: {
type: Array, type: Array,
@ -42,15 +63,10 @@ export default {
}, },
data() { data() {
return { return {
childDataList: [],
swiperOptionTop: { swiperOptionTop: {
loop: true, loop: true,
loopedSlides: 5, // looped slides should be the same loopedSlides: 5, // looped slides should be the same
spaceBetween: 10, spaceBetween: 10,
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
navigation: { navigation: {
nextEl: ".swiper-button-next", nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev", prevEl: ".swiper-button-prev",
@ -64,71 +80,47 @@ export default {
slidesPerView: "auto", slidesPerView: "auto",
touchRatio: 0.2, touchRatio: 0.2,
slideToClickedSlide: true, slideToClickedSlide: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
}, },
}; };
}, },
watch: {
terminalPhoto: {
handler(val) {
console.log("dataObj deep change", val);
this.childDataList = val;
console.log(this.childDataList);
},
deep: true, // 深度监听
immediate: true, // 初次监听即执行
},
},
methods: {},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper; const swiperTop = this.$refs.swiperTop.$swiper;
const swiperThumbs = this.$refs.swiperThumbs.swiper; const swiperThumbs = this.$refs.swiperThumbs.$swiper;
swiperTop.controller.control = swiperThumbs; swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop; swiperThumbs.controller.control = swiperTop;
}); });
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.banner { .thumb-example2 {
.wrapper { height: 480px;
width: 100%; background-color: #000;
//margin: 300px auto; .swiper {
} .swiper-slide {
} background-size: cover;
background-position: center;
}
.swiper-container { &.gallery-top {
background-color: #fff; height: 80%;
} width: 100%;
swiper-slide { }
img { &.gallery-thumbs {
width: 100%; height: 20%;
height: 100%; box-sizing: border-box;
padding: 10px 0;
}
&.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
&.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
} }
} }
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 80% !important;
width: 100%;
}
.gallery-thumbs {
height: 20% !important;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
</style> </style>

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

@ -32,7 +32,10 @@
<!-- 带参数的中心内容右侧参数区 --> <!-- 带参数的中心内容右侧参数区 -->
<div class="picSetBox"> <div class="picSetBox">
<div class="swiperBox"> <div class="swiperBox">
<carouselChart :terminalPhoto="terminalPhoto"></carouselChart> <carouselChart
:terminalPhoto="terminalPhoto"
v-if="terminalPhoto"
></carouselChart>
</div> </div>
<div class="parameterArea"> <div class="parameterArea">
<div class="paramsDate"> <div class="paramsDate">
@ -122,6 +125,28 @@ export default {
this.getLineTreeList(); this.getLineTreeList();
this.getDateTime(); this.getDateTime();
console.log(this.dateValue); console.log(this.dateValue);
getTerminalPhotoListJoggle({
channelid: 1,
time: 1681833600000,
terminalid: 5,
})
.then((res) => {
console.log(res);
if (res.data.list.length == 0) {
this.terminalPhoto = [
{
path: this.nopicPath,
},
];
//alert("没有数据哈");
} else {
this.terminalPhoto = res.data.list;
}
console.log(this.terminalPhoto);
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
});
}, },
methods: { methods: {
//获取当前时间 //获取当前时间

Write Preview
Loading…
Cancel
Save