jsy-app/pages/fourmonitor/index.vue
2024-12-27 10:49:14 +08:00

161 lines
3.9 KiB
Vue

<template>
<view class="index-container">
<z-paging ref="paging" use-virtual-list @query="queryList" bg-color="#F3F3F3" :loading-more-enabled="false">
<template #top>
<custom-nav-bar :left="true" title="农情"></custom-nav-bar>
</template>
<template #cell="{item}">
<view class="item-container" @click="onClickItem(item)">
<view class="flex" style="flex-grow: 5;">
<view>
<view>
<view class="title" v-if="item.deviceTypeId==6">气象站</view>
<view class="title" v-if="item.deviceTypeId==7">虫情</view>
<view class="title" v-if="item.deviceTypeId==8">孢子</view>
<view class="title" v-if="item.deviceTypeId==9">监控</view>
<view class="text" v-if="item.deviceCode">{{item.deviceCode}}</view>
<view class="text" v-else>-</view>
</view>
</view>
<view >
<view>
<view class="title">状态</view>
<view class="text" v-if="item.status == 'online'">在线</view>
<view class="text" v-else>离线</view>
</view>
</view>
<view>
<view>
<view class="title"></view>
<view class="text"><u-icon name="arrow-right" style="margin-left: 10px;"></u-icon>
</view>
</view>
</view>
</view>
</view>
</template>
</z-paging>
</view>
</template>
<script>
import {
checkPermi
} from "@/utils/permission"
import store from "@/store"
import plugin from "@/plugins"
import {
getOtherDeviceList
} from "@/api/system/controlOtherInterface"
import { getAccessTokenAndUrl } from "@/api/system/outdevice";
export default {
data() {
return {
ijs: getApp().ijs, // 首页公共js
title: "",
isFirst: true,
user: store.state.user.user,
query: {
companyGroupId: null,
},
accessToken:null,
ezopenUrl:null
}
},
onShow() {
if (this.ijs.land) {
console.log(this.ijs.land)
this.query.companyGroupId = this.ijs.land.companyGroupId;
this.queryList();
}
},
methods: {
queryList() {
if(!this.query.companyGroupId){
return;
}
getOtherDeviceList(this.query.companyGroupId).then(res => {
this.$refs.paging.complete(res.data)
});
},
// 获取地块信息
getLand(e) {
this.ijs.getLand(e.node).then(res => {
this.$refs.landRef.addLand(e, res.data);
});
},
// 地块选择回调
landChange(e) {
this.title = e.landName;
this.query.landId = land.id;
queryList();
},
onClickItem(item) {
if (item.deviceTypeId === 6) {
plugin.tab.navigateTo("/pages/fourmonitor/weatherstation?item=" + encodeURIComponent(JSON.stringify(item)))
}
if (item.deviceTypeId === 7) {
plugin.tab.navigateTo("/pages/fourmonitor/pest?item=" + encodeURIComponent(JSON.stringify(item)))
}
if (item.deviceTypeId === 8) {
plugin.tab.navigateTo("/pages/fourmonitor/spore?item=" + encodeURIComponent(JSON.stringify(item)))
}
if (item.deviceTypeId === 9) {
if(!item.ezopenUrl1 ||!item.ezopenUrl2){
plugin.modal.msgError("获取播放地址失败!");
return;
}
plugin.tab.navigateTo("/pages/fourmonitor/camera?item=" + encodeURIComponent(JSON.stringify(item)))
}
}
}
}
</script>
<style lang="scss">
.index-container {
background-color: #F6F3F3;
height: 100%;
.search {
background-color: white;
padding: 10px;
}
.item-container {
margin: 10px 10px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
.flex {
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0px 10px 5px;
}
.title {
color: #8D8D8D;
margin: auto;
text-align: center;
}
.text {
margin-top: 10px;
text-align: center;
}
.bottom-text {
margin-top: 20px;
}
.bottom {
margin: 10px 30px 0px 30px;
display: flex;
justify-content: space-between;
}
}
}
</style>