<template>
<div
class="app-container"
:class="[pageMode === 'pageMode2560' ? 'pageMode2560' : '']"
>
<div class="tag—title">
物联感知
</div>
<div class="swiper-detail" @click="detailClick">
<img
class="detail-img"
:src="
`https://zhld.wlcszhld.com:8443/qjzh-fs/preview/permanent/iot/icon/${deviceDetail.iconClass}_detail.png`
"
/>
<div class="detail-content">
<div class="content-item-2">
<span class="label">设备名称:</span>
<span class="value">{{ deviceDetail.productGroupName }}</span>
</div>
<div class="content-item-2">
<span class="label">设备数量:</span>
<span class="value">{{ deviceDetail.totalNum + 100 }}个</span>
</div>
</div>
</div>
<div class="swiper-box">
<swiper
v-if="deviceList.length > 0"
ref="mySwiper"
:options="swiperOptions"
>
<swiper-slide v-for="(item, index) in deviceList" :key="index">
<img
class="swiper-img"
:src="
`https://zhld.wlcszhld.com:8443/qjzh-fs/preview/permanent/iot/icon/${item.iconClass}_pressed.svg`
"
@click="clickImg(item)"
/>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
import { getPerceptionDevice } from '@/api/cockpit';
export default {
name: 'PerceptionDevice',
props: {
pageMode: {
type: String,
default: 'pageMode3480'
}
},
data() {
const that = this;
return {
imgIndex: 0,
deviceList: [],
deviceDetail: {
productGroupCode: '',
productGroupName: '',
totalNum: 0,
iconClass: 'map_AI'
},
swiperOptions: {
slidesPerView: 5,
autoplay: {
stopOnLastSlide: false,
disableOnInteraction: false
},
delay: 1000,
loop: true,
spaceBetween: 15, // 间隔30
on: {
slideChangeTransitionStart() {
that.imgIndex = this.realIndex;
}
}
}
};
},
watch: {
imgIndex(newVal) {
this.deviceDetail = this.deviceList[newVal];
}
},
mounted() {
this.queryDeviceList();
},
methods: {
detailClick() {
this.$emit('deviceClick', this.deviceDetail.productGroupCode);
},
clickImg(item) {
this.deviceDetail = item;
},
async queryDeviceList() {
const form = new FormData();
form.append('token', this.$store.getters.token);
getPerceptionDevice(form).then(ret => {
const res = ret.data.body;
this.deviceList = res;
this.deviceDetail = res[0];
});
}
}
};
</script>
<style lang="scss" scoped>
.app-container {
width: 100%;
height: 100%;
padding: 0px 14px;
.tag—title {
width: 100%;
height: 47px;
font-size: 20px;
color: #1af1e9;
line-height: 47px;
background: url('~@/assets/images/bigScreen/top-figure2.png') no-repeat;
background-size: 100% 100%;
}
&.pageMode2560 {
padding: 0 60px 0 55px;
.tag—title {
height: 34px;
padding-left: 38px;
line-height: 34px;
text-align: left;
color: #fff;
background: url('~@/assets/images/bigScreen/title-bg2560.png') no-repeat;
background-size: 100% 100%;
}
}
.swiper-detail {
width: 100%;
height: 150px;
display: flex;
padding: 10px 20px;
margin-bottom: 20px;
cursor: pointer;
.detail-img {
width: 240px;
height: 140px;
border: 1px solid #fff;
}
.detail-content {
height: 150px;
padding: 24px 0 0 10px;
.content-item-2 {
line-height: 40px;
margin-bottom: 10px;
font-size: 22px;
.label {
margin-right: 10px;
color: #faf889;
}
.value {
color: #16fdfe;
}
}
}
}
.swiper-box {
width: 100%;
height: 80px;
.swiper-container {
width: 500px;
height: 70px;
.swiper-slide {
width: 100%;
height: 100%;
}
.swiper-img {
width: 98%;
height: 100%;
object-fit: fill;
border: 1px solid #fff;
cursor: pointer;
}
}
}
}
</style>
1 <template>
2 <div class="major-project-box">
3 <div class="swiper-title">
4 重点项目
5 </div>
6 <swiper
7 ref="mySwiper"
8 :options="swiperOptions"
9 v-if="swiperData && swiperData.length > 0"
10 >
11 <swiper-slide v-for="(item, index) in swiperData" :key="index">
12 <div @click="handleClickSlide">
13 <img class="img" :src="item.groupImage" />
14 <div class="desc">
15 {{ item.detail }}
16 </div>
17 <div class="name">
18 {{ item.name }}
19 </div>
20 </div>
21 </swiper-slide>
22 </swiper>
23 </div>
24 </template>
25
26 <script>
27 import { getMajorVR } from '@/api/cockpit';
28 export default {
29 name: 'MajorProjects',
30 data() {
31 const that = this;
32 return {
33 imgIndex: 0,
34 swiperData: [],
35 swiperItem: {},
36 swiperOptions: {
37 slidesPerView: 3, // 一行显示3个
38
39 delay: 3000,
40 loop: true,
41 autoplay: {
42 stopOnLastSlide: false,
43 disableOnInteraction: false
44 },
45 spaceBetween: 50, // 间隔
46 observer: true, // 修改swiper自己或子元素时，自动初始化swiper
47 observeParents: true, // 修改swiper的父元素时，自动初始化swiper
48 on: {
49 slideChangeTransitionStart() {
50 that.imgIndex = this.realIndex;
51 // console.log('imgIndex', that.imgIndex);
52 }
53 }
54 }
55 };
56 },
57 created() {
58 this.querySwiperData();
59 },
60
61 methods: {
62 querySwiperData() {
63 getMajorVR().then(res => {
64 this.swiperData = res.data.data;
65 });
66 },
67 handleClickSlide() {
68 // 我得到的index就是点击的item在实际数组中的下标index
69 // console.log(item);
70 const item = this.swiperData[this.imgIndex];
71 this.$emit('swiperItemClick', item);
72 }
73 }
74 };
75 </script>
76
77 <style lang="scss" scoped>
78 .major-project-box {
79 width: 100%;
80 height: 100%;
81 padding: 0px 30px;
82 .swiper-title {
83 width: 100%;
84 height: 47px;
85 font-size: 20px;
86 color: #1af1e9;
87 line-height: 47px;
88 background: url('~@/assets/images/bigScreen/top-figure1.png') no-repeat;
89 background-size: 100% 100%;
90 }
91 .swiper-container {
92 width: 100%;
93 height: 253px;
94 .swiper-slide {
95 width: 100%;
96 width: 100%;
97 position: relative;
98 cursor: pointer;
99 .img {
100 width: 100%;
101 height: 150px;
102 object-fit: fill;
103 border: 1px solid #fff;
104 margin-bottom: 8px;
105 }
106 .desc {
107 height: 80px;
108 text-indent: 2em;
109 font-size: 16px;
110 line-height: 20px;
111 color: #fff;
112 overflow: hidden;
113 -webkit-line-clamp: 4;
114 text-overflow: ellipsis;
115 display: flex;
116 display: -webkit-box;
117 -webkit-box-orient: vertical;
118 }
119 .name {
120 font-size: 18px;
121 font-weight: bold;
122 color: #fff;
123 line-height: 30px;
124 position: absolute;
125 top: 4px;
126 left: 30px;
127 }
128 }
129 .swiper-pagination {
130 :deep(.swiper-pagination-bullet-active) {
131 background-color: #00a1fd !important;
132 opacity: unset !important;
133 width: 10px;
134 height: 10px;
135 }
136 :deep(.swiper-pagination-bullet) {
137 background: #00a1fd !important;
138 opacity: 0.3;
139 }
140 }
141 }
142 }
143 </style>
