124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
<!--
|
|
* @FilePath: \wwwd:\code\screenFront\src\views\Mechanics\child\index.vue
|
|
* @Author: 王路平
|
|
* @文件版本: V1.0.0
|
|
* @Date: 2023-02-21 14:13:42
|
|
* @Description:
|
|
*
|
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
|
-->
|
|
<template>
|
|
<div class="container">
|
|
<swiper-container
|
|
:slides-per-view="1"
|
|
:initialSlide="page"
|
|
effect="coverflow"
|
|
:space-between="spaceBetween"
|
|
:centered-slides="true"
|
|
:pagination="{
|
|
hideOnClick: true,
|
|
}"
|
|
@progress="onProgress"
|
|
@slidechange="onSlideChange"
|
|
>
|
|
<swiper-slide v-for="res in store.mechanicsData" :key="res.index">
|
|
<index :title="res.titleChild" :type="res.type"></index>
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts" >
|
|
import { onBeforeMount, onMounted, onUnmounted, ref } from "vue";
|
|
// import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import { register } from "swiper/element/bundle";
|
|
import index from "./main/index.vue";
|
|
import { useRoute,useRouter } from "vue-router";
|
|
import { gatDeviceStatusOfMF } from "@/http/Mechanics";
|
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
|
import { useMechanicsStore } from "@/store/module/Mechanics";
|
|
const route=useRoute()
|
|
const router=useRouter()
|
|
const store = useMechanicsStore();
|
|
register();
|
|
let page = ref();
|
|
const spaceBetween = 10;
|
|
const onProgress = (e) => {
|
|
// const [swiper, progress] = e.detail;
|
|
// console.log(progress)
|
|
};
|
|
|
|
const onSlideChange = (e) => {
|
|
// console.log(e.detail[0].activeIndex
|
|
// console.log(e, "e");
|
|
|
|
store.changePage(e.detail[0].activeIndex + 1);
|
|
router.replace(`/Mechanics/${e.detail[0].activeIndex+1}`);
|
|
};
|
|
|
|
async function gatDeviceStatusOfMFfun() {
|
|
let result: any = await gatDeviceStatusOfMF();
|
|
store.changeloading(true);
|
|
if (result.code == 200) {
|
|
store.changeMechanicsDatadata(result.data);
|
|
}
|
|
}
|
|
|
|
function getWebsocket(val) {
|
|
try {
|
|
let data = JSON.parse(val);
|
|
// if (data.type == "DeviceStatusCountsOfOutPlant") {
|
|
// console.log(data.msg);
|
|
|
|
// store.socketMechanicsDatadata(data.msg);
|
|
// }
|
|
//实时推送的数据
|
|
if (data.type == "DeviceStatusInMF") {
|
|
store.socketDeviceStatusInMF(data.msg);
|
|
}
|
|
} catch (err) {}
|
|
}
|
|
function errWebsocket(val) {
|
|
// console.log(val);
|
|
}
|
|
onBeforeMount(() => {
|
|
// page.value = store.page?store.page - 1:+route.params.id-1;
|
|
store.changePage(+route.params.id)
|
|
page.value=+route.params.id-1;
|
|
});
|
|
onMounted(() => {
|
|
gatDeviceStatusOfMFfun();
|
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
|
});
|
|
onUnmounted(() => {
|
|
closeWebsocket();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 1080px;
|
|
width: 1920px;
|
|
color: #20aec5;
|
|
background-color: #100c2a;
|
|
}
|
|
.swiper-container {
|
|
height: 1080px;
|
|
width: 1920px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
body {
|
|
|
|
/* --content:calc(100vh - var(--header)) */
|
|
overflow: hidden !important;
|
|
-ms-overflow-style: none; /* IE + Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|