150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
Vue
<template>
|
|
<view class="index-container">
|
|
<z-paging ref="paging" use-virtual-list @query="queryList" bg-color="#F3F3F3" :loading-more-enabled="false">
|
|
<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 v-if="item.deviceTypeId!=9">
|
|
<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"
|
|
export default {
|
|
data() {
|
|
return {
|
|
ijs: getApp().ijs, // 首页公共js
|
|
title: "",
|
|
isFirst: true,
|
|
user: store.state.user.user,
|
|
query: {
|
|
companyGroupId: null,
|
|
},
|
|
}
|
|
},
|
|
onShow() {
|
|
if (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) {
|
|
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> |