122 lines
2.7 KiB
Vue
122 lines
2.7 KiB
Vue
<template>
|
|
<div class="videoListBig">
|
|
<div class="title"><i>监控设备列表</i></div>
|
|
<vue-scroll style="height: 500px;">
|
|
<div class="content">
|
|
<div class="decivList">
|
|
<div class="menuDev" v-for="item in videoList" :key="item.id" :class="item.deviceState == 1 ? 'online' : 'offline'">
|
|
<div class="decName">
|
|
<!-- <span v-show="item.deviceState == 1"><img src="@/assets/images/dustNoise/onlineImg.png" alt="" /></span> -->
|
|
<!-- <span v-show="item.deviceState == 2"><img src="@/assets/images/dustNoise/offImg.png" alt="" /></span> -->
|
|
<span style="white-space: nowrap"> {{ item.videoName }}</span>
|
|
</div>
|
|
<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { GlobalStore } from "@/stores";
|
|
// import { useRouter } from "vue-router";
|
|
import { selectProjectVideoListApi, selectUserVideoListApi } from "@/api/modules/video";
|
|
// const router = useRouter();
|
|
const store = GlobalStore();
|
|
|
|
let videoList = ref([] as any);
|
|
|
|
function loadData() {
|
|
selectProjectVideoListApi({
|
|
projectSn: store.sn
|
|
}).then(res => {
|
|
videoList.value = res.result.videoList[0].list;
|
|
console.log("视频列表", res);
|
|
});
|
|
}
|
|
function loadData2() {
|
|
selectUserVideoListApi({
|
|
projectSn: store.sn
|
|
// userId: store.userId
|
|
}).then(res => {
|
|
console.log("子账号视频列表", res);
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
loadData();
|
|
loadData2();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.videoListBig {
|
|
width: 100%;
|
|
overflow: scroll;
|
|
.title {
|
|
height: 5%;
|
|
line-height: 35px;
|
|
text-align: left;
|
|
font-size: calc(100vw * 18 / 1920);
|
|
color: #ffffff;
|
|
background: url("@/assets/images/titleImg.webp") no-repeat;
|
|
background-size: 150% 100%;
|
|
i {
|
|
margin-left: 50px;
|
|
font-family: OPPOSansH;
|
|
}
|
|
}
|
|
.content {
|
|
height: 800px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
}
|
|
}
|
|
.decivList {
|
|
width: 100%;
|
|
height: 70%;
|
|
.menuDev {
|
|
height: 6%;
|
|
background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
display: flex;
|
|
line-height: 35px;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
margin: 2% 3%;
|
|
cursor: pointer;
|
|
.decName {
|
|
width: 30%;
|
|
span {
|
|
margin-left: 10%;
|
|
}
|
|
}
|
|
.status {
|
|
margin-left: 56%;
|
|
}
|
|
}
|
|
.menuDev:hover {
|
|
height: 6%;
|
|
background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.online {
|
|
.status {
|
|
color: #65d7f9;
|
|
}
|
|
}
|
|
.offline {
|
|
.status {
|
|
color: #ec6266;
|
|
}
|
|
}
|
|
</style>
|