<template>
|
<view class="index ">
|
<!-- <uni-popup ref="popup" type="right" border-radius="10px 10px 0 0" style="margin-top: 80px;position: fixed; z-index: 9999999999999999999999;" >底部弹出 Popup 自定义圆角</uni-popup> -->
|
<view style="margin-top: 80px;position: fixed; z-index: 9999999999999999999999;">
|
<view v-for="(item,index) in warnlist" :key="index" style="margin-top: 10px;">
|
<u-alert :show="show" type="warning" :closable="true" :description="item"></u-alert>
|
</view>
|
</view>
|
<view>
|
<!-- 普通弹窗 -->
|
<!-- <uni-popup ref="popup" background-color="#fff" @change="change">
|
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"
|
style="width:100px;margin-top: 80px;"><text class="text">popup 内容</text>
|
|
</view>
|
<uni-tooltip :content="content" placement="top"
|
:style="{position: 'absolute',bottom:tabBarHeight+80+'px'}">
|
<button size="mini" @click="acquisition">采集</button>
|
</uni-tooltip>
|
<button @click="save" size="mini"
|
:style="{position: 'absolute',bottom:tabBarHeight+40+'px'}">保存</button>
|
<button @click="close" size="mini" :style="{position: 'absolute',bottom:tabBarHeight+'px'}">关闭</button>
|
</uni-popup> -->
|
</view>
|
|
|
<mainCom v-show="currentIndex == 0" ref="mainRef"></mainCom>
|
<bumenCom v-show="currentIndex == 5" ref="mainRef" @tobumen="tobumen"></bumenCom>
|
<equipmentCom v-show="currentIndex == 1"></equipmentCom>
|
<homeCom v-show="currentIndex == 2 && !isceju" :tabheight='tabBarHeight' :webHeight='webHeight'
|
:topheight='topheight' :bottomheight='bottomheight' :fenceposition="fenceposition"></homeCom>
|
<cejuCom v-if="currentIndex == 3 && isceju" :webHeight='webHeight' :topheight='topheight'></cejuCom>
|
<fenceCom v-show="currentIndex == 3" @toggle="toggle" @toposition="toposition"></fenceCom>
|
<personCom v-show="currentIndex == 4" @tobumen="tobumen"></personCom>
|
<view class="tn-skeleton tn-skeleton-fillet">
|
<tn-tabbar @change="chenge" :shadow="false" v-model="currentIndex" :safeAreaInsetBottom="true"
|
:list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA" :activeIconColor="activeIconColor"
|
:animation="true" v-if="showTabbar"></tn-tabbar>
|
</view>
|
|
<tn-skeleton :show="showSkeleton"></tn-skeleton>
|
<u-modal confirmText="去登录" title="您还未登录" content="请登录后查看更多内容!" cancelText="再看看" :show="showfaka"
|
@cancel="cancelfaka" @confirm="confirmfaka" ref="uModal" :showCancelButton="true"
|
:closeOnClickOverlay="false">
|
|
</u-modal>
|
<successCom ref="refSuccess"></successCom>
|
</view>
|
</template>
|
|
<script>
|
import successCom from '@/components/success.vue'
|
import {
|
getUserCid,
|
findAllFence,
|
startorstop,
|
findWarningNum,
|
earlyWarning,
|
} from '@/config/api.js';
|
import store from '@/store/index.js'
|
import {
|
formatDate,
|
get_time_cha_s
|
} from '@/js/tools.js'
|
import {
|
DateFormat
|
} from '@/js/DateFormat.js'
|
|
import homeCom from './home.vue';
|
import bumenCom from './bumen.vue';
|
import mainCom from './main.vue';
|
import personCom from './person.vue';
|
import equipmentCom from './equipment.vue';
|
import fenceCom from './fence.vue';
|
|
export default {
|
components: {
|
bumenCom,
|
successCom,
|
homeCom,
|
mainCom,
|
personCom,
|
equipmentCom,
|
fenceCom,
|
},
|
data() {
|
return {
|
indexlist: [2],
|
fenceposition: '',
|
step: '',
|
activeIconColor: 'tn-cool-bg-color-9',
|
tarindex: 2,
|
content: '1111',
|
showfaka: false,
|
show: true,
|
title: '登高望远',
|
description: '欲穷千里目，更上一层楼',
|
warningNum: 0,
|
// link: 'http://www.baidu.com',
|
showSkeleton: true,
|
currentIndex: -1,
|
showTabbar: true,
|
scrollHeight: 800,
|
topheight: 0,
|
bottomheight: 0,
|
webHeight: 0,
|
tabBarHeight: 0,
|
title: 'Hello',
|
list: [{
|
text: '分享'
|
}],
|
warnlist: [],
|
tabbarList: [
|
// {
|
// title: '首页',
|
// activeIcon: '/static/tabbar/report_f_icon.png',
|
// inactiveIcon: '/static/tabbar/report_l_icon.png',
|
// iconSize: 42,
|
// activeColor: '#40A290',
|
// },
|
|
{
|
title: '信息',
|
activeIcon: '/static/tabbar/info_l_icon.png',
|
inactiveIcon: '/static/tabbar/info_f_icon.png',
|
iconSize: 42,
|
activeColor: '#40A290',
|
// count: 0,
|
// activeIconColor: '#FFFFFF',
|
// inactiveIconColor: '#FFFFFF',
|
// iconSize: 50,
|
// out: true
|
},
|
{
|
title: '标签',
|
activeIcon: '/static/tabbar/equipment_f_icon.png',
|
inactiveIcon: '/static/tabbar/equipment_l_icon.png',
|
iconSize: 42,
|
activeColor: '#40A290',
|
// activeIconColor: '#FFFFFF',
|
// inactiveIconColor: '#FFFFFF',
|
// iconSize: 50,
|
// out: true
|
},
|
{
|
title: '首页',
|
activeIcon: 'play',
|
inactiveIcon: 'home-capsule',
|
bgColor: '#55ff00',
|
activeIconColor: '#FFFFFF',
|
inactiveIconColor: '#FFFFFF',
|
iconSize: 50,
|
outHeight: 150,
|
out: true
|
},
|
{
|
title: '围栏',
|
activeIcon: '/static/tabbar/fence_f_icon.png',
|
inactiveIcon: '/static/tabbar/fence_l_icon.png',
|
iconSize: 42,
|
activeColor: '#40A290',
|
// activeIconColor: '#FFFFFF',
|
// inactiveIconColor: '#FFFFFF',
|
// iconSize: 50,
|
// // out: true
|
},
|
|
{
|
title: '我的',
|
activeIcon: '/static/tabbar/my_f_icon.png',
|
inactiveIcon: '/static/tabbar/my_l_icon.png',
|
iconSize: 42,
|
activeColor: '#40A290',
|
}
|
],
|
}
|
},
|
onLoad() {
|
const systemInfo = uni.getSystemInfoSync()
|
this.tabBarHeight = systemInfo.windowBottom
|
// ''uni.onBackPress(this.onBackPressHandler)
|
// this.earlyWarning();
|
// this.findWarningNum();
|
},
|
computed: {
|
pageTitle() {
|
return this.tabbarList[this.currentIndex].title
|
},
|
heHeight() {
|
let num = 0;
|
return num;
|
}
|
},
|
onReachBottom() {
|
|
},
|
watch: {
|
|
},
|
mounted() {
|
this.getapp();
|
this.getTabBarHeight();
|
this.$nextTick(() => {
|
// 获取系统信息
|
const systemInfo = uni.getSystemInfoSync()
|
this.skeletonHeight = systemInfo.safeArea.height
|
this.webHeight = this.skeletonHeight - this.tabBarHeight
|
|
// this.vuex_status_bar_height = this.webHeight
|
this.currentIndex = 2
|
})
|
this.webHeight = this.skeletonHeight - this.vuex_custom_bar_height - this.tabBarHeight + this
|
.vuex_status_bar_height
|
// store.commit('$tStore', {
|
// name: 'webHeight',
|
// value: this.webHeight
|
// })
|
this.topheight = this.vuex_custom_bar_height + 15
|
store.commit('$tStore', {
|
name: 'bleHeight',
|
value: this.topheight
|
})
|
this.tabbarList[2].title = '开始'
|
this.tabbarList[2].activeIcon = 'play'
|
// this.bottomheight = this.tabBarHeight + 15
|
this.currentIndex = 2
|
let indexHeight = 0
|
// #ifdef MP-WEIXIN
|
this.marginTop = this.vuex_custom_bar_height
|
indexHeight = 40
|
// #endif
|
|
// #ifdef APP-PLUS || APP
|
this.marginTop = this.vuex_custom_bar_height
|
indexHeight = 20
|
// #endif
|
|
// #ifdef H5
|
this.marginTop = this.vuex_custom_bar_height + this.vuex_status_bar_height
|
indexHeight = 50
|
// #endif
|
|
store.commit('$tStore', {
|
name: 'vuex_custom_scroll_height',
|
value: this.scrollHeight - this.tabBarHeight
|
})
|
|
store.commit('$tStore', {
|
name: 'vuex_padding_top',
|
value: this.marginTop
|
})
|
store.commit('$tStore', {
|
name: 'vuex_custom_index_height',
|
value: this.indexHeight
|
})
|
setTimeout(() => {
|
this.showSkeleton = false
|
}, 1000)
|
|
},
|
methods: {
|
onBackPress(e) {
|
const indexOfFour = this.indexlist.indexOf(this.currentIndex)
|
// backbutton：物理按键返回
|
if (e.from === 'backbutton') {
|
// 唤醒保存询问弹窗
|
if (indexOfFour > 0) {
|
this.currentIndex = this.indexlist[indexOfFour - 1]
|
this.indexlist.splice(indexOfFour, 1)
|
|
}
|
return true
|
}
|
},
|
getapp() {
|
if (this.vuex_is_login == true) {
|
|
let data = {
|
cid: this.uuid,
|
username: this.vuex_user,
|
password: this.phone
|
}
|
// 登录成功后跳转首页 - 正式
|
getUserCid(data).then((res) => {
|
if (res.code != 0) {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
store.commit('$tStore', {
|
name: 'vuex_is_login',
|
value: false
|
})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/pages/index/index'
|
});
|
}, 3000);
|
|
// store.commit('$tStore', {
|
// name: 'uuid',
|
// value: ''
|
// })
|
// this.show = true;
|
|
}
|
})
|
}
|
setTimeout(() => {
|
this.getapp();
|
}, 1000);
|
},
|
tobumen(e) {
|
this.currentIndex = e
|
},
|
toposition(e) {
|
this.currentIndex = 2
|
console.log(e);
|
this.fenceposition = e
|
},
|
// beforeSwitch(index) {
|
// // 只能切换偶数项
|
// if (index !=2) return true
|
// else return false
|
// },
|
close() {
|
this.$refs.popup.close()
|
},
|
toggle() {
|
this.currentIndex = 2
|
// this.type = type
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
this.$refs.popup.open("right")
|
},
|
cancelfaka() {
|
this.showfaka = false
|
uni.reLaunch({
|
url: '/pages/index/index'
|
});
|
},
|
confirmfaka() {
|
this.showfaka = false
|
uni.reLaunch({
|
url: '/pages/index/login'
|
});
|
},
|
tabChange(index) {
|
uni.redirectTo({
|
url: this.list[index]['pagePath']
|
})
|
},
|
getTabBarHeight() {
|
uni.createSelectorQuery().in(this).select('.tn-tabbar').boundingClientRect(data => {
|
if (data) {
|
this.tabBarHeight = data.height;
|
this.bottomheight = this.tabBarHeight + 15
|
var allheight = this.skeletonHeight - this.tabBarHeight - 16
|
store.commit('$tStore', {
|
name: 'vuex_custom_index_height',
|
value: allheight
|
})
|
}
|
}).exec();
|
|
},
|
closeHandler(e) {
|
this.warnlist.splice(e, 1)
|
},
|
timeToSeconds(time) {
|
//把时间转成秒数，相减，在转成分钟，得出时间
|
const [hours, minutes, seconds] = time.split(':').map(Number);
|
return (hours * 3600) + (minutes * 60) + seconds;
|
},
|
|
findWarningNum() {
|
const params = {
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
findWarningNum(params).then((res) => {
|
if (res.code == 0) {
|
this.tabbarList[1].count = res.data
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: res.msg
|
});
|
}
|
})
|
}
|
setTimeout(() => {
|
//5秒播放一次
|
this.findWarningNum();
|
}, 2000);
|
},
|
|
workAudio() {
|
let _this = this;
|
let src = '';
|
if (this.step == 'STOP') {
|
src = '../../static/voice/startWork.wav';
|
} else if (this.step == 'START') {
|
src = '../../static/voice/suspendWork.wav';
|
} else if (this.step == 'end') {
|
src = '../../static/voice/endWork.wav';
|
}
|
|
//实例化声音
|
const Audio = uni.createInnerAudioContext();
|
Audio.autoplay = true;
|
Audio.src = src; //音频地址
|
Audio.play(); //执行播放
|
Audio.onError(res => {});
|
Audio.onEnded(function() {
|
Audio.destroy();
|
});
|
},
|
|
chenge(index) {
|
console.log(3333333);
|
console.log(index);
|
this.indexlist.push(index)
|
console.log(this.tarindex);
|
var state = ''
|
if (this.vuex_is_login) {
|
if (this.tarindex == 2 && index == 2) {
|
const params = {
|
company: this.company,
|
}
|
if (this.vuex_is_login) {
|
if (uni.getStorageSync('isfence') == true) {
|
findAllFence(params).then((res) => {
|
if (res.data.length > 0) {
|
if (this.step == 'START' || this.step == '') {
|
console.log(111111);
|
this.tabbarList[2].title = '暂停'
|
this.tabbarList[2].activeIcon = 'stop'
|
this.activeIconColor = 'tn-cool-bg-color-16'
|
this.step = 'STOP'
|
state = 'START'
|
// zystate = 'START'
|
store.commit('$tStore', {
|
name: 'zystate',
|
value: 'START'
|
})
|
this.workAudio()
|
} else if (this.step == 'STOP') {
|
console.log(222222);
|
this.tabbarList[2].title = '开始'
|
this.tabbarList[2].activeIcon = 'play'
|
this.activeIconColor = 'tn-cool-bg-color-9'
|
this.step = 'START'
|
state = 'STOP'
|
store.commit('$tStore', {
|
name: 'zystate',
|
value: 'STOP'
|
})
|
this.workAudio()
|
}
|
|
// }
|
const params1 = {
|
status: state,
|
company: this.company,
|
addperson: this.vuex_user,
|
|
}
|
startorstop(params1).then((res) => {})
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '当前无围栏，无法开启作业'
|
});
|
}
|
})
|
|
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请先开启围栏功能'
|
});
|
}
|
} else {
|
this.$refs.refSuccess.showBox({
|
type: 'error',
|
txt: '请先登录'
|
});
|
}
|
|
|
//判断是否有围栏，以及围栏是否启用
|
|
|
|
|
|
|
|
} else {
|
|
if (index != 2) {
|
this.tabbarList[2].title = '首页'
|
this.activeIconColor = 'tn-cool-bg-color-7'
|
// store.commit('$tStore', {
|
// name: 'zystate',
|
// value: 'STOP'
|
// })
|
} else {
|
// this.tabbarList[2].title = '开始'
|
// this.tabbarList[2].activeIcon = 'play'
|
// this.activeIconColor = 'tn-cool-bg-color-9'
|
console.log(this.step);
|
if (this.step == 'START' || this.step == '') {
|
console.log(111111);
|
this.tabbarList[2].title = '开始'
|
this.tabbarList[2].activeIcon = 'play'
|
this.activeIconColor = 'tn-cool-bg-color-9'
|
// this.step = 'STOP'
|
// state = 'STOP'
|
// zystate = 'START'
|
// store.commit('$tStore', {
|
// name: 'zystate',
|
// value: 'STOP'
|
// })
|
// this.workAudio()
|
} else if (this.step == 'STOP') {
|
console.log(222222);
|
this.tabbarList[2].title = '暂停'
|
this.tabbarList[2].activeIcon = 'stop'
|
this.activeIconColor = 'tn-cool-bg-color-16'
|
|
// this.step = 'START'
|
// // state = 'START'
|
// // store.commit('$tStore', {
|
// // name: 'zystate',
|
// // value: 'START'
|
// // })
|
// // this.workAudio()
|
}
|
}
|
}
|
this.tarindex = index
|
} else {
|
// this.tarindex == 2 && index == 2''
|
console.log(index);
|
console.log(this.currentIndex);
|
if (index != 4) {
|
this.showfaka = true
|
}
|
|
}
|
|
},
|
click(index) {
|
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.index {
|
overflow: hidden;
|
height: 100%;
|
}
|
|
.content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.home-search {
|
background-color: #fff !important;
|
z-index: 2;
|
}
|
|
.logo {
|
height: 200rpx;
|
width: 200rpx;
|
margin-top: 200rpx;
|
margin-left: auto;
|
margin-right: auto;
|
margin-bottom: 50rpx;
|
}
|
|
.text-area {
|
display: flex;
|
justify-content: center;
|
}
|
|
.title {
|
font-size: 36rpx;
|
color: #8f8f94;
|
}
|
|
.custom-tabbar-page {
|
height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
|
background-color: #f8f8f8;
|
}
|
</style>
|
