<template>
|
<view class="template-job tn-safe-area-inset-bottom tn-skeleton">
|
|
<!-- 顶部自定义导航 -->
|
<tn-nav-bar fixed :isBack="false" style="position: absolute;z-index: 999999999;">
|
<text v-if="isAchor==false" class="title_linespan" style="color: #00aaff;text-decoration: underline;"
|
@click="goAchor">基站</text>
|
<text v-else class="title_linespan" @click="goAchor">基站</text>
|
<text class="title_linespan" style="margin-left: 10px;" @click="goTag">标签</text>
|
</tn-nav-bar>
|
|
<view v-show="lock==false" class="page-wrap u-skeleton">
|
<view style="display: flex;width: 50%;left: 5%"
|
:style="{display:'flex', top: topheight+'px',position: 'absolute',width: '50%',left: '5%'}">
|
|
<view style="color: #00aaff;">在线：{{online}}</view>
|
<view style="color: #00aaff;margin-left: 20px;">离线：{{offline}}</view>
|
</view>
|
<!-- <u-search class="searchbg" shape="true" bg-color="rgba(255, 255, 255, 0.5)" placeholder="请输入名称" :show-action="false" v-model="keyword" @search="searchxinxi"
|
:style="{top: topheight+'px',position: 'absolute',width: '90%',left: '5%'}"></u-search> -->
|
<data-list :width="width" class="data-list" ref="list" @load="handleLoad" @refresh="handleRefresh"
|
style="margin-top: 100px;">
|
|
|
<view v-for="(item, index) in list" :key="index">
|
<!-- <view class="avatar"></view> -->
|
<!-- <tn-button v-if="item.anchormode==1" class="modal-btn2" backgroundColor="#01BEFF" size="sm"
|
@click="itemClick(item,index)">在线</tn-button>
|
<tn-button v-else class="modal-btn" backgroundColor="#ff0000" size="sm"
|
@click="itemClick(item,index)">离线</tn-button> -->
|
<view style="display: flex;margin-bottom: 10px;" class="flex flex-direction">
|
<u-badge v-if="item.anchormode==1" style="margin-top: 8px;margin-right: 8px;" :isDot="true"
|
type="success"></u-badge>
|
<u-badge v-else style="margin-top: 8px;margin-right: 8px;" :isDot="true" type="info"></u-badge>
|
<view>编号:{{item.anchorid}}</view>
|
<view v-if="item.anchormode==1" style="margin-left: 20px;">在线</view>
|
<view v-else style="margin-left: 20px;">离线</view>
|
<view style="margin-left: 20px;">
|
版本:{{item.version}}</view>
|
<view style="margin-left: 20px;">电量:{{item.baoliu8}}%</view>
|
</view>
|
|
<!-- <view style="display: flex;"> -->
|
<!-- <view style="padding: 2px;font-size: 12px;color: #5e5e5e;">序号：{{item.id}}</view> -->
|
<!-- <view>坐标:{{item.posx}}</view>
|
<view>坐标:{{item.posy}}</view>
|
<view>坐标:{{item.posz}}</view> -->
|
<view style="margin-left: 14px;margin-bottom: 10px;color: #5e5e5e;">
|
坐标:X{{item.posx}}；Y{{item.posy}}；Z{{item.posz}}；F{{item.layer}}</view>
|
<view style="margin-left: 14px;margin-bottom: 10px;color: #5e5e5e;">时间:{{item.greateTime}}</view>
|
<u-line style="margin-left: 14px;margin-bottom: 10px;"></u-line>
|
<!-- <view style="margin-left: 10px; background-color: rgba(255, 181, 166, 1.0); " >{{item.type}}</view> -->
|
<!-- </view> -->
|
</view>
|
</data-list>
|
</view>
|
<tn-skeleton :show="showSkeleton"></tn-skeleton>
|
<successCom ref="refSuccess"></successCom>
|
<!-- <u-empty text="暂未开放" mode="list" style="width: 90%; top: 30%;left: 5%; position: absolute; "></u-empty> -->
|
<!-- u-search class="searchbg" shape="true" bg-color="rgba(255, 255, 255, 0.5)" placeholder="请输入名称" :show-action="false"
|
:style="{top: topheight+'px',position: 'absolute',width: '50%',left: '25%'}"></u-search> -->
|
<tagCom v-show="lock==true" @goAchor="goAchor"></tagCom>
|
</view>
|
</template>
|
|
<script>
|
import tagCom from '@/pages/index/tag.vue'
|
import successCom from '@/components/success.vue'
|
|
import {
|
minLogin
|
} from '@/js/minLogin.js'
|
import {
|
findAchor,
|
findTag
|
} from '@/config/api.js';
|
import {
|
pagesEquipment
|
} from '@/js/pages/equipment.js'
|
export default {
|
mixins: [minLogin, pagesEquipment],
|
components: {
|
tagCom,
|
successCom
|
},
|
data() {
|
return {
|
width: '40%',
|
online: 0,
|
offline: 0,
|
isAchor: false,
|
warnindex: 0,
|
warlist: {},
|
lock: false,
|
keyword: '',
|
pageNo: 1,
|
pageSize: 10,
|
imgStyle: {
|
width: '100px',
|
height: '1000px',
|
borderRadius: '50%'
|
},
|
showSkeleton: true,
|
options: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737',
|
}
|
}, ],
|
boxKey: 0,
|
scrollHeight: 500,
|
topheight: 0,
|
paddingTop: 60,
|
emitDate: 'indexHome',
|
show: false,
|
time: '',
|
list: [],
|
total: 0,
|
options1: [{
|
text: '删除',
|
style: {
|
backgroundColor: '#F93737'
|
}
|
}]
|
}
|
},
|
computed: {
|
countList() {
|
let num = 0;
|
for (let i in this.list) {
|
num += this.list[i].fQty;
|
}
|
return num;
|
}
|
},
|
mounted() {
|
this.topheight = this.vuex_custom_bar_height + 15
|
setTimeout(() => {
|
this.showSkeleton = false
|
}, 1000)
|
|
// this.$refs.refSuccess.showBox({
|
// type:'error',//success/error/warning,
|
// txt:'操作失败，请重试！'
|
// })
|
|
this.scrollHeight = this.screenHeight - 282;
|
|
setTimeout(() => {
|
this.paddingTop = this.vuex_padding_top
|
this.paddingTop += 5
|
}, 400)
|
|
},
|
methods: {
|
|
goAchor() {
|
// this.isAchor = true
|
this.lock = false
|
},
|
goTag() {
|
this.isAchor = false
|
this.lock = true
|
},
|
|
// 模拟请求加载数据
|
handleLoad(data, callback) {
|
const params = {
|
current: data.page,
|
size: data.size,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findAchor(params).then((res) => {
|
this.online = res.online
|
this.offline = res.offline
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}else{
|
callback({
|
list: [],
|
total: 0
|
});
|
}
|
},
|
handleSearch(data, callback) {
|
const params = {
|
current: 1,
|
size: 10,
|
objectid: this.keyword,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findAchor(params).then((res) => {
|
this.online = res.online
|
this.offline = res.offline
|
this.list = []
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}
|
},
|
// 模拟请求数据刷新
|
handleRefresh(data, callback) {
|
const params = {
|
current: data.page,
|
size: data.size,
|
objectid: data.objectid,
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findAchor(params).then((res) => {
|
this.online = res.online
|
this.offline = res.offline
|
if (res.code == 0) {
|
let list = [];
|
setTimeout(() => {
|
let list = [];
|
for (var i = 0; i < res.data.records.length; i++) {
|
list.push(res.data.records[i]);
|
}
|
this.list = []
|
this.list = [...this.list, ...list];
|
callback({
|
list: this.list,
|
total: res.data.total
|
});
|
}, 1500);
|
}
|
})
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
/* 鼠标未悬浮时效果设置 */
|
.title_linespan {
|
font-size: 17px;
|
font-weight: bold;
|
// font-weight: 100px;
|
color: #000000
|
}
|
|
/* 鼠标悬浮后的设置 */
|
.title_linespan:hover {
|
font-size: 17px;
|
font-weight: bold;
|
color: #00aaff;
|
text-decoration: underline;
|
}
|
|
.modal-btn {
|
position: absolute;
|
|
left: 75%;
|
// margin-top: -40px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// box-sizing: border-box;
|
// width: 120rpx;
|
// height: 40rpx;
|
// background: rgba(103, 149, 255, 0.2);
|
}
|
|
.modal-btn::before {
|
content: "\2022";
|
/* Unicode 字符编码表示的圆点 */
|
color: #5f5f5f;
|
/* 可以设置圆点的颜色，这里是红色 */
|
// margin-right: 5px; /* 可以设置圆点与文字之间的距离 */
|
/* 如果需要更大的圆点，可以使用下面的属性 */
|
font-size: 20px;
|
/* 设置圆点的大小 */
|
}
|
|
.modal-btn2 {
|
position: absolute;
|
|
left: 75%;
|
// margin-top: -40px;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// box-sizing: border-box;
|
// width: 120rpx;
|
// height: 40rpx;
|
// background: rgba(103, 149, 255, 0.2);
|
}
|
|
.modal-btn2::before {
|
content: "\2022";
|
/* Unicode 字符编码表示的圆点 */
|
color: #55aa7f;
|
/* 可以设置圆点的颜色，这里是红色 */
|
// margin-right: 5px; /* 可以设置圆点与文字之间的距离 */
|
/* 如果需要更大的圆点，可以使用下面的属性 */
|
font-size: 20px;
|
/* 设置圆点的大小 */
|
}
|
|
.page-wrap {
|
height: 100%;
|
padding-top: 45px;
|
padding-left: 30rpx;
|
padding-right: 30rpx;
|
|
.test-view {
|
height: 300rpx;
|
}
|
|
.navbar-content {
|
width: 100%;
|
display: flex;
|
padding: 30rpx;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.u-icon {
|
margin-left: 30rpx;
|
}
|
|
.item-wrap {
|
display: flex;
|
margin: 10rpx;
|
padding: 30rpx;
|
align-items: center;
|
border-radius: 16rpx;
|
box-shadow: 0rpx 8rpx 16rpx rgba(0, 0, 0, 0.11);
|
|
.avatar {
|
width: 150rpx;
|
height: 150rpx;
|
margin-right: 30rpx;
|
border-radius: 16rpx;
|
background-color: #c0c0c0;
|
}
|
|
.item {
|
// width: 100rpx;
|
height: 30rpx;
|
margin-bottom: 10rpx;
|
border-radius: 16rpx;
|
background-color: #c8c7cc;
|
}
|
|
}
|
}
|
</style>
|
