|
|
@@ -1,1812 +1,1793 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-navbar :title="title" :backIconColor="'#ffffff'" title-color="#ffffff"
|
|
|
- :background="backgroundObj"></u-navbar>
|
|
|
- <view class="gradient-header">
|
|
|
- <view class="jpback">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <u-picker title="日期选择" :maskCloseAble="true" v-model="body0data.tabsFrom.show" :defaultTime="body0data.tabsFrom.showIndex+'-1'"
|
|
|
- mode="time" :params="body0data.tabsFrom.params" @confirm="selector2confirm" @cancel="selector2cancel"
|
|
|
- >
|
|
|
- </u-picker>
|
|
|
-
|
|
|
- <view class="main">
|
|
|
- <view class="statistics ">
|
|
|
- <view class="data1">
|
|
|
- <view class="item">
|
|
|
- <view class="line">
|
|
|
- <view class="name">
|
|
|
- {{info.name}}
|
|
|
- </view>
|
|
|
- <view class="item-tags">
|
|
|
- <view class="tag tag1" :class="'typeN typeN'+info.type">
|
|
|
- {{info.typeN}}
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- <view class="tag" :class="'statusN statusN'+info.status">
|
|
|
- {{info.statusN}}
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="tag" :class="'lockStatusN lockStatusN'+info.lockStatus">
|
|
|
- {{info.lockStatusN}}
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="line">
|
|
|
- 编号：{{info.lockNo}}
|
|
|
- </view>
|
|
|
- <view class="line" style=" color: #909399;">
|
|
|
- 更新时间：{{info.lastOnlineTime}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="value" v-if="0">
|
|
|
- <u-button type="primary" size="mini" shape="circle">
|
|
|
- <img class="img" src="@/assets/img/button/lock.svg" alt="">
|
|
|
- 降锁
|
|
|
- </u-button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="top-span">
|
|
|
- <view class="item-span">
|
|
|
- <img src="@/assets/img/topspan/span1.png">
|
|
|
- <span>地锁</span>
|
|
|
- <span v-if="info.parkingStatus==1" style="color: #1677FF;" >有车</span>
|
|
|
- <span v-else-if="info.parkingStatus==0" style="color: #00B962;" >无车</span>
|
|
|
- </view>
|
|
|
- <view class="item-span">
|
|
|
- <img src="@/assets/img/topspan/span2.png">
|
|
|
- <span>地锁</span>
|
|
|
- <span style="color: red;"
|
|
|
- v-if="info.lockStatus==4||info.lockStatus==0">
|
|
|
- 错误</span>
|
|
|
- <span v-else-if="info.lockStatus==1" style="color: #1677FF;" >升起</span>
|
|
|
- <span v-else-if="info.lockStatus==2" style="color: #00B962;" >降落</span>
|
|
|
- <span v-else >其他</span>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-span">
|
|
|
- <img src="@/assets/img/topspan/span3.png">
|
|
|
- <span>电压</span>
|
|
|
- <span v-if="info.batteryLevel">{{info.batteryLevel}}V</span>
|
|
|
- <span v-else>未知</span>
|
|
|
- </view>
|
|
|
- <view class="item-span">
|
|
|
- <img src="@/assets/img/topspan/span4.png">
|
|
|
- <span>网络</span>
|
|
|
-
|
|
|
- <span v-if="info.status==1" style="color: #00B962;" >在线</span>
|
|
|
- <span v-else-if="info.status==0" style="color: red" >离线</span>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-span">
|
|
|
- <img src="@/assets/img/topspan/span5.png">
|
|
|
- <span>雷达</span>
|
|
|
-
|
|
|
-
|
|
|
- <span v-if="info.radarStatus==0" style="color: #00B962;" >正常</span>
|
|
|
- <span v-else-if="info.radarStatus==1" style="color: red" >故障</span>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class=" no_statistics">
|
|
|
- <view class="data2">
|
|
|
- <view class="top">
|
|
|
- <view class="item">
|
|
|
- <view class="name">
|
|
|
- 停车时长
|
|
|
- </view>
|
|
|
- <view class="value" v-html="durationShow()">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="name">
|
|
|
- 使用率
|
|
|
- </view>
|
|
|
- <view class="value" v-if="lockUsageRateData&&lockUsageRateData.usageRate">
|
|
|
- {{lockUsageRateData.usageRate=='∞'?'/':lockUsageRateData.usageRate+'%'}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="name">
|
|
|
- 异常次数
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 0
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="body">
|
|
|
- <u-radio-group v-model="radiovalue" @change="radioGroupChange">
|
|
|
- <u-radio @change="radioChange" v-for="(item, index) in radiolist" :key="index"
|
|
|
- :name="item.value">
|
|
|
- {{item.name}}
|
|
|
- </u-radio>
|
|
|
- </u-radio-group>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <u-picker v-model="body2data.vue.show" :params="body2data.vue.params" :default-time="body2data.query.startTime"
|
|
|
- @confirm="body2dataconfirm" mode="time"></u-picker>
|
|
|
-
|
|
|
-
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>地锁平均占用率(%)</view>
|
|
|
- <view class="tag" @click="body2data.vue.show=true">{{body2data.vue.queryN}}<u-icon
|
|
|
- name="arrow-down"></u-icon></view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body2">
|
|
|
- <view class="body2lineChart">
|
|
|
-
|
|
|
- <view id="body2line1" class="body2line">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics " v-if="0">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>地锁历史异常状态</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body1">
|
|
|
- <view class="body1pieChart">
|
|
|
-
|
|
|
- <view id="body1pie1" class="body1pie">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>高频使用时段分布</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body3">
|
|
|
- <view class="body3barChart">
|
|
|
-
|
|
|
- <view id="body3bar1" class="body3bar">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>用户停留时长分群特征</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body4">
|
|
|
- <view class="body4pieChart">
|
|
|
-
|
|
|
- <view id="body4pie1" class="body4pie">
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="statistics " v-if="0">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>高频使用用户TOP</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body5">
|
|
|
- <view class="body5data">
|
|
|
- <view class="line">
|
|
|
- <view class="data">
|
|
|
- <view class="item">
|
|
|
- 王二
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 鄂DDT1268
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 28次
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="goto">
|
|
|
- <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="line">
|
|
|
- <view class="data">
|
|
|
- <view class="item">
|
|
|
- 王三
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 鄂DDT1268
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 8次
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="goto">
|
|
|
- <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- end-->
|
|
|
-
|
|
|
- <view class="statistics " v-if="0">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>白名单用户清单</view>
|
|
|
- <view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body7">
|
|
|
- <view class="body7data">
|
|
|
- <view class="line">
|
|
|
-
|
|
|
- <view class="value">
|
|
|
- 用户姓名
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 车主身份
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 使用次数
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="line">
|
|
|
-
|
|
|
- <view class="value">
|
|
|
- 孙培军
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 地锁所有人
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 22
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="line">
|
|
|
-
|
|
|
- <view class="value">
|
|
|
- 刘洋
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 白名单用户
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 11
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- end-->
|
|
|
- <view class="statistics " v-if="0" >
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>地锁异常记录</view>
|
|
|
-
|
|
|
- <view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody" >
|
|
|
- <jpContent :status="jpContentMap.body6">
|
|
|
- <view class="body6main">
|
|
|
- <view class="line" v-for="(item,index) in abnormalRecordsList" :key="index">
|
|
|
- <view class="abnormal-item">
|
|
|
- <!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
|
|
|
- -->
|
|
|
- <view class="item-title">
|
|
|
-
|
|
|
- <view class="name">
|
|
|
- <span v-if="item.level==1" class="level level1 ">一级</span>
|
|
|
- <span v-if="item.level==2" class="level level2">二级</span>
|
|
|
-
|
|
|
- {{item.content}}
|
|
|
- </view>
|
|
|
- <view class="date"
|
|
|
- style="display: flex; justify-content: space-between;margin-top: 4rpx;">
|
|
|
- <view>{{item.title}}</view>
|
|
|
- <view>{{item.createTime}}</view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- end-->
|
|
|
-
|
|
|
- <view class="body8data-popup">
|
|
|
- <u-popup v-model="body8data.popup" mode="bottom" height="80%" border-radius="12">
|
|
|
- <view class="content">
|
|
|
- <view class="headline">
|
|
|
- 地锁信息
|
|
|
- </view>
|
|
|
- <view class="infos">
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 地锁名称
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.name}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 地锁管理者
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.administrator}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 地锁类型
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.typeN}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 地锁状态
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.lockStatusN}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 地锁型号
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.model}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 出厂编号
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- <span>{{info.factoryNumber}}</span>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 固件版号
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.solidVersion}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 防护等级
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.protectionGrade}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 生产日期
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.manufactureDate}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 标准依据
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.enablingTime}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 联网卡号
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.standardBasis}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item" v-if="info.tariffStandard">
|
|
|
- <view class="item-title">
|
|
|
- 资费标准
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.tariffStandard}}元/月
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 地锁启动时间
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.activationTime}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 地锁质保期
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{info.shelfLife}}年
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <button class="get" @click="body8data.popup=false">知道了</button>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
- <view class="statistics ">
|
|
|
- <view class="title">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- <view>地锁信息</view>
|
|
|
-
|
|
|
- <view class="check-all" @click="body8data.popup=true" >查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="contentBody">
|
|
|
- <jpContent :status="jpContentMap.body8">
|
|
|
- <view class="body8main">
|
|
|
- <view class="line">
|
|
|
- <view class="value">
|
|
|
- 地锁型号
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 出厂编号
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 固件版号
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="line">
|
|
|
- <view class="value">
|
|
|
- {{info.model}}
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- {{info.factoryNumber}}
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- {{info.solidVersion}}
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </jpContent>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- end-->
|
|
|
- <u-divider border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import jpContent from '@/components/JPcontent.vue'
|
|
|
- import * as echarts from 'echarts';
|
|
|
- import * as API from '@/apis/pagejs/deviceTab.js'
|
|
|
- import * as API_index from '@/apis/pagejs/index.js'
|
|
|
- import {
|
|
|
- parseUnixTime,
|
|
|
- beforeTimeStamp,
|
|
|
- newDate
|
|
|
- } from '@/apis/utils'
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
-
|
|
|
- jpContent
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id:"",
|
|
|
- info:{},
|
|
|
- echartsList: {},
|
|
|
- lockUsageRateData:{},
|
|
|
- body2data: {
|
|
|
- query: {},
|
|
|
- vue: {
|
|
|
- queryN: "",
|
|
|
- show: false,
|
|
|
- params: {
|
|
|
- year: true,
|
|
|
- month: true,
|
|
|
- day: false,
|
|
|
- hour: false,
|
|
|
- minute: false,
|
|
|
- second: false
|
|
|
- }
|
|
|
- },
|
|
|
- data: {}
|
|
|
- },
|
|
|
- body0data: {
|
|
|
- query: {},
|
|
|
- data: {},
|
|
|
- tabsFrom:{
|
|
|
- show:false,
|
|
|
- showIndex:"",
|
|
|
- params:{
|
|
|
- year: true,
|
|
|
- month: true,
|
|
|
- day: false,
|
|
|
- hour: false,
|
|
|
- minute: false,
|
|
|
- second: false
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- body4data: {
|
|
|
- query: {},
|
|
|
- data: {}
|
|
|
- },
|
|
|
- body8data: {
|
|
|
- query: {},
|
|
|
- data: {},
|
|
|
- popup:false,
|
|
|
- },
|
|
|
- body3data: {
|
|
|
- query: {},
|
|
|
- data: {}
|
|
|
- },
|
|
|
- jpContentMap: {
|
|
|
- body1: 2,
|
|
|
- body2: 2,
|
|
|
- body3: 2,
|
|
|
- body4: 2,
|
|
|
- body5: 2,
|
|
|
- body6: 2,
|
|
|
- body7: 2,
|
|
|
- body8: 2,
|
|
|
- body9: 2,
|
|
|
- body10: 2,
|
|
|
- },
|
|
|
- title: "",
|
|
|
- backgroundObj: {
|
|
|
- background: '#307AF6'
|
|
|
- },
|
|
|
- radiovalue: "1",
|
|
|
- radiolist: [{
|
|
|
- name: '上月',
|
|
|
- value: "3"
|
|
|
- },
|
|
|
- {
|
|
|
- name: '当月',
|
|
|
- value: "1"
|
|
|
- },
|
|
|
- {
|
|
|
- name: '今日',
|
|
|
- value: "2"
|
|
|
- }, {
|
|
|
- name: '当年',
|
|
|
-
|
|
|
- value: "4"
|
|
|
- }, {
|
|
|
- name: '合计',
|
|
|
-
|
|
|
- value: "5"
|
|
|
- },
|
|
|
- {
|
|
|
- name: '指定月份',
|
|
|
- value: "0"
|
|
|
- }
|
|
|
- ],
|
|
|
- abnormalRecordsList: [{
|
|
|
- level: 1,
|
|
|
- content: "1111111",
|
|
|
- title: "11",
|
|
|
- createTime: "123:123"
|
|
|
- },
|
|
|
- {
|
|
|
- level: 2,
|
|
|
- content: "1111111",
|
|
|
- title: "11",
|
|
|
- createTime: "123:123"
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar :title="title" :backIconColor="'#ffffff'" title-color="#ffffff"
|
|
|
+ :background="backgroundObj"></u-navbar>
|
|
|
+ <view class="gradient-header">
|
|
|
+ <view class="jpback">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-picker title="日期选择" :maskCloseAble="true" v-model="body0data.tabsFrom.show"
|
|
|
+ :defaultTime="body0data.tabsFrom.showIndex+'-1'" mode="time" :params="body0data.tabsFrom.params"
|
|
|
+ @confirm="selector2confirm" @cancel="selector2cancel">
|
|
|
+ </u-picker>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="data1">
|
|
|
+ <view class="item">
|
|
|
+ <view class="line">
|
|
|
+ <view class="name">
|
|
|
+ {{floorlockInfo.name}}
|
|
|
+ </view>
|
|
|
+ <view class="item-tags">
|
|
|
+ <view class="tag tag1" :class="'typeN typeN'+floorlockInfo.type">
|
|
|
+ {{floorlockInfo.typeN}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- <view class="tag" :class="'statusN statusN'+floorlockInfo.status">
|
|
|
+ {{floorlockInfo.statusN}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="tag" :class="'lockStatusN lockStatusN'+floorlockInfo.lockStatus">
|
|
|
+ {{floorlockInfo.lockStatusN}}
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="line">
|
|
|
+ 编号：{{floorlockInfo.lockNo}}
|
|
|
+ </view>
|
|
|
+ <view class="line" style=" color: #909399;">
|
|
|
+ 更新时间：{{floorlockInfo.lastOnlineTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="value" v-if="0">
|
|
|
+ <u-button type="primary" size="mini" shape="circle">
|
|
|
+ <img class="img" src="@/assets/img/button/lock.svg" alt="">
|
|
|
+ 降锁
|
|
|
+ </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="top-span">
|
|
|
+ <view class="item-span">
|
|
|
+ <img src="@/assets/img/topspan/span1.png">
|
|
|
+ <span>地锁</span>
|
|
|
+ <span v-if="floorlockInfo.parkingStatus==1" style="color: #1677FF;">有车</span>
|
|
|
+ <span v-else-if="floorlockInfo.parkingStatus==0" style="color: #00B962;">无车</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-span">
|
|
|
+ <img src="@/assets/img/topspan/span2.png">
|
|
|
+ <span>地锁</span>
|
|
|
+ <span style="color: red;" v-if="floorlockInfo.lockStatus==4||floorlockInfo.lockStatus==0">
|
|
|
+ 错误</span>
|
|
|
+ <span v-else-if="floorlockInfo.lockStatus==1" style="color: #1677FF;">升起</span>
|
|
|
+ <span v-else-if="floorlockInfo.lockStatus==2" style="color: #00B962;">降落</span>
|
|
|
+ <span v-else>其他</span>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-span">
|
|
|
+ <img src="@/assets/img/topspan/span3.png">
|
|
|
+ <span>电压</span>
|
|
|
+ <span v-if="floorlockInfo.batteryLevel">{{floorlockInfo.batteryLevel}}V</span>
|
|
|
+ <span v-else>未知</span>
|
|
|
+ </view>
|
|
|
+ <view class="item-span">
|
|
|
+ <img src="@/assets/img/topspan/span4.png">
|
|
|
+ <span>网络</span>
|
|
|
+
|
|
|
+ <span v-if="floorlockInfo.status==1" style="color: #00B962;">在线</span>
|
|
|
+ <span v-else-if="floorlockInfo.status==0" style="color: red">离线</span>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-span">
|
|
|
+ <img src="@/assets/img/topspan/span5.png">
|
|
|
+ <span>雷达</span>
|
|
|
+
|
|
|
+
|
|
|
+ <span v-if="floorlockInfo.radarStatus==0" style="color: #00B962;">正常</span>
|
|
|
+ <span v-else-if="floorlockInfo.radarStatus==1" style="color: red">故障</span>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <u-picker v-model="body2data.vue.show" :params="body2data.vue.params"
|
|
|
+ :default-time="body2data.query.startTime" @confirm="body2dataconfirm" mode="time"></u-picker>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- end-->
|
|
|
+ <view class="statistics " v-if="0">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>地锁异常记录</view>
|
|
|
+
|
|
|
+ <view class="check-all">查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body6">
|
|
|
+ <view class="body6main">
|
|
|
+ <view class="line" v-for="(item,index) in abnormalRecordsList" :key="index">
|
|
|
+ <view class="abnormal-item">
|
|
|
+ <!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
|
|
|
+ -->
|
|
|
+ <view class="item-title">
|
|
|
+
|
|
|
+ <view class="name">
|
|
|
+ <span v-if="item.level==1" class="level level1 ">一级</span>
|
|
|
+ <span v-if="item.level==2" class="level level2">二级</span>
|
|
|
+
|
|
|
+ {{item.content}}
|
|
|
+ </view>
|
|
|
+ <view class="date"
|
|
|
+ style="display: flex; justify-content: space-between;margin-top: 4rpx;">
|
|
|
+ <view>{{item.title}}</view>
|
|
|
+ <view>{{item.createTime}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- end-->
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>地锁信息</view>
|
|
|
+
|
|
|
+ <view class="check-all" v-show="listShow" @click="listShow=false">
|
|
|
+ 展开<u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="check-all" v-if="!listShow" @click="listShow=true">
|
|
|
+ 收起<u-icon name="arrow-up" size="32" color="#AAAAAA"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body8">
|
|
|
+ <view class="body8main">
|
|
|
+
|
|
|
+ <view class="table">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">地锁管理者</view>
|
|
|
+ <view class="value">
|
|
|
+ {{floorlockInfo.contacts?floorlockInfo.contacts:floorlockInfo.administrator}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="floorlockInfo.contacts&&floorlockInfo.contactPhone">
|
|
|
+ <view class="name">联系电话</view>
|
|
|
+ <view class="value">{{floorlockInfo.contactPhone}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">地锁型号</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.model)}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">出厂编号</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.factoryNumber)}}</view>
|
|
|
+ </view>
|
|
|
+ <template v-if="!listShow">
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">固件版号</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.solidVersion)}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">防护等级</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.protectionGrade)}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">生产日期</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.manufactureDate)}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">标准依据</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.standardBasis)}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">联网卡号</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.internetCard)}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">有效期至</view>
|
|
|
+ <view class="value">
|
|
|
+ {{floorlockInfo.cardExpirationDate?floorlockInfo.cardExpirationDate.split(' ')[0]:''}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="floorlockInfo.tariffStandard">
|
|
|
+ <view class="name">资费标准</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.tariffStandard)}}元/月</view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="name">地锁启动时间</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.activationTime)}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="floorlockInfo.shelfLife">
|
|
|
+ <view class="name">地锁质保期</view>
|
|
|
+ <view class="value">{{infotext(floorlockInfo.shelfLife)}}年</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics main_list1 panel">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>故障记录</view>
|
|
|
+
|
|
|
+ <view class="check-all" @click="gotoUrl('/pages/task/listTask?lockId='+floorlockInfo.id+'&lockName='+floorlockInfo.name)">
|
|
|
+ 查看详情
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body9">
|
|
|
+ <view class="body9main">
|
|
|
+
|
|
|
+ <view class="list">
|
|
|
+ <view class="item" v-for="(item,index) in dataerrList"
|
|
|
+ @click="gotoUrl('/pages/task/maintenanceTaks?id='+item.id)" :key="index">
|
|
|
+ <view class="icon">
|
|
|
+
|
|
|
+ <image class="img" v-if="item.errorCodeImage" :src="item.errorCodeImage"
|
|
|
+ mode=""></image>
|
|
|
+
|
|
|
+ <image class="img" v-else src="@/assets/img/taskstatus/status3.png" mode="">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="body">
|
|
|
+ <view class="line1">
|
|
|
+ <view class="line1title">
|
|
|
+ {{item.errorCodeText}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="status " :class="'status'+item.status">
|
|
|
+ {{item.statusN}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="line2">
|
|
|
+ <view class="value">
|
|
|
+ {{item.createTime}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ {{item.parkingName}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="errorDesc" v-if="item.errorDesc">
|
|
|
+ 描述：{{item.errorDesc}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-divider color="#F44336" v-if="dataerrRecordsTotal>3"
|
|
|
+ @click="gotoUrl('/pages/task/listTask?lockId='+floorlockInfo.id+'&lockName='+floorlockInfo.name)">故障记录{{dataerrRecordsTotal}}条，点击查看更多</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- end-->
|
|
|
+ <u-divider border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import jpContent from '@/components/JPcontent.vue'
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ import * as API from '@/apis/pagejs/deviceTab.js'
|
|
|
+ import * as API_index from '@/apis/pagejs/index.js'
|
|
|
+ import {
|
|
|
+ parseUnixTime,
|
|
|
+ beforeTimeStamp,
|
|
|
+ newDate
|
|
|
+ } from '@/apis/utils'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+
|
|
|
+ jpContent
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: "",
|
|
|
+ dataerrList: [],
|
|
|
+ dataerrRecordsTotal: 0,
|
|
|
+ isReadyfloorStatus: false,
|
|
|
+
|
|
|
+ floorlockInfo: {},
|
|
|
+ echartsList: {},
|
|
|
+ lockUsageRateData: {},
|
|
|
+ body2data: {
|
|
|
+ query: {},
|
|
|
+ vue: {
|
|
|
+ queryN: "",
|
|
|
+ show: false,
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: false,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: {}
|
|
|
+ },
|
|
|
+ listShow: true,
|
|
|
+ body0data: {
|
|
|
+ query: {},
|
|
|
+ data: {},
|
|
|
+ tabsFrom: {
|
|
|
+ show: false,
|
|
|
+ showIndex: "",
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: false,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ body4data: {
|
|
|
+ query: {},
|
|
|
+ data: {}
|
|
|
+ },
|
|
|
+ body8data: {
|
|
|
+ query: {},
|
|
|
+ data: {},
|
|
|
+ popup: false,
|
|
|
+ },
|
|
|
+ body3data: {
|
|
|
+ query: {},
|
|
|
+ data: {}
|
|
|
+ },
|
|
|
+ jpContentMap: {
|
|
|
+ body1: 2,
|
|
|
+ body2: 2,
|
|
|
+ body3: 2,
|
|
|
+ body4: 2,
|
|
|
+ body5: 2,
|
|
|
+ body6: 2,
|
|
|
+ body7: 2,
|
|
|
+ body8: 2,
|
|
|
+ body9: 2,
|
|
|
+ body10: 2,
|
|
|
+ },
|
|
|
+ title: "",
|
|
|
+ backgroundObj: {
|
|
|
+ background: '#307AF6'
|
|
|
+ },
|
|
|
+ radiovalue: "1",
|
|
|
+ radiolist: [{
|
|
|
+ name: '上月',
|
|
|
+ value: "3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '当月',
|
|
|
+ value: "1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '今日',
|
|
|
+ value: "2"
|
|
|
+ }, {
|
|
|
+ name: '当年',
|
|
|
+
|
|
|
+ value: "4"
|
|
|
+ }, {
|
|
|
+ name: '合计',
|
|
|
+
|
|
|
+ value: "5"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '指定月份',
|
|
|
+ value: "0"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ abnormalRecordsList: [{
|
|
|
+ level: 1,
|
|
|
+ content: "1111111",
|
|
|
+ title: "11",
|
|
|
+ createTime: "123:123"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 2,
|
|
|
+ content: "1111111",
|
|
|
+ title: "11",
|
|
|
+ createTime: "123:123"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ if (op.id) {
|
|
|
+ this.id = op.id
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ this.body0data.tabsFrom.showIndex = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // if(this.id){
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+
|
|
|
+ if (this.isReadyerrList) {
|
|
|
+ this.geterrList()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ geterrList() {
|
|
|
+ this.jpContentMap.body9 = 0
|
|
|
+ API.errList({
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 3,
|
|
|
+ status: 0,
|
|
|
+ lockId:this.id
|
|
|
+ }).then((response) => {
|
|
|
+ this.dataerrList = response.data.data
|
|
|
+ this.dataerrRecordsTotal = response.data.recordsTotal
|
|
|
+ this.isReadyerrList = true
|
|
|
+ if(this.dataerrRecordsTotal ){
|
|
|
+ this.jpContentMap.body9 = 2
|
|
|
+ }else{
|
|
|
+ this.jpContentMap.body9 = 1
|
|
|
}
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(op) {
|
|
|
- if(op.id){
|
|
|
- this.id=op.id
|
|
|
- this.init();
|
|
|
- }
|
|
|
- this.body0data.tabsFrom.showIndex=new Date().getFullYear()+'-'+(new Date().getMonth()+1)
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // if(this.id){
|
|
|
-
|
|
|
- // }
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- durationShow(){
|
|
|
- if(this.lockUsageRateData.duration){
|
|
|
- var m=this.lockUsageRateData.duration%60
|
|
|
- var h=parseInt(this.lockUsageRateData.duration/60)
|
|
|
- if(h>0){
|
|
|
- if(h>24){
|
|
|
- var day=parseInt(h/24)
|
|
|
- h=h%24
|
|
|
- var px= uni.upx2px(12*2)
|
|
|
- if(day>100){
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ infotext(text) {
|
|
|
+ if (text) {
|
|
|
+ return text
|
|
|
+ } else {
|
|
|
+ return ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ durationShow() {
|
|
|
+ if (this.lockUsageRateData.duration) {
|
|
|
+ var m = this.lockUsageRateData.duration % 60
|
|
|
+ var h = parseInt(this.lockUsageRateData.duration / 60)
|
|
|
+ if (h > 0) {
|
|
|
+ if (h > 24) {
|
|
|
+ var day = parseInt(h / 24)
|
|
|
+ h = h % 24
|
|
|
+ var px = uni.upx2px(12 * 2)
|
|
|
+ if (day > 100) {
|
|
|
return `${day}<span style='font-size: ${px}px;'>天</span>`
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
return `${day}<span style='font-size: ${px}px;'>天</span>${h}h`
|
|
|
}
|
|
|
-
|
|
|
- }else{
|
|
|
+
|
|
|
+ } else {
|
|
|
return `${h}h${m}m`
|
|
|
- }
|
|
|
-
|
|
|
- }else{
|
|
|
- return `${m}m`
|
|
|
- }
|
|
|
- }else{
|
|
|
- return '0m'
|
|
|
- }
|
|
|
- },
|
|
|
- radioChange(e) {
|
|
|
- // console.log(e);
|
|
|
- },
|
|
|
- // 选中任一radio时，由radio-group触发
|
|
|
- selector2confirm(e){
|
|
|
- var time=e.year + "-" + e.month
|
|
|
- this.radiolist[5].name=e.year + "年" + e.month+"月"
|
|
|
- this.body0data.tabsFrom.showIndex=time
|
|
|
- this.getLockUsageRate()
|
|
|
- },
|
|
|
- selector2cancel(){
|
|
|
- this.radiovalue= "1"
|
|
|
- this.radiolist[5].name="指定月份"
|
|
|
- this.getLockUsageRate()
|
|
|
- },
|
|
|
- radioGroupChange(e) {
|
|
|
- console.log(e);
|
|
|
- if(e==0){
|
|
|
- this.body0data.tabsFrom.show=true
|
|
|
- }else{
|
|
|
- this.radiolist[5].name="指定月份"
|
|
|
- this.getLockUsageRate()
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- init() {
|
|
|
- this.getInfo()
|
|
|
- this.getLockUsageRate()
|
|
|
- this.occupancyByTime(1)
|
|
|
- //this.getbody1()
|
|
|
- //this.getbody2()
|
|
|
- this.occupancyByTimeBar(1);
|
|
|
- //this.getbody3()
|
|
|
- //this.getbody4()
|
|
|
- this.durationDistribution()
|
|
|
- },
|
|
|
- occupancyByTime(init) {
|
|
|
- if (init) {
|
|
|
- var date = new Date();
|
|
|
-
|
|
|
- this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
|
|
|
- this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
-
|
|
|
- var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
- this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
-
|
|
|
- }
|
|
|
- this.jpContentMap.body2 = 0
|
|
|
- this.body2data.query.floorId = this.id
|
|
|
-
|
|
|
- API_index.occupancyByTime(
|
|
|
- this.body2data.query
|
|
|
- ).then((response) => {
|
|
|
- this.body2data.data = [
|
|
|
- ...response.data.locksTimeList,
|
|
|
- // ...response.data.locksTimeList,
|
|
|
- ];
|
|
|
-
|
|
|
- if (this.body2data.data.length == 0) {
|
|
|
- this.jpContentMap.body2 = 1
|
|
|
-
|
|
|
-
|
|
|
- } else {
|
|
|
- this.jpContentMap.body2 = 2
|
|
|
-
|
|
|
- this.getbody2()
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- body2dataconfirm(e) {
|
|
|
-
|
|
|
- var date = new Date(e.year + "-" + e.month + "-1");
|
|
|
- this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
|
|
|
- this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
-
|
|
|
- var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
- this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
-
|
|
|
- this.occupancyByTime()
|
|
|
- },
|
|
|
- getLockUsageRate(){
|
|
|
- var obj = {
|
|
|
- floorId: this.id,
|
|
|
- queryType:this.radiovalue
|
|
|
- }
|
|
|
- if(this.radiovalue==0){
|
|
|
- obj.queryMonth=this.body0data.tabsFrom.showIndex
|
|
|
- }
|
|
|
- API.lockUsageRate(obj).then((res) => {
|
|
|
- this.lockUsageRateData=res.data
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
-
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- durationDistribution() {
|
|
|
- this.jpContentMap.body4 = 0
|
|
|
-
|
|
|
- var date = new Date();
|
|
|
- //test
|
|
|
- //this.body4data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
-
|
|
|
- var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
- // this.body4data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
-
|
|
|
-
|
|
|
- this.body4data.query.floorId = this.id
|
|
|
- API_index.durationDistribution(
|
|
|
- this.body4data.query
|
|
|
- ).then((response) => {
|
|
|
- this.body4data.data = response.data.distribution;
|
|
|
-
|
|
|
- if (this.body4data.data.length == 0) {
|
|
|
- this.jpContentMap.body4 = 1
|
|
|
-
|
|
|
- } else {
|
|
|
- this.jpContentMap.body4 = 2
|
|
|
- //this.getbody3()
|
|
|
- this.getbody4()
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- getInfo(){
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- var obj = {
|
|
|
- id: this.id
|
|
|
- }
|
|
|
- this.jpContentMap.body8 =0
|
|
|
- API.lockDetails(obj).then((res) => {
|
|
|
- this.info = res.data.floorlockInfo
|
|
|
- this.title =this.info.parkingName
|
|
|
- uni.hideLoading();
|
|
|
- this.jpContentMap.body8 =2
|
|
|
- //this.getWhiteList()
|
|
|
- }).catch(error => {
|
|
|
-
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getbody1() {
|
|
|
- var key = "body1pie1"
|
|
|
- var myChart = this.echartsList[key];
|
|
|
- if (!myChart) {
|
|
|
- myChart = echarts.init(document.getElementById(key), null, {
|
|
|
- width: uni.upx2px(300 * 2),
|
|
|
- height: uni.upx2px(170 * 2)
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- myChart.clear()
|
|
|
-
|
|
|
-
|
|
|
- var option = {
|
|
|
-
|
|
|
- grid: {
|
|
|
- top: 20,
|
|
|
- left: 0,
|
|
|
- right: 0,
|
|
|
- bottom: 0,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- series: [{
|
|
|
-
|
|
|
- type: 'pie',
|
|
|
- radius: ['80%', '50%'],
|
|
|
- radius: [35, 50],
|
|
|
- data: [{
|
|
|
- itemStyle: {
|
|
|
- color: "#EB3C31"
|
|
|
- },
|
|
|
- value: 1048,
|
|
|
- name: '0.5小时\n20%',
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- itemStyle: {
|
|
|
- color: "#EF8132"
|
|
|
- },
|
|
|
-
|
|
|
- value: 735,
|
|
|
- name: '2小时\n10%'
|
|
|
- },
|
|
|
- {
|
|
|
- itemStyle: {
|
|
|
- color: "#929292"
|
|
|
- },
|
|
|
- value: 580,
|
|
|
- name: '2-6小时\n30%'
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- ]
|
|
|
-
|
|
|
- }]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- this.echartsList[key] = myChart;
|
|
|
- },
|
|
|
- getbody4() {
|
|
|
- var key = "body4pie1"
|
|
|
- var myChart = this.echartsList[key];
|
|
|
- if (!myChart) {
|
|
|
- myChart = echarts.init(document.getElementById(key), null, {
|
|
|
- width: uni.upx2px(300 * 2),
|
|
|
- height: uni.upx2px(170 * 2)
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- myChart.clear()
|
|
|
- var dataApi = this.body4data.data;
|
|
|
-
|
|
|
- var data = []
|
|
|
- var num = 0
|
|
|
- var sum = 0
|
|
|
- Object.keys(dataApi).forEach(key1 => {
|
|
|
- num += dataApi[key1]
|
|
|
- });
|
|
|
- var i = 0
|
|
|
- Object.keys(dataApi).forEach(key1 => {
|
|
|
- var value = dataApi[key1]
|
|
|
- if(value!=0){
|
|
|
- var obj = {
|
|
|
- value: value,
|
|
|
- name: key1
|
|
|
- }
|
|
|
-
|
|
|
- if (num != 0) {
|
|
|
- var valueInt = parseInt(value / num * 100)
|
|
|
- if (valueInt == 0 && value != 0) {
|
|
|
- valueInt = 1
|
|
|
- }
|
|
|
- sum += valueInt;
|
|
|
-
|
|
|
- if (i == Object.keys(dataApi).length - 1) {
|
|
|
- if (sum != 100) {
|
|
|
- valueInt += (100 - sum)
|
|
|
- }
|
|
|
- }
|
|
|
- obj.name += '\n' + (valueInt) + '%'
|
|
|
- }
|
|
|
- data.push(obj)
|
|
|
- }
|
|
|
- i++;
|
|
|
- });
|
|
|
-
|
|
|
- var option = {
|
|
|
-
|
|
|
- grid: {
|
|
|
- top: 20,
|
|
|
- left: 0,
|
|
|
- right: 0,
|
|
|
- bottom: 0,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- series: [{
|
|
|
-
|
|
|
- type: 'pie',
|
|
|
- radius: ['80%', '50%'],
|
|
|
- radius: [45, 60],
|
|
|
- data: data
|
|
|
-
|
|
|
- }]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- this.echartsList[key] = myChart;
|
|
|
- },
|
|
|
- occupancyByTimeBar(init) {
|
|
|
- if (init) {
|
|
|
- var date = new Date();
|
|
|
- //test
|
|
|
- //this.body3data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
-
|
|
|
- var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
- //this.body3data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
-
|
|
|
- }
|
|
|
- this.jpContentMap.body3 = 0
|
|
|
-
|
|
|
- this.body3data.query.floorId = this.id
|
|
|
- API_index.occupancyByTimeBar(
|
|
|
- this.body3data.query
|
|
|
- ).then((response) => {
|
|
|
- this.body3data.data = [
|
|
|
- ...response.data.locksTimeList,
|
|
|
- // ...response.data.locksTimeList,
|
|
|
- ];
|
|
|
-
|
|
|
- if (this.body3data.data.length == 0) {
|
|
|
- this.jpContentMap.body3 = 1
|
|
|
-
|
|
|
- } else {
|
|
|
- this.jpContentMap.body3 = 2
|
|
|
- this.getbody3()
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error,
|
|
|
- icon: "none"
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- getbody3() {
|
|
|
- var key = "body3bar1"
|
|
|
- var myChart = this.echartsList[key];
|
|
|
- if (!myChart) {
|
|
|
- myChart = echarts.init(document.getElementById(key), null, {
|
|
|
- width: uni.upx2px(300 * 2),
|
|
|
- height: uni.upx2px(170 * 2)
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- var dataApi = this.body3data.data;
|
|
|
-
|
|
|
- myChart.clear()
|
|
|
-
|
|
|
- var data1 = []
|
|
|
- var data2 = [] //useDays
|
|
|
- var i = 0
|
|
|
- dataApi[0].timeUseList.forEach(item => {
|
|
|
-
|
|
|
- Object.keys(item).forEach(key1 => {
|
|
|
-
|
|
|
- data1.push(key1 + '点')
|
|
|
- var num = 0
|
|
|
-
|
|
|
- dataApi.forEach(item2 => {
|
|
|
- num += item2.timeUseList[i][key1].useDays
|
|
|
-
|
|
|
- })
|
|
|
- data2.push(num)
|
|
|
- });
|
|
|
- i += 1
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- var axisLabel = {
|
|
|
- rotate: 40,
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: "#333"
|
|
|
- }
|
|
|
- }
|
|
|
- if (data1.length < 7) {
|
|
|
- axisLabel = {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: "#333"
|
|
|
- },
|
|
|
- }
|
|
|
- } else {
|
|
|
- axisLabel.interval = 0;
|
|
|
- }
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data1,
|
|
|
- axisLabel: axisLabel,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
- formatter: function(params) {
|
|
|
- var result = params[0].name + '<br/>';
|
|
|
- for (var i = 0; i < params.length; i++) {
|
|
|
- result += params[i].marker+ ' ' + params[i].value + '次<br/>';
|
|
|
- }
|
|
|
- return result;
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: 20,
|
|
|
- left: 0,
|
|
|
- right: 0,
|
|
|
- bottom: 0,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- series: [{
|
|
|
- itemStyle: {
|
|
|
- color: "#5A88E5"
|
|
|
- },
|
|
|
- data: data2,
|
|
|
- type: 'bar'
|
|
|
- }]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- this.echartsList[key] = myChart;
|
|
|
- },
|
|
|
- getbody2() {
|
|
|
- var key = "body2line1"
|
|
|
- var myChart = this.echartsList[key];
|
|
|
- var dataApi = this.body2data.data;
|
|
|
-
|
|
|
- var head = 20 * (parseInt(dataApi.length / 4)) + 20
|
|
|
-
|
|
|
-
|
|
|
- if (!myChart) {
|
|
|
- myChart = echarts.init(document.getElementById(key), null, {
|
|
|
- width: uni.upx2px(300 * 2),
|
|
|
- height: uni.upx2px((170 + head) * 2)
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- myChart.clear()
|
|
|
-
|
|
|
- var data1 = []
|
|
|
- var series = [];
|
|
|
-
|
|
|
- dataApi.forEach(item => {
|
|
|
-
|
|
|
- var obj = {
|
|
|
- name: item.lockName,
|
|
|
- areaStyle: {},
|
|
|
- itemStyle: {
|
|
|
- color: "#BBD4FB"
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- color: "#307AF6"
|
|
|
- },
|
|
|
- data: [],
|
|
|
- type: 'line'
|
|
|
- }
|
|
|
- if (dataApi.length == 1) {
|
|
|
- obj.label.color = "#307AF6"
|
|
|
- obj.areaStyle = {}
|
|
|
- obj.itemStyle = {
|
|
|
- color: "#BBD4FB"
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- item.timeUseList.forEach(item2 => {
|
|
|
- Object.keys(item2).forEach(key1 => {
|
|
|
-
|
|
|
- obj.data.push(item2[key1].useRate)
|
|
|
- });
|
|
|
- })
|
|
|
- series.push(obj)
|
|
|
- })
|
|
|
- dataApi[0].timeUseList.forEach(item => {
|
|
|
-
|
|
|
- Object.keys(item).forEach(key1 => {
|
|
|
- data1.push(key1)
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- })
|
|
|
- var axisLabel = {
|
|
|
- rotate: 40,
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: "#333"
|
|
|
- }
|
|
|
- }
|
|
|
- if (data1.length < 7) {
|
|
|
- axisLabel = {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: "#333"
|
|
|
- },
|
|
|
- }
|
|
|
- } else {
|
|
|
- axisLabel.interval = 0;
|
|
|
- }
|
|
|
- var option = {
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data1,
|
|
|
- axisLabel: axisLabel,
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- },
|
|
|
-
|
|
|
- formatter: function(params) {
|
|
|
- var result = params[0].name + '点<br/>';
|
|
|
- for (var i = 0; i < params.length; i++) {
|
|
|
- result += params[i].marker+params[i].seriesName + ': ' + params[i].value + '%<br/>';
|
|
|
- }
|
|
|
- return result;
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: (20 + head),
|
|
|
- left: 0,
|
|
|
- right: 0,
|
|
|
- bottom: 0,
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- series: series,
|
|
|
-
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- this.echartsList[key] = myChart;
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .gradient-header {
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- .jpback {
|
|
|
- height: 268rpx;
|
|
|
- background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
|
|
|
- }
|
|
|
-
|
|
|
- .main {
|
|
|
-
|
|
|
- padding: 32rpx;
|
|
|
-
|
|
|
- .no_statistics {
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .statistics {
|
|
|
- border-radius: 8px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
- margin-bottom: 24rpx;
|
|
|
- padding: 40rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- vertical-align: middle;
|
|
|
- border-radius: 999px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .change {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .change-img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
-
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .text {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .tag {
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(187, 187, 187, 1);
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
-
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 1px 8rpx;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .change {
|
|
|
- margin-left: 16rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #838383;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .check-all {
|
|
|
- margin-left: auto;
|
|
|
- color: rgba(131, 131, 131, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .data1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .item {
|
|
|
- .line{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .name {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-tags {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .tag {
|
|
|
- border-radius: 4px;
|
|
|
-
|
|
|
- background-color: rgba(39, 177, 72, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 2rpx 8rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .typeN1 {
|
|
|
- background-color: rgba(22, 119, 255, 1);
|
|
|
- }
|
|
|
- .typeN2{
|
|
|
- background-color: #8161ff;
|
|
|
- background-color: #8161ff;
|
|
|
- }
|
|
|
- .statusN{
|
|
|
- background-color:#838383
|
|
|
- }
|
|
|
- .lockStatusN {
|
|
|
-
|
|
|
- background-color: rgba(153, 153, 153, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .lockStatusN2 {
|
|
|
- background-color: #03A9F4
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- .img {
|
|
|
- margin-right: 8rpx;
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .data2 {
|
|
|
- height: 336rpx;
|
|
|
- padding: 32rpx;
|
|
|
- border-radius: 12px;
|
|
|
- background: linear-gradient(180deg, rgba(222, 222, 222, 1) 3%, rgba(255, 255, 255, 1) 5%, rgba(232, 232, 232, 1) 56%, rgba(255, 255, 255, 1) 59%, rgba(236, 236, 236, 1) 95%, rgba(215, 215, 215, 1) 98%);
|
|
|
-
|
|
|
- .top {
|
|
|
- background-repeat: round;
|
|
|
- background-image: url('@/assets/img/deviceTab/index3-2.png');
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- text-align: center;
|
|
|
- height: 152rpx;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .item {
|
|
|
- .name {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .body {
|
|
|
- padding: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .body5data {
|
|
|
- .line {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .data {
|
|
|
- display: flex;
|
|
|
- width: 80%;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .item {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .value {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .body7data {
|
|
|
- .line {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .value {
|
|
|
- width: 33%;
|
|
|
- padding: 16rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .value:nth-child(3) {
|
|
|
-
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 隔行变色: 偶数行设置背景色 */
|
|
|
- .line:nth-child(odd) {
|
|
|
- background-color: #F2F2F2;
|
|
|
- /* 偶数行 */
|
|
|
- }
|
|
|
-
|
|
|
- .line:nth-child(even) {
|
|
|
- background-color: #FFFFFF
|
|
|
- /* 奇数行 */
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .body8main {
|
|
|
- .line {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .value {
|
|
|
- width: 33%;
|
|
|
- padding: 16rpx;
|
|
|
-
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /* 隔行变色: 偶数行设置背景色 */
|
|
|
- .line:nth-child(odd) {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 14px;
|
|
|
- /* 偶数行 */
|
|
|
- }
|
|
|
-
|
|
|
- .line:nth-child(even) {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 16px;
|
|
|
-
|
|
|
- /* 奇数行 */
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .body6main {
|
|
|
- .line {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .abnormal-item:last-of-type {
|
|
|
- border-bottom: none !important;
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .abnormal-item {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 16rpx;
|
|
|
- border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
-
|
|
|
-
|
|
|
- .item-title {
|
|
|
- .level {
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- border-radius: 8rpx;
|
|
|
- font-weight: 400;
|
|
|
- padding: 4rpx 8rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .level1 {
|
|
|
- background: red;
|
|
|
- }
|
|
|
-
|
|
|
- .level2 {
|
|
|
- background-color: rgba(255, 123, 0, 1);
|
|
|
- }
|
|
|
-
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
-
|
|
|
- .date {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item-value {
|
|
|
- text-align: right;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .more {
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .value1 {
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .value2 {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 地锁信息弹窗
|
|
|
- .body8data-popup {
|
|
|
-
|
|
|
- .content {
|
|
|
-
|
|
|
- padding: 32rpx;
|
|
|
-
|
|
|
- .headline {
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .infos {
|
|
|
- //padding-bottom: 100rpx;
|
|
|
-
|
|
|
- .item:last-of-type {
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- //line-height: 48rpx;
|
|
|
- padding: 20rpx 0;
|
|
|
- border-bottom: 1px solid #cccccc;
|
|
|
-
|
|
|
- .item-title {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- width: 200rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .item-value {
|
|
|
- color: #666666;
|
|
|
- flex: 1;
|
|
|
- margin-left: 16rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .img{
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- transform: rotate(90deg);
|
|
|
- margin-left: 96rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .get {
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: rgba(22, 119, 255, 1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .top-span{
|
|
|
- border-top: 1px solid rgba(245, 245, 245, 1);
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- padding-top: 16rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
- .item-span{
|
|
|
- white-space: pre;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 4rpx;
|
|
|
- width: 30%;
|
|
|
- font-size: 28rpx;
|
|
|
- span{
|
|
|
- margin: 0 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- img{
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .lockStatusX1{
|
|
|
- color: #00B962;
|
|
|
- }
|
|
|
- .lockStatusX2{
|
|
|
- color: #1677FF;
|
|
|
- }
|
|
|
-
|
|
|
- .statusX1{
|
|
|
- color: #00B962;
|
|
|
- }
|
|
|
- .statusX2{
|
|
|
- color: #1677FF;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ return `${m}m`
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return '0m'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ radioChange(e) {
|
|
|
+ // console.log(e);
|
|
|
+ },
|
|
|
+ // 选中任一radio时，由radio-group触发
|
|
|
+ selector2confirm(e) {
|
|
|
+ var time = e.year + "-" + e.month
|
|
|
+ this.radiolist[5].name = e.year + "年" + e.month + "月"
|
|
|
+ this.body0data.tabsFrom.showIndex = time
|
|
|
+ this.getLockUsageRate()
|
|
|
+ },
|
|
|
+ selector2cancel() {
|
|
|
+ this.radiovalue = "1"
|
|
|
+ this.radiolist[5].name = "指定月份"
|
|
|
+ this.getLockUsageRate()
|
|
|
+ },
|
|
|
+ radioGroupChange(e) {
|
|
|
+ console.log(e);
|
|
|
+ if (e == 0) {
|
|
|
+ this.body0data.tabsFrom.show = true
|
|
|
+ } else {
|
|
|
+ this.radiolist[5].name = "指定月份"
|
|
|
+ this.getLockUsageRate()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.getInfo()
|
|
|
+ this.geterrList()
|
|
|
+ //this.getLockUsageRate()
|
|
|
+ // this.occupancyByTime(1)
|
|
|
+ //this.getbody1()
|
|
|
+ //this.getbody2()
|
|
|
+ //this.occupancyByTimeBar(1);
|
|
|
+ //this.getbody3()
|
|
|
+ //this.getbody4()
|
|
|
+ //this.durationDistribution()
|
|
|
+ },
|
|
|
+ occupancyByTime(init) {
|
|
|
+ if (init) {
|
|
|
+ var date = new Date();
|
|
|
+
|
|
|
+ this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
|
|
|
+ this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ }
|
|
|
+ this.jpContentMap.body2 = 0
|
|
|
+ this.body2data.query.floorId = this.id
|
|
|
+
|
|
|
+ API_index.occupancyByTime(
|
|
|
+ this.body2data.query
|
|
|
+ ).then((response) => {
|
|
|
+ this.body2data.data = [
|
|
|
+ ...response.data.locksTimeList,
|
|
|
+ // ...response.data.locksTimeList,
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (this.body2data.data.length == 0) {
|
|
|
+ this.jpContentMap.body2 = 1
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body2 = 2
|
|
|
+
|
|
|
+ this.getbody2()
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ body2dataconfirm(e) {
|
|
|
+
|
|
|
+ var date = new Date(e.year + "-" + e.month + "-1");
|
|
|
+ this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
|
|
|
+ this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ this.occupancyByTime()
|
|
|
+ },
|
|
|
+ getLockUsageRate() {
|
|
|
+ var obj = {
|
|
|
+ floorId: this.id,
|
|
|
+ queryType: this.radiovalue
|
|
|
+ }
|
|
|
+ if (this.radiovalue == 0) {
|
|
|
+ obj.queryMonth = this.body0data.tabsFrom.showIndex
|
|
|
+ }
|
|
|
+ API.lockUsageRate(obj).then((res) => {
|
|
|
+ this.lockUsageRateData = res.data
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ durationDistribution() {
|
|
|
+ this.jpContentMap.body4 = 0
|
|
|
+
|
|
|
+ var date = new Date();
|
|
|
+ //test
|
|
|
+ //this.body4data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ // this.body4data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+
|
|
|
+ this.body4data.query.floorId = this.id
|
|
|
+ API_index.durationDistribution(
|
|
|
+ this.body4data.query
|
|
|
+ ).then((response) => {
|
|
|
+ this.body4data.data = response.data.distribution;
|
|
|
+
|
|
|
+ if (this.body4data.data.length == 0) {
|
|
|
+ this.jpContentMap.body4 = 1
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body4 = 2
|
|
|
+ //this.getbody3()
|
|
|
+ this.getbody4()
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ var obj = {
|
|
|
+ id: this.id
|
|
|
+ }
|
|
|
+ this.jpContentMap.body8 = 0
|
|
|
+ API.lockDetails(obj).then((res) => {
|
|
|
+ this.floorlockInfo = res.data.floorlockInfo
|
|
|
+ this.title = this.floorlockInfo.parkingName
|
|
|
+ uni.hideLoading();
|
|
|
+ this.jpContentMap.body8 = 2
|
|
|
+ //this.getWhiteList()
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getbody1() {
|
|
|
+ var key = "body1pie1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px(170 * 2)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+
|
|
|
+
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['80%', '50%'],
|
|
|
+ radius: [35, 50],
|
|
|
+ data: [{
|
|
|
+ itemStyle: {
|
|
|
+ color: "#EB3C31"
|
|
|
+ },
|
|
|
+ value: 1048,
|
|
|
+ name: '0.5小时\n20%',
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemStyle: {
|
|
|
+ color: "#EF8132"
|
|
|
+ },
|
|
|
+
|
|
|
+ value: 735,
|
|
|
+ name: '2小时\n10%'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ itemStyle: {
|
|
|
+ color: "#929292"
|
|
|
+ },
|
|
|
+ value: 580,
|
|
|
+ name: '2-6小时\n30%'
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ ]
|
|
|
+
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody4() {
|
|
|
+ var key = "body4pie1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px(170 * 2)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+ var dataApi = this.body4data.data;
|
|
|
+
|
|
|
+ var data = []
|
|
|
+ var num = 0
|
|
|
+ var sum = 0
|
|
|
+ Object.keys(dataApi).forEach(key1 => {
|
|
|
+ num += dataApi[key1]
|
|
|
+ });
|
|
|
+ var i = 0
|
|
|
+ Object.keys(dataApi).forEach(key1 => {
|
|
|
+ var value = dataApi[key1]
|
|
|
+ if (value != 0) {
|
|
|
+ var obj = {
|
|
|
+ value: value,
|
|
|
+ name: key1
|
|
|
+ }
|
|
|
+
|
|
|
+ if (num != 0) {
|
|
|
+ var valueInt = parseInt(value / num * 100)
|
|
|
+ if (valueInt == 0 && value != 0) {
|
|
|
+ valueInt = 1
|
|
|
+ }
|
|
|
+ sum += valueInt;
|
|
|
+
|
|
|
+ if (i == Object.keys(dataApi).length - 1) {
|
|
|
+ if (sum != 100) {
|
|
|
+ valueInt += (100 - sum)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ obj.name += '\n' + (valueInt) + '%'
|
|
|
+ }
|
|
|
+ data.push(obj)
|
|
|
+ }
|
|
|
+ i++;
|
|
|
+ });
|
|
|
+
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['80%', '50%'],
|
|
|
+ radius: [45, 60],
|
|
|
+ data: data
|
|
|
+
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ occupancyByTimeBar(init) {
|
|
|
+ if (init) {
|
|
|
+ var date = new Date();
|
|
|
+ //test
|
|
|
+ //this.body3data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ //this.body3data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ }
|
|
|
+ this.jpContentMap.body3 = 0
|
|
|
+
|
|
|
+ this.body3data.query.floorId = this.id
|
|
|
+ API_index.occupancyByTimeBar(
|
|
|
+ this.body3data.query
|
|
|
+ ).then((response) => {
|
|
|
+ this.body3data.data = [
|
|
|
+ ...response.data.locksTimeList,
|
|
|
+ // ...response.data.locksTimeList,
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (this.body3data.data.length == 0) {
|
|
|
+ this.jpContentMap.body3 = 1
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body3 = 2
|
|
|
+ this.getbody3()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getbody3() {
|
|
|
+ var key = "body3bar1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px(170 * 2)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ var dataApi = this.body3data.data;
|
|
|
+
|
|
|
+ myChart.clear()
|
|
|
+
|
|
|
+ var data1 = []
|
|
|
+ var data2 = [] //useDays
|
|
|
+ var i = 0
|
|
|
+ dataApi[0].timeUseList.forEach(item => {
|
|
|
+
|
|
|
+ Object.keys(item).forEach(key1 => {
|
|
|
+
|
|
|
+ data1.push(key1 + '点')
|
|
|
+ var num = 0
|
|
|
+
|
|
|
+ dataApi.forEach(item2 => {
|
|
|
+ num += item2.timeUseList[i][key1].useDays
|
|
|
+
|
|
|
+ })
|
|
|
+ data2.push(num)
|
|
|
+ });
|
|
|
+ i += 1
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ var axisLabel = {
|
|
|
+ rotate: 40,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data1.length < 7) {
|
|
|
+ axisLabel = {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ axisLabel.interval = 0;
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+ axisLabel: axisLabel,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ var result = params[0].name + '<br/>';
|
|
|
+ for (var i = 0; i < params.length; i++) {
|
|
|
+ result += params[i].marker + ' ' + params[i].value + '次<br/>';
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ itemStyle: {
|
|
|
+ color: "#5A88E5"
|
|
|
+ },
|
|
|
+ data: data2,
|
|
|
+ type: 'bar'
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody2() {
|
|
|
+ var key = "body2line1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ var dataApi = this.body2data.data;
|
|
|
+
|
|
|
+ var head = 20 * (parseInt(dataApi.length / 4)) + 20
|
|
|
+
|
|
|
+
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px((170 + head) * 2)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+
|
|
|
+ var data1 = []
|
|
|
+ var series = [];
|
|
|
+
|
|
|
+ dataApi.forEach(item => {
|
|
|
+
|
|
|
+ var obj = {
|
|
|
+ name: item.lockName,
|
|
|
+ areaStyle: {},
|
|
|
+ itemStyle: {
|
|
|
+ color: "#BBD4FB"
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ color: "#307AF6"
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ type: 'line'
|
|
|
+ }
|
|
|
+ if (dataApi.length == 1) {
|
|
|
+ obj.label.color = "#307AF6"
|
|
|
+ obj.areaStyle = {}
|
|
|
+ obj.itemStyle = {
|
|
|
+ color: "#BBD4FB"
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ item.timeUseList.forEach(item2 => {
|
|
|
+ Object.keys(item2).forEach(key1 => {
|
|
|
+
|
|
|
+ obj.data.push(item2[key1].useRate)
|
|
|
+ });
|
|
|
+ })
|
|
|
+ series.push(obj)
|
|
|
+ })
|
|
|
+ dataApi[0].timeUseList.forEach(item => {
|
|
|
+
|
|
|
+ Object.keys(item).forEach(key1 => {
|
|
|
+ data1.push(key1)
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+ var axisLabel = {
|
|
|
+ rotate: 40,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data1.length < 7) {
|
|
|
+ axisLabel = {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ axisLabel.interval = 0;
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+ axisLabel: axisLabel,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+
|
|
|
+ formatter: function(params) {
|
|
|
+ var result = params[0].name + '点<br/>';
|
|
|
+ for (var i = 0; i < params.length; i++) {
|
|
|
+ result += params[i].marker + params[i].seriesName + ': ' + params[i].value +
|
|
|
+ '%<br/>';
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: (20 + head),
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: series,
|
|
|
+
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .gradient-header {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jpback {
|
|
|
+ height: 268rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .no_statistics {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistics {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 999px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .change-img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 1px 8rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #838383;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-all {
|
|
|
+ margin-left: auto;
|
|
|
+ color: rgba(131, 131, 131, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-tags {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ background-color: rgba(39, 177, 72, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 2rpx 8rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .typeN1 {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .typeN2 {
|
|
|
+ background-color: #8161ff;
|
|
|
+ background-color: #8161ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statusN {
|
|
|
+ background-color: #838383
|
|
|
+ }
|
|
|
+
|
|
|
+ .lockStatusN {
|
|
|
+
|
|
|
+ background-color: rgba(153, 153, 153, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .lockStatusN2 {
|
|
|
+ background-color: #03A9F4
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ .img {
|
|
|
+ margin-right: 8rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data2 {
|
|
|
+ height: 336rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: linear-gradient(180deg, rgba(222, 222, 222, 1) 3%, rgba(255, 255, 255, 1) 5%, rgba(232, 232, 232, 1) 56%, rgba(255, 255, 255, 1) 59%, rgba(236, 236, 236, 1) 95%, rgba(215, 215, 215, 1) 98%);
|
|
|
+
|
|
|
+ .top {
|
|
|
+ background-repeat: round;
|
|
|
+ background-image: url('@/assets/img/deviceTab/index3-2.png');
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ text-align: center;
|
|
|
+ height: 152rpx;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ .name {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ padding: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body5data {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .data {
|
|
|
+ display: flex;
|
|
|
+ width: 80%;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body7data {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 33%;
|
|
|
+ padding: 16rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .value:nth-child(3) {
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 隔行变色: 偶数行设置背景色 */
|
|
|
+ .line:nth-child(odd) {
|
|
|
+ background-color: #F2F2F2;
|
|
|
+ /* 偶数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .line:nth-child(even) {
|
|
|
+ background-color: #FFFFFF
|
|
|
+ /* 奇数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .body8main {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 33%;
|
|
|
+ padding: 16rpx;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 隔行变色: 偶数行设置背景色 */
|
|
|
+ .line:nth-child(odd) {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ /* 偶数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .line:nth-child(even) {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ /* 奇数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ .table_v {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_tr {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 72rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 240rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_td {
|
|
|
+
|
|
|
+ height: 72rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_td1 {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_td2 {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_td3 {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_td4 {
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 隔行变色: 偶数行设置背景色 */
|
|
|
+ .row:nth-child(odd) {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ /* 偶数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_tr:nth-child(odd) {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ /* 偶数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .row:nth-child(even) {
|
|
|
+ background-color: #ffffff;
|
|
|
+ /* 奇数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_tr:nth-child(even) {
|
|
|
+ background-color: #ffffff;
|
|
|
+ /* 奇数行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .body6main {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .abnormal-item:last-of-type {
|
|
|
+ border-bottom: none !important;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .abnormal-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ .level {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level1 {
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level2 {
|
|
|
+ background-color: rgba(255, 123, 0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 地锁信息弹窗
|
|
|
+ .body8data-popup {
|
|
|
+
|
|
|
+ .content {
|
|
|
+
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .headline {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos {
|
|
|
+ //padding-bottom: 100rpx;
|
|
|
+
|
|
|
+ .item:last-of-type {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ //line-height: 48rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-bottom: 1px solid #cccccc;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: #666666;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ margin-left: 96rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .get {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-span {
|
|
|
+ border-top: 1px solid rgba(245, 245, 245, 1);
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 16rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ .item-span {
|
|
|
+ white-space: pre;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ width: 30%;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin: 0 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .lockStatusX1 {
|
|
|
+ color: #00B962;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lockStatusX2 {
|
|
|
+ color: #1677FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statusX1 {
|
|
|
+ color: #00B962;
|
|
|
+ }
|
|
|
+
|
|
|
+ .statusX2 {
|
|
|
+ color: #1677FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .main_list1 {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .list-body {
|
|
|
+ padding: 24rpx 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ border-bottom: 1px solid rgba(232, 232, 232, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {}
|
|
|
+
|
|
|
+ .statusN1 {}
|
|
|
+
|
|
|
+ .statusN2 {}
|
|
|
+
|
|
|
+ .statusN3 {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ display: flex;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ width: 150rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .list {
|
|
|
+ //padding: 24rpx 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid rgba(232, 232, 232, 1);
|
|
|
+ padding: 12rpx 0;
|
|
|
+ margin: 12rpx 0;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ margin: 0 12rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .line1,
|
|
|
+ .line2 {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line1 {
|
|
|
+ .line1title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ background-color: rgba(255, 61, 0, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #fff;
|
|
|
+ padding: 2rpx 8rpx;
|
|
|
+ //border-radius: 4px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .status0 {
|
|
|
+ background-color: rgba(255, 61, 0, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .status1 {
|
|
|
+ background-color: #007aff;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .status2 {
|
|
|
+ background-color: #ff9900;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .status3 {
|
|
|
+ background-color: #19be6b;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .status4 {
|
|
|
+ border: 1px solid rgba(255, 61, 0, 1);
|
|
|
+ color: rgba(255, 61, 0, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .errorDesc {
|
|
|
+ margin: 8rpx 0;
|
|
|
+ width: 480rpx;
|
|
|
+ color: #777777;
|
|
|
+ font-size: 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 禁止换行，强制单行 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .item:not(:last-child) {
|
|
|
+ // border-bottom:1px solid rgba(232,232,232,1);
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
zhengkaixin