394 lines
10 KiB
Vue
394 lines
10 KiB
Vue
<style lang="scss" scoped>
|
||
.battery-info-ctn{
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.bottom-nav-list-ctn{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 12rpx 0;
|
||
z-index: 2;
|
||
box-shadow: 0px 0px 4px rgba(192,192,192,0.7);
|
||
background-color: #fff;
|
||
.bottom-nav-box{
|
||
width: 20%;
|
||
text-align: center;
|
||
position: relative;
|
||
&-text{
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
.middle-icon{
|
||
padding: 10rpx;
|
||
border: 1px solid #eee;
|
||
border-radius: 100%;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -40rpx;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
box-shadow: $box-shadow;
|
||
z-index: 10;
|
||
background-color: #fff;
|
||
}
|
||
.middle-text{
|
||
position: absolute;
|
||
bottom: -2rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
}
|
||
}
|
||
.map-ctn{
|
||
width: 100vw;
|
||
height: 100vh;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// width: 750rpx;
|
||
// height: 1334rpx;
|
||
}
|
||
.battery-info-content{
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 40rpx;
|
||
z-index: 2;
|
||
width: 680rpx;
|
||
transform: translateX(-50%);
|
||
padding: 20rpx 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
&-signal{
|
||
display: flex;
|
||
}
|
||
}
|
||
.battery-info-signal{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.battery-info-signal-gps,.battery-info-signal-gsm{
|
||
display: flex;
|
||
&-text{
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
.battery-info-row-two{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
.track-popup-ctn{
|
||
width: 600rpx;
|
||
.track-popup-title{
|
||
text-align: center;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 6rpx;
|
||
padding-top: 30rpx;
|
||
}
|
||
}
|
||
.track-popup-start-time{
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
padding-top: 40rpx;
|
||
&-label{
|
||
padding-left: 15rpx;
|
||
padding-right: 40rpx;
|
||
}
|
||
}
|
||
.track-popup-end-time{
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
padding-top: 40rpx;
|
||
&-label{
|
||
padding-left: 15rpx;
|
||
padding-right: 40rpx;
|
||
}
|
||
}
|
||
.track-popup-day{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 20rpx;
|
||
&-btn{
|
||
padding: 20rpx 40rpx;
|
||
}
|
||
}
|
||
.tarck-popup-button{
|
||
display: flex;
|
||
border-top: 1px solid #eee;
|
||
&-query,&-cancel{
|
||
width: 50%;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
}
|
||
&-query{
|
||
border-left: 1px solid #eee;
|
||
color: #1989FA;
|
||
}
|
||
}
|
||
.alarm-list{
|
||
|
||
}
|
||
.alarm-list-title{
|
||
padding-left: 30rpx;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.alarm-list{
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
.bottom-trace-ctn{
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 160rpx;
|
||
transform: translateX(-50%);
|
||
// width: 300rpx;
|
||
z-index: 2;
|
||
padding: 20rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #fff;
|
||
box-shadow: $box-shadow;
|
||
font-weight: 550;
|
||
}
|
||
</style>
|
||
<!-- :style="{'height': pageHeight + 'px'}" -->
|
||
<template>
|
||
<view class="battery-info-ctn">
|
||
<map class="map-ctn" :markers="markers" :latitude="26.036984" :longitude="119.210329" :show-compass="false"></map>
|
||
<view class="battery-info-content">
|
||
<u-collapse>
|
||
<u-collapse-item title="电池信息" >
|
||
<view class="battery-info-signal ">
|
||
<view class="battery-info-signal-gps">
|
||
<view class="battery-info-signal-gps-text">GPS</view>
|
||
<!-- <view class=""></view> -->
|
||
<signal value="85"></signal>
|
||
</view>
|
||
<view class="battery-info-signal-gsm ">
|
||
<view class="battery-info-signal-gsm-text">GSM</view>
|
||
<signal value="60"></signal>
|
||
</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">名称：哒哒哒哒哒哒</view>
|
||
<view class="battery-info-row-right">状态：静止(54天)</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">编号：027023590110</view>
|
||
<view class="battery-info-row-right">设防状态：撤防</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">控制：已通电</view>
|
||
<view class="battery-info-row-right">定位类型：静止(54天)</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">当日里程：0</view>
|
||
<view class="battery-info-row-right">总里程：499.1</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">电压：57.79（主店接通）</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">通信：2020年9月25日11:53:28</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">定位：2020年9月25日11:53:39</view>
|
||
</view>
|
||
<view class="battery-info-row-two pt20">
|
||
<view class="battery-info-row-left">地址：福建省宁德市周宁县944县道</view>
|
||
</view>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</view>
|
||
<view class="bottom-nav-list-ctn">
|
||
<view class="bottom-nav-box" @click="openTrackFn">
|
||
<tui-icon name="guiji" size="52"></tui-icon>
|
||
<view class="bottom-nav-box-text pt10">轨迹</view>
|
||
</view>
|
||
<view class="bottom-nav-box" @click="openAlarmListFn">
|
||
<tui-icon name="lingdang" size="52"></tui-icon>
|
||
<view class="bottom-nav-box-text pt10">报警</view>
|
||
</view>
|
||
<view class="bottom-nav-box" @click="beginTraceFn">
|
||
<view class="middle-icon pb10">
|
||
<tui-icon name="zhuizong" size="52" :color="traceShowFlag?'#39CD5F':'#999999'"></tui-icon>
|
||
</view>
|
||
<view class="middle-text">追踪</view>
|
||
</view>
|
||
<view class="bottom-nav-box" @click="openBlackoutFn">
|
||
<tui-icon name="duankailianjie" size="52"></tui-icon>
|
||
<view class="bottom-nav-box-text pt10">断电</view>
|
||
</view>
|
||
<view class="bottom-nav-box" @click="electricityFlag = true">
|
||
<tui-icon name="lianjie" size="52"></tui-icon>
|
||
<view class="bottom-nav-box-text pt10">通电</view>
|
||
</view>
|
||
</view>
|
||
<!-- 轨迹 -->
|
||
<u-popup v-model="trackFlag" mode="center" border-radius="24">
|
||
<view class="track-popup-ctn">
|
||
<view class="track-popup-title">轨迹</view>
|
||
<view class="track-popup-start-time">
|
||
<u-icon name="clock"></u-icon>
|
||
<text class="track-popup-start-time-label">开始时间</text>
|
||
<text>2020-09-25 00:00:00</text>
|
||
<u-picker mode="time" v-model="startTimePicker" :params="startTimeParams" default-time="2020-07-02 13:01:00"></u-picker>
|
||
</view>
|
||
<view class="track-popup-end-time">
|
||
<u-icon name="clock"></u-icon>
|
||
<text class="track-popup-end-time-label">结束时间</text>
|
||
<text>2020-09-25 15:27:42</text>
|
||
<u-picker mode="time" v-model="endTimePicker" :params="startTimeParams" default-time="2020-07-02 13:01:00"></u-picker>
|
||
</view>
|
||
<view class="track-popup-day">
|
||
<view class="track-popup-day-btn">当天</view>
|
||
<view class="track-popup-day-btn">昨天</view>
|
||
<view class="track-popup-day-btn">前天</view>
|
||
</view>
|
||
<view class="tarck-popup-button">
|
||
<view class="tarck-popup-button-cancel" @click="trackFlag = false">取消</view>
|
||
<view class="tarck-popup-button-query" @click="tarckQueryBtnFn">查询</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 警报列表 -->
|
||
<u-popup v-model="alarmFlag" mode="bottom" border-radius="16" :closeable="true">
|
||
<view class="alarm-content">
|
||
<view class="alarm-list-title">报警</view>
|
||
<scroll-view scroll-y="true" style="height: 300rpx;">
|
||
<view class="alarm-list">
|
||
<view v-for="index in 20" :key="index">
|
||
第{{index}}个报警
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 追踪时间 -->
|
||
<view class="bottom-trace-ctn" v-if="traceShowFlag">
|
||
<text>追踪时间：{{traceTimeStr}}</text>
|
||
</view>
|
||
<!-- 断电 -->
|
||
<u-modal v-model="blackoutFlag" content="您确定是否进行断电操作" :show-cancel-button="true" :confirm="blackoutConfirmFn"></u-modal>
|
||
<!-- 通电 -->
|
||
<u-modal v-model="electricityFlag" content="您确定是否进行通电操作" :show-cancel-button="true" :confirm="electricityConfirmFn"></u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import signal from "../../components/signal/signal"
|
||
let _this;
|
||
export default{
|
||
data(){
|
||
return {
|
||
markers:[{
|
||
id:"1",
|
||
iconPath:"http://static.drgyen.com/app/hc-app-power/images/car.png",
|
||
latitude:"26.036984",
|
||
longitude:"119.210329",
|
||
width:40,
|
||
height:40
|
||
}],
|
||
trackFlag:false, // 轨迹
|
||
alarmFlag:false, // 警报
|
||
startTimePicker:false, // 开始时间选项
|
||
endTimePicker:false, // 结束时间选项
|
||
startTimeStr:"", // 开始时间
|
||
endTimeStr:"", // 结束时间
|
||
startTimeParams: {
|
||
year: true,
|
||
month: true,
|
||
day: true,
|
||
hour: true,
|
||
minute: true,
|
||
second: true
|
||
},
|
||
// 追踪模块--------start
|
||
traceSeconds:0, // 秒
|
||
traceMinute:0, // 分钟
|
||
traceHour:0, // 小时
|
||
traceTimeStr:"00:00:00", // 计时
|
||
traceTimer:null,
|
||
traceShowFlag:false,
|
||
// 追踪模块--------end
|
||
blackoutFlag:false,
|
||
electricityFlag:false
|
||
}
|
||
},
|
||
onLoad() {
|
||
_this = this;
|
||
this.startTimeStr = new Date();
|
||
console.log(this.startTimeStr,"this.startTimeStr")
|
||
// let timer = setInterval(this.startTimer(),1000);
|
||
},
|
||
destroyed() {
|
||
clearInterval(this.traceTimer);
|
||
},
|
||
methods:{
|
||
openTrackFn(){
|
||
console.log("打开轨迹");
|
||
this.trackFlag = true;
|
||
},
|
||
openAlarmListFn(){
|
||
console.log("打开警报");
|
||
this.alarmFlag = true;
|
||
},
|
||
// 轨迹查询按钮
|
||
tarckQueryBtnFn(){
|
||
this.trackFlag = false;
|
||
},
|
||
// 开始追踪
|
||
beginTraceFn(){
|
||
this.traceShowFlag = !this.traceShowFlag;
|
||
if (this.traceShowFlag) {
|
||
this.traceTimer = setInterval(function(){
|
||
_this.startTimer();
|
||
},1000)
|
||
} else{
|
||
clearInterval(this.traceTimer);
|
||
}
|
||
|
||
},
|
||
// 计时
|
||
startTimer () {
|
||
this.traceSeconds += 1;
|
||
if (this.traceSeconds >= 60) {
|
||
this.traceSeconds = 0;
|
||
this.traceMinute = this.traceMinute + 1;
|
||
}
|
||
if (this.traceMinute >= 60) {
|
||
this.traceMinute = 0;
|
||
this.traceHour = this.traceHour + 1;
|
||
}
|
||
this.traceTimeStr = (this.traceHour < 10 ? '0' + this.traceHour : this.traceHour) + ':' + (this.traceMinute < 10 ? '0' + this.traceMinute : this.traceMinute) + ':' + (this.traceSeconds < 10 ? '0' + this.traceSeconds : this.traceSeconds);
|
||
},
|
||
// 打开断电提示框
|
||
openBlackoutFn(){
|
||
this.blackoutFlag = true;
|
||
},
|
||
// 确认断电
|
||
blackoutConfirmFn(){
|
||
this.blackoutFlag = false;
|
||
},
|
||
// 确认通电
|
||
electricityConfirmFn(){
|
||
this.electricityFlag = false;
|
||
}
|
||
},
|
||
components:{signal}
|
||
}
|
||
</script>
|
||
|