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

对接数据接口

Browse Source
master
fanluyan 2 years ago
parent 6e7dd5af92
commit fde176b539
4 changed files with 64 additions and 49 deletions
Show Stats Download Patch File Download Diff File

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

@ -6,8 +6,12 @@
:options="swiperOptionTop"
ref="swiperTop"
>
<swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
<img :src="item.url" style="width: 100%; height: 100%" alt="" />
<swiper-slide
class="slide-1"
v-for="item in terminalPhoto"
:key="item.id"
>
<img :src="item.path" style="width: 100%; height: 100%" alt="" />
</swiper-slide>
<div
class="swiper-button-next swiper-button-white"
@ -27,11 +31,11 @@
<swiper-slide
class="slide"
style="width: 30%; height: 100%"
v-for="(item, index) in bigImg"
v-for="(item, index) in terminalPhoto"
:key="item.id"
>
<img style="width: 100%; height: 100%" :src="item.url" alt="" />
<p class="timeInfo">{{ 7 + index }}:00:12</p>
<img style="width: 100%; height: 100%" :src="item.path" alt="" />
<p class="timeInfo">{{ item.photoTime }}</p>
</swiper-slide>
<div
class="swiper-button-next swiper-button-white"
@ -47,6 +51,12 @@
<script>
export default {
props: {
terminalPhoto: {
type: Array,
default: () => [],
},
},
mounted() {
// 实现swiper双向控制
this.$nextTick(() => {
@ -59,32 +69,32 @@ export default {
data() {
return {
//轮播大图配置
bigImg: [
{
url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg",
id: 0,
},
{
url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg",
id: 1,
},
{
url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg",
id: 2,
},
{
url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg",
id: 3,
},
{
url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg",
id: 4,
},
{
url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg",
id: 5,
},
],
// bigImg: [
// {
// url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/210509/XYIGQ10C221000080_21050918190300_1_255.jpg",
// id: 0,
// },
// {
// url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323100012_1_255_res.jpg",
// id: 1,
// },
// {
// url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323090012_1_255_res.jpg",
// id: 2,
// },
// {
// url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323080011_1_255_res.jpg",
// id: 3,
// },
// {
// url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323070012_1_255_res.jpg",
// id: 4,
// },
// {
// url: "http://180.166.218.222:8104/media/local/XYIGQ10C221000080/202303/XYIGQ10C221000080_20230323060012_1_255_res.jpg",
// id: 5,
// },
// ],
swiperOptionTop: {
zoom: true,
loop: true,
@ -120,7 +130,7 @@ export default {
methods: {},
};
</script>
<style lang="less" scoped>
<style lang="less">
.thumb-example {
width: 100%;
display: flex;
@ -135,8 +145,9 @@ export default {
height: 20% !important;
box-sizing: border-box;
padding: 10px 0px;
width: auto;
width: 100%;
margin-left: 2px;
background-color: #f0f0f8;
.swiper-button-next {
right: 0px;
}
@ -153,19 +164,18 @@ export default {
text-align: center;
}
}
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-thumbs .swiper-slide {
// width: 20%;
// height: 80px;
// opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
border: 3px solid @color-primary;
.gallery-thumbs .swiper-slide {
// width: 20%;
// height: 80px;
// opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
border: 3px solid @color-primary;
}
}
</style>

2
src/views/management/monitoringEquipment/photographicDevice/index.vue
Unescape Escape View File

@ -87,6 +87,7 @@
:data="terminalTableData"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 40px)"
border
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@ -292,6 +293,7 @@ export default {
}
.photoGraphicTable {
padding: 16px 8px 0 8px;
height: calc(100% - 80px);
}
}
</style>

3
src/views/management/userEquipment/lineInformation/index.vue
Unescape Escape View File

@ -42,6 +42,7 @@
:data="lineTableData"
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 40px)"
border
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@ -212,6 +213,8 @@ export default {
}
.lineTable {
padding: 16px 8px 0 8px;
height: calc(100% - 80px);
//background: #fcc;
}
}
</style>

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

@ -24,12 +24,12 @@
<!-- 带参数的中心内容右侧参数区 -->
<div class="picSetBox">
<div class="swiperBox">
{{ terminalPhoto }}
<!-- {{ terminalPhoto }}
<div class="pic" v-for="item in terminalPhoto">
<img :src="item.path" style="width: 100%; height: 100%" alt="" />
</div>
</div> -->
<!-- <carouselChart></carouselChart> -->
<carouselChart :terminalPhoto="terminalPhoto"></carouselChart>
</div>
<div class="parameterArea">
<div class="monitorItemBox">

Write Preview
Loading…
Cancel
Save