|
- <template>
- <view class="cented">
- <view class="header">
- <view style="width: 690rpx;margin: 0 auto;margin-top: 20rpx;">
- <u-search @search='shecs()' :show-action='false' placeholder="请输入设备编号或领用人进行搜索" v-model="imei"></u-search>
- </view>
-
- <view class="tab-box">
- <!-- <view class="tab-item-wrap">
- <view v-for="(item, index) in tablist" :key="index" :class="activeClass == index ? 'bottom' : ''" @tap="clocktab(index)">
- {{item.names}}( {{item.num}} )
- <view class="bottomLine" v-if="activeClass == index"></view>
- </view>
- </view> -->
- <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="700" :current="activeClass" @change="clocktab()"
- inactive-color="#b1b1b1" active-color="#008ef2" :list="tablist" :is-scroll="true">
- </u-tabs-swiper>
- </view>
- </view>
-
-
- <view class="infoet">
- <view class="infoviewbox" v-for="(item,index) in newListdata" :key="index">
- <view class="infobox1">
- <view class="box1-zuo">领用人:{{item.accName || '--'}}</view>
- <view class="box1-you">
- <view class="you1" v-if="item.electricity>20">
- <view class="youimg" :style="{ height: item.electricity + '%' }"></view>
- </view>
- <view class="you11" v-if="item.electricity<20">
- <view class="youimg" :style="{ height: item.electricity + '%' }"></view>
- </view>
- <view class="you2">电量:
- <text v-if="item.electricity>20">{{item.electricity}}%</text>
- <text v-if="item.electricity<20" style="color: red;">{{item.electricity}}%</text>
- </view>
-
- <view class="you3">
- <image v-if="item.signalDevice==''" class="youimg" src="../../../static/images/newimg/xinhao0.png" mode=""></image>
- <image v-if="item.signalDevice<20 && item.signalDevice>0" class="youimg" src="../../../static/images/newimg/xinhao1.png" mode=""></image>
- <image v-if="item.signalDevice<50 && item.signalDevice>20" class="youimg" src="../../../static/images/newimg/xinhao2.png" mode=""></image>
- <image v-if="item.signalDevice<70 && item.signalDevice>50" class="youimg" src="../../../static/images/newimg/xinhao3.png" mode=""></image>
- <image v-if="item.signalDevice<90 && item.signalDevice>70" class="youimg" src="../../../static/images/newimg/xinhao4.png" mode=""></image>
- <image v-if="item.signalDevice<=100 && item.signalDevice>90" class="youimg" src="../../../static/images/newimg/xinhao5.png" mode=""></image>
- </view>
- <view class="you4" v-if="item.signalDevice=='' ">信号:0</view>
- <view class="you4" v-else>信号:{{item.signalDevice}}</view>
- </view>
-
- </view>
- <view class="infobox2">
- <view class="box2-zuo">设备编号</view>
- <view class="box2-you">{{item.imei}}</view>
- </view>
- <view class="infobox2">
- <view class="box2-zuo">录音状态</view>
- <view class="box2-you" v-if="item.audioStatus=='false'">关闭</view>
- <view class="box2-you" v-if="item.audioStatus=='true'">开启</view>
- <view class="box2-you" v-if="item.audioStatus=='' ">关闭</view>
- </view>
- <view class="infobox2">
- <view class="box2-zuo">待上传</view>
- <template v-if="item.fileCount && item.fileCount > 0">
- <text class="stayupload">{{ item.fileCount }}条</text>
- </template>
- <template v-else>
- <text class="box2-you">0</text>
- </template>
- <!-- <view class="box2-you" v-if="item.audioUploadStatus=='false'">无上传</view>
- <view class="box2-you" v-if="item.audioUploadStatus=='true'">上传中</view>
- <view class="box2-you" v-if="item.audioUploadStatus=='' ">无上传</view> -->
- </view>
- <view class="infobox2">
- <view class="box2-zuo">更新时间</view>
- <view class="box2-you">{{item.updateTime}}</view>
- </view>
- <view class="infobox2" v-if="activeClass==1">
- <view class="box2-zuo">最后在线时间</view>
- <view class="box2-you" style="font-size: 28rpx;color: red;">{{item.updateTime | formatDate}}</view>
- </view>
- </view>
- </view>
-
-
-
- </view>
- </template>
-
- <script>
- var util = require("../../../utils/util.js");
- export default {
- data() {
- return {
- tablist: [
- {
- name: "全部(0)",
- },
- {
- name: "在线(0)",
- },
- {
- name: "低电量(0)",
- },
- {
- name: "今日活跃(0)",
- },
- {
- name: "离线(0)",
- }
- ],
- activeClass: 0,
- pageNum:1,
- pageSize:20,
- imei:"",
- orgcode:"",
- newListdata:[],
- buildingID:'',
- jump:''
- };
- },
- onReachBottom() {
- this.pageNum +=1;
- this.init()
- },
- onPullDownRefresh(){
- this.init()
- setTimeout(function () {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- onLoad(options) {
- if(options.active){
- this.activeClass=options.active
- }else{
- this.activeClass=0
- }
- this.newListdata=[]
- this.pageNum=1;
- this.pageSize=20;
- this.init()
- },
- filters: {
- formatDate: (dateTimeStamp) => {
- var newDate = new Date(dateTimeStamp.replace(/-/g, '/')).getTime();
- var minute = 1000 * 60;
- var hour = minute * 60;
- var day = hour * 24;
- var halfamonth = day * 15;
- var month = day * 30;
- var now = new Date().getTime();
- var diffValue = now - newDate;
- if(diffValue < 0){return;}
- var monthC =diffValue/month;
- var weekC =diffValue/(7*day);
- var dayC =diffValue/day;
- var hourC =diffValue/hour;
- var minC =diffValue/minute;
- var result = '';
- if(weekC>=1){
- result= "1周前";
- }else if(dayC>=1){
- result=""+ parseInt(dayC) +"天前";
- } else if(hourC>=1){
- result=""+ parseInt(hourC) +"小时前";
- }
- else if(minC>=1){
- result=""+ parseInt(minC) +"分钟前";
- }else{
- result="刚刚";
- }
- return result;
- }
- },
- methods: {
- shecs(){
- this.newListdata=[]
- this.pageNum=1;
- this.pageSize=20;
- this.init()
- },
- // tab
- clocktab(index) {
- this.activeClass=index;
- this.newListdata=[]
- this.pageNum=1;
- this.pageSize=20;
- this.init()
- },
- init(){
- this.buildingID=uni.getStorageSync('buildingID').id;
- const parames = {
- pageNum: this.pageNum,
- pageSize: this.pageSize,
- query:{
- imei:this.imei,
- onLine:this.activeClass,
- propertyId:this.buildingID,
- orderType:1
- }
- }
-
- if(this.activeClass==0){
- parames.query.onLine=null
- }
- this.$u.post("/equipment/apiFindByPage", parames).then(res => {
- this.tablist[0].name="全部("+res.allCount+")";
- this.tablist[1].name="在线("+res.eqOnLineCount+")";
- this.tablist[2].name="低电量("+res.lowElectricityCount+")";
- this.tablist[3].name="今日活跃("+res.activeCount+")";
- this.tablist[4].name="离线("+res.eqOffLineCount+")";
- if(res.obj.list.results==null){
- if (this.pageNum == 1){
- return
- }else{
- uni.showToast({
- title: '已经到底了!',
- duration: 2000
- });
- }
- }else{
- res.obj.list.results.forEach(item=>{
- if(item.onLine==0){
- item.signalDevice=0
- }
-
- if(item.electricity==''){
- item.electricity=0
- }
- if(item.electricity>100){
- item.electricity=100
- }
- let num=this.ascformatDate(item.updateTime)
- if(num>12){
- item.electricity=0
- }
-
- })
-
- if (this.pageNum == 1) {
- this.newListdata=res.obj.list.results
- } else {
- this.newListdata = [...this.newListdata, ...res.obj.list.results];
- }
- }
- })
- },
- ascformatDate(dateTimeStamp){
- let newDate = new Date(dateTimeStamp.replace(/-/g, '/')).getTime();
- let minute = 1000 * 60;
- let hour = minute * 60;
- let day = hour * 24;
- let halfamonth = day * 15;
- let month = day * 30;
- let now = new Date().getTime();
- let diffValue = now - newDate;
- let result =diffValue/hour;
- return result;
- }
- },
- }
- </script>
-
- <style lang="scss">
- .cented {
- width: 100%;
- min-height: 100vh;
- background: #FFFFFF;
-
- .header {
- position: sticky;
- top: var(--window-top);
- z-index: 999;
- }
- }
-
- // .infoinputbox {
- // width: 100%;
- // height: 61rpx;
- // position: relative;
-
- // .infoinput {
- // width: 690rpx;
- // height: 61rpx;
- // background: #DEDEDE;
- // border-radius: 31rpx;
- // margin: 0 auto;
- // color: #999999;
- // font-size: 26rpx;
- // padding-left: 20rpx;
- // }
-
- // .dingweiinfo {
- // width: 40rpx;
- // height: 61rpx;
- // background-color: #DEDEDE;
- // position: absolute;
- // top: 0rpx;
- // left: 660rpx;
- // display: flex;
- // align-items: center;
- // z-index: 1000;
- // .sehoimg {
- // display: block;
- // width: 40rpx;
- // height: 40rpx;
- // }
- // }
- // }
-
- .tab-box {
- width: 100%;
-
- .tab-item-wrap {
- height: 88rpx;
- line-height: 88rpx;
- display: flex;
- justify-content: space-around;
- font-size: 4vw;
- background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;
- background-size: 100% 1px;
- color: #959dad;
- }
- }
-
- .bottom {
- color: #209fff;
- position: relative;
- }
-
- .bottomLine {
- position: absolute;
- width: 156rpx;
- height: 6rpx;
- top: 80rpx;
- background-color: #298dff;
- border-radius: 8rpx 8rpx 0rpx 0rpx;
- left: 16rpx;
- }
-
- .infoet {
- width: 100%;
-
- .infoviewbox {
- width: 690rpx;
- padding-bottom: 20rpx;
- background: #FFFFFF;
- box-shadow: 0px 0px 8rpx 6rpx rgba(0, 0, 0, 0.06);
- border-radius: 20rpx;
- margin: 0 auto;
- margin-top: 20rpx;
-
- .infobox1 {
- width: 652rpx;
- height: 88rpx;
- border-bottom: 1rpx solid #D9D9D9;
- margin: 0 auto;
- display: flex;
-
- .box1-zuo {
- width: 50%;
- height: 100%;
- font-size: 30rpx;
- color: #333333;
- line-height: 88rpx;
- }
-
- .box1-you {
- width: 50%;
- height: 100%;
- display: flex;
- align-items: center;
-
- .you1 {
- width: 20rpx;
- height: 28rpx;
- margin-left: 32rpx;
- background-image: url(../../../static/images/newimg/dianliang.png);
- background-size: 100% 100%;
- display: flex;
- flex-direction: column-reverse;
-
- .youimg {
- width: 100%;
- background-color: #333333;
- }
- }
- .you11 {
- width: 20rpx;
- height: 28rpx;
- margin-left: 32rpx;
- background-image: url(../../../static/images/newimg/dianliang456.png);
- background-size: 100% 100%;
- display: flex;
- flex-direction: column-reverse;
-
- .youimg {
- width: 100%;
- background-color: red;
- }
- }
-
- .you2 {
- width: 114rpx;
- height: 30rpx;
- // border: 1rpx solid red;
- font-size: 20rpx;
- color: #333333;
- margin-left: 6rpx;
- }
- .you22 {
- width: 114rpx;
- height: 30rpx;
- // border: 1rpx solid red;
- font-size: 20rpx;
- color: red;
- margin-left: 6rpx;
- }
-
- .you3 {
- width: 30rpx;
- height: 28rpx;
- margin-left: 16rpx;
-
- .youimg {
- display: block;
- width: 30rpx;
- height: 28rpx;
- }
- }
-
- .you4 {
- width: 100rpx;
- height: 30rpx;
- // border: 1rpx solid red;
- font-size: 20rpx;
- color: #333333;
- margin-left: 6rpx;
- }
-
- }
- }
-
- .infobox2 {
- width: 652rpx;
- height: 33rpx;
- margin: 0 auto;
- display: flex;
- margin-top: 19rpx;
-
- .box2-zuo {
- width: 40%;
- height: 100%;
- line-height: 33rpx;
- font-size: 24rpx;
- color: #333333;
- text-indent: 6rpx;
- }
-
- .box2-you {
- width: 60%;
- height: 100%;
- line-height: 33rpx;
- font-size: 24rpx;
- color: #333333;
- text-indent: 30rpx;
-
- .stayupload {
- color: #F41313;
- }
- }
- }
- }
- }
- </style>
|