1201 lines
36 KiB
Vue
1201 lines
36 KiB
Vue
<template>
|
||
<view class="container">
|
||
<scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation>
|
||
<view
|
||
v-for="(item, index) in changeList"
|
||
class="scrollItem"
|
||
style="width: 22%"
|
||
:class="{ active: tabIndex == index }"
|
||
:data-current="tabIndex"
|
||
@click="sendTabItem(item, index)"
|
||
:key="index"
|
||
>
|
||
{{ item.title }}
|
||
</view>
|
||
</scroll-view>
|
||
<view v-show="tabIndex === 0">
|
||
<scroll-view scroll-y="true" style="height: 95vh">
|
||
<uni-card title="设备时间">
|
||
<uni-forms>
|
||
<uni-forms-item label="最近定位时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ equipmentTime.latestOrientationTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="最新上线时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ equipmentTime.latestOnlineTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="电量更新时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ equipmentTime.batteryRenewalTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="最新巡检时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ equipmentTime.latestInspectionTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="最新调度时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ equipmentTime.latestDispatchTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
<uni-card title="设备状态">
|
||
<uni-forms>
|
||
<view class="flex justify-start">
|
||
<uni-forms-item label="电池电量" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.soc }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="轮锁状态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.wheelLocked }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="flex justify-start">
|
||
<uni-forms-item label="电压" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.voltage }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="轮动状态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.isWheelSpin }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="flex justify-start">
|
||
<uni-forms-item label="速度" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.speed }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="运动状态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.isMoving }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="flex justify-start">
|
||
<uni-forms-item label="网络信号" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.gsm }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="电池仓状态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.seatLocked }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="flex justify-start">
|
||
<uni-forms-item label="在线状态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.online }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="头盔锁状态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.isHelmetLocked }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="flex justify-start">
|
||
<uni-forms-item label="投放状态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.dropMode }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="头盔在位" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.helmetExit }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<view class="flex justify-start">
|
||
<uni-forms-item label="电门开关" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.accOn }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="车辆姿态" class="with50">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.bikeAttitude }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</view>
|
||
<uni-forms-item label="扫码失败次数">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.scanTheCodeLoseCount }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="所处站点">
|
||
<view class="lengthwz">
|
||
{{ equipmentState.position }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
<uni-card title="运营信息">
|
||
<uni-forms>
|
||
<uni-forms-item label="车辆编号">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ operateInfo.bikeCode }}
|
||
</view>
|
||
<view
|
||
v-if="operateInfo.bikeCode"
|
||
@click="copyOrderCode(operateInfo.bikeCode)"
|
||
>
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-copy"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="IMEI">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ operateInfo.imei }}
|
||
</view>
|
||
<view
|
||
v-if="operateInfo.imei"
|
||
@click="copyOrderCode(operateInfo.imei)"
|
||
>
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-copy"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="设备SN">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ operateInfo.sn }}
|
||
</view>
|
||
<view
|
||
v-if="operateInfo.sn"
|
||
@click="copyOrderCode(operateInfo.sn)"
|
||
>
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-copy"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="车牌号">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ operateInfo.bikeNumber }}
|
||
</view>
|
||
<view
|
||
v-if="operateInfo.bikeNumber"
|
||
@click="copyOrderCode(operateInfo.bikeNumber)"
|
||
>
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-copy"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="车辆型号">
|
||
<view class="deepBlackBoldText">
|
||
{{ operateInfo.bikeModel }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view v-show="tabIndex === 1">
|
||
<view class="divmap">
|
||
<map-location
|
||
height="500px"
|
||
:lng="104.06476"
|
||
:lat="30.5702"
|
||
iconPath="/static/map/eCard_icon.png"
|
||
/>
|
||
</view>
|
||
<you-touchbox
|
||
initTop="500"
|
||
:disable="isTouchDisable"
|
||
minTop="220"
|
||
maxTop="5"
|
||
@get-end-detail="getEndDetail"
|
||
>
|
||
<scroll-view
|
||
class="scroll-container"
|
||
:scroll-y="isScrollY"
|
||
style="height: 95vh"
|
||
>
|
||
<uni-card title="最后定位">
|
||
<uni-forms>
|
||
<uni-forms-item label="最后定位时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestOrientation.latestOrientationTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="ACC状态">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestOrientation.accState }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="设防状态">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestOrientation.fortification }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="电池电量">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestOrientation.soc }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
<uni-card title="最后扫码点">
|
||
<uni-forms>
|
||
<uni-forms-item label="最后扫码时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestScanPoint.latestScanTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="扫码地点">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestScanPoint.scanPosition }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="用户名">
|
||
<view class="deepBlackBoldText">
|
||
{{ maskUserName(latestScanPoint.userName) }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="手机号">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ maskPhoneNumber(latestScanPoint.phoneNumber) }}
|
||
</view>
|
||
<view
|
||
v-if="latestScanPoint.phoneNumber"
|
||
@click="makeACall(latestScanPoint.phoneNumber)"
|
||
>
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-phone"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
<uni-card title="最后还车点">
|
||
<uni-forms>
|
||
<uni-forms-item label="最后还车时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestDropOffpoint.latestDropOffAt }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="用户坐标">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestDropOffpoint.userCoordinate }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="车辆坐标">
|
||
<view class="deepBlackBoldText">
|
||
{{ latestDropOffpoint.vehicleCoordinate }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
<uni-card title="最后轨迹">
|
||
<uni-forms>
|
||
<uni-forms-item label="起点时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ finalTrajectory.startingPointAt }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="起点地点">
|
||
<view class="deepBlackBoldText">
|
||
{{ finalTrajectory.startingPointPosition }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="终点时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ finalTrajectory.endPointAt }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="终点地址">
|
||
<view class="deepBlackBoldText">
|
||
{{ finalTrajectory.endPointPosition }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</scroll-view>
|
||
</you-touchbox>
|
||
</view>
|
||
|
||
<view v-show="tabIndex === 2">
|
||
<z-paging
|
||
:fixed="false"
|
||
:height="scrollHeight + 29 + 'px'"
|
||
ref="instructionRecordList"
|
||
v-model="instructionRecord"
|
||
@query="loadMoreDataInstructionRecord"
|
||
:default-page-no="1"
|
||
:default-page-size="10"
|
||
:auto-show-back-to-top="true"
|
||
>
|
||
<view v-for="(item, index) in instructionRecord" :key="index">
|
||
<uni-card>
|
||
<template v-slot:title>
|
||
<view class="flex justify-between cardtitle">
|
||
<view class="flex align-center">
|
||
<view class="cardtitleri">
|
||
{{ item.com }}
|
||
</view>
|
||
<view style="margin-left: 10px">
|
||
<view
|
||
v-if="item.operateResult == '执行成功'"
|
||
class="cu-tag radius line-green"
|
||
style="background-color: rgba(203, 240, 204, 0.4)"
|
||
>{{ item.operateResult }}
|
||
</view>
|
||
<view
|
||
v-else-if="item.operateResult == '执行失败'"
|
||
class="cu-tag radius line-red"
|
||
style="background-color: rgba(247, 152, 152, 0.4)"
|
||
>{{ item.operateResult }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<uni-forms>
|
||
<uni-forms-item label="创建时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.createdAt }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="执行时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.operateTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="来源类型">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.resourceType }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="用户名称">
|
||
<view class="deepBlackBoldText">
|
||
{{
|
||
item.resourceType == "用户端"
|
||
? maskUserName(item.operateUserName)
|
||
: item.operateUserName
|
||
}}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="手机号码">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{
|
||
item.resourceType == "管理平台"
|
||
? item.phoneNumber
|
||
: maskPhoneNumber(item.phoneNumber)
|
||
}}
|
||
</view>
|
||
<view @click="makeACall(item.phoneNumber)">
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-phone"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
|
||
<view v-show="tabIndex === 3">
|
||
<view class="divmap">
|
||
<map-location height="500px" :lng="104.117262" :lat="30.598726" />
|
||
</view>
|
||
<you-touchbox
|
||
initTop="500"
|
||
minTop="220"
|
||
maxTop="5"
|
||
@get-end-detail="getEndDetail"
|
||
style="border-radius: 15px !important; background-color: #f3f4f6"
|
||
>
|
||
<z-paging
|
||
:scrollable="isScrollY"
|
||
:fixed="false"
|
||
height="95vh"
|
||
:refresher-enabled="false"
|
||
ref="sacnRecord"
|
||
v-model="sacnRecordList"
|
||
@query="loadMoreDatasacnRecordList"
|
||
:default-page-no="1"
|
||
:default-page-size="10"
|
||
:auto-show-back-to-top="true"
|
||
>
|
||
<view v-for="(item, index) in sacnRecordList" :key="index">
|
||
<uni-card>
|
||
<uni-forms>
|
||
<uni-forms-item label="扫码时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.faultDescription }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="扫码地址">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.receiverName }}
|
||
</view>
|
||
<view @click="wakeUpMap(item.receiverName)">
|
||
<uni-icons
|
||
type="paperplane"
|
||
color="orange"
|
||
size="18"
|
||
></uni-icons>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="扫码人">
|
||
<view class="deepBlackBoldText">
|
||
{{ maskUserName(item.handleResult) }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="手机号码">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ maskPhoneNumber(item.phoneNumber) }}
|
||
</view>
|
||
<view @click="makeACall(item.phoneNumber)">
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-phone"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</view>
|
||
</z-paging>
|
||
</you-touchbox>
|
||
</view>
|
||
|
||
<view v-show="tabIndex === 4">
|
||
<z-paging
|
||
:fixed="false"
|
||
:height="scrollHeight + 29 + 'px'"
|
||
ref="orderRecordList"
|
||
v-model="orderRecord"
|
||
@query="loadMoreDataOrderRecord"
|
||
:default-page-no="1"
|
||
:default-page-size="10"
|
||
:auto-show-back-to-top="true"
|
||
>
|
||
<view v-for="(item, index) in orderRecord" :key="index">
|
||
<uni-card @click="viewWorkOrderInfo(item)">
|
||
<template v-slot:title>
|
||
<view
|
||
@click="viewWorkOrderInfo(item)"
|
||
class="flex justify-between cardtitle"
|
||
>
|
||
<view class="flex align-center">
|
||
<view class="cardtitleri">
|
||
{{ item.orderType }}
|
||
</view>
|
||
<view style="margin-left: 10px">
|
||
<view
|
||
v-if="item.handleState == '已完成'"
|
||
class="cu-tag radius line-green"
|
||
style="background-color: rgba(203, 240, 204, 0.4)"
|
||
>{{ item.handleState }}</view
|
||
>
|
||
<view
|
||
v-else-if="item.handleState == '未完成'"
|
||
class="cu-tag radius line-red"
|
||
style="background-color: rgba(247, 152, 152, 0.4)"
|
||
>{{ item.handleState }}</view
|
||
>
|
||
<view
|
||
v-else-if="item.handleState == '已取消'"
|
||
class="cu-tag radius line-grey"
|
||
style="background-color: #9c9c9c30"
|
||
>{{ item.handleState }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<uni-icons type="right" size="20"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<uni-forms>
|
||
<uni-forms-item label="工单编号">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.orderCode }}
|
||
</view>
|
||
<view @click="copyOrderCode(item.orderCode)">
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-copy"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="开始时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.createdAt }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="结束时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.handleAt || "-" }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="运维人员">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.receiver || "-" }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="手机号码">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.phoneNumber || "-" }}
|
||
</view>
|
||
<view @click="makeACall(item.phoneNumber)">
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-phone"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
|
||
<view v-show="tabIndex === 5">
|
||
<z-paging
|
||
:fixed="false"
|
||
:height="scrollHeight + 29 + 'px'"
|
||
ref="orderTrajectoryList"
|
||
v-model="orderTrajectory"
|
||
@query="loadMoreDataOrderTrajectory"
|
||
:default-page-no="1"
|
||
:default-page-size="10"
|
||
:auto-show-back-to-top="true"
|
||
>
|
||
<view v-for="(item, index) in orderTrajectory" :key="index">
|
||
<uni-card :title="'订单编号：' + item.orderId">
|
||
<uni-forms>
|
||
<uni-forms-item label="用户名称">
|
||
<view class="deepBlackBoldText">
|
||
{{ maskUserName(item.userName) }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="手机号码">
|
||
<view class="flex justify-between">
|
||
<view class="deepBlackBoldText">
|
||
{{ maskPhoneNumber(item.phoneNumber) }}
|
||
</view>
|
||
<view @click="makeACall(item.phoneNumber)">
|
||
<text
|
||
style="font-size: 18px; color: orange"
|
||
class="cuIcon-phone"
|
||
></text>
|
||
</view>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="骑行时长">
|
||
<view class="deepBlackBoldText">
|
||
<!-- item.ridingDuration -->
|
||
{{ calculateRideTime(item.startTime, item.endTime) }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="开始时间">
|
||
<view class="deepBlackBoldText">
|
||
<!-- item.createdAt -->
|
||
{{ item.startTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="结束时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.endTime }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
|
||
<view v-show="tabIndex === 6">
|
||
<z-paging
|
||
:fixed="false"
|
||
:height="scrollHeight + 29 + 'px'"
|
||
ref="faultList"
|
||
v-model="faultHistoryList"
|
||
@query="loadMoreDataFaultHistoryList"
|
||
:default-page-no="1"
|
||
:default-page-size="10"
|
||
:auto-show-back-to-top="true"
|
||
>
|
||
<view v-for="(item, index) in faultHistoryList" :key="index">
|
||
<uni-card
|
||
:title="'故障部位：' + item.faultPart"
|
||
:sub-title="item.reportAt"
|
||
>
|
||
<uni-forms>
|
||
<uni-forms-item label="故障内容">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.faultDescription }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="运维人员">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.receiverName }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="处理意见">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.handleResult }}
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="处理时间">
|
||
<view class="deepBlackBoldText">
|
||
{{ item.handleAt }}
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
</uni-card>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import dayjs from "dayjs";
|
||
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
|
||
import * as api from "@/utils/api.js";
|
||
import { showModelMessage } from "@/utils/tools.js";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import mapLocation from "@/pages/map/map-location.vue";
|
||
|
||
const ebikeInfo = ref({
|
||
bikeId: "",
|
||
bikeCode: "",
|
||
ecuId: "",
|
||
ecuSn: "",
|
||
position: "",
|
||
});
|
||
const isScrollY = ref(false);
|
||
const getEndDetail = ({ minTop, maxTop, curTop }) => {
|
||
if (curTop == maxTop) isScrollY.value = true;
|
||
else isScrollY.value = false;
|
||
};
|
||
const changeList = ref([
|
||
{
|
||
id: 0,
|
||
title: "车辆信息",
|
||
},
|
||
{
|
||
id: 1,
|
||
title: "定位信息",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "指令记录",
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "扫码记录",
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "工单记录",
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "订单轨迹",
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "故障记录",
|
||
},
|
||
]);
|
||
const scrollHeight = ref(0);
|
||
const equipmentTime = ref({});
|
||
const equipmentState = ref({});
|
||
const latestOrientation = ref({});
|
||
const finalTrajectory = ref({});
|
||
const latestScanPoint = ref({});
|
||
const latestDropOffpoint = ref({});
|
||
const operateInfo = ref({});
|
||
|
||
const tabIndex = ref(0);
|
||
|
||
const instructionRecord = ref([]);
|
||
const sacnRecordList = ref([]);
|
||
const orderRecord = ref([]);
|
||
const orderTrajectory = ref([]);
|
||
const faultHistoryList = ref([]);
|
||
|
||
const faultList = ref(null);
|
||
const orderTrajectoryList = ref(null);
|
||
const orderRecordList = ref(null);
|
||
const instructionRecordList = ref(null);
|
||
const sacnRecord = ref(null);
|
||
|
||
const viewWorkOrderInfo = (workOrder) => {
|
||
if (!workOrder) {
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/devops/ebikeinfo/workorderinfo?orderId=" +
|
||
workOrder.orderId +
|
||
"&orderType=" +
|
||
workOrder.orderType,
|
||
});
|
||
};
|
||
|
||
const wakeUpMap = () => {};
|
||
|
||
const maskUserName = (userName) => {
|
||
if (!userName) return "-";
|
||
const firstChar = userName.charAt(0);
|
||
const maskedName = firstChar + "*".repeat(userName.length - 1);
|
||
return maskedName;
|
||
};
|
||
|
||
const maskPhoneNumber = (phoneNumber) => {
|
||
if (!phoneNumber) return "-";
|
||
const firstPart = phoneNumber.substring(0, 3);
|
||
const lastPart = phoneNumber.substring(phoneNumber.length - 4);
|
||
const maskedPart = "*".repeat(phoneNumber.length - 7);
|
||
return firstPart + maskedPart + lastPart;
|
||
};
|
||
|
||
const makeACall = (phoneNumber) => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
success: () => {},
|
||
fail() {},
|
||
});
|
||
};
|
||
|
||
const copyOrderCode = (orderCode) => {
|
||
uni.setClipboardData({
|
||
data: orderCode,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: "复制成功",
|
||
icon: "success",
|
||
});
|
||
},
|
||
fail: (error) => {
|
||
uni.showToast({
|
||
title: "复制失败",
|
||
icon: "none",
|
||
});
|
||
},
|
||
});
|
||
};
|
||
|
||
const sendTabItem = (data) => {
|
||
let index = data["id"];
|
||
if (tabIndex.value == index) return;
|
||
tabIndex.value = index;
|
||
const param = {
|
||
bikeId: ebikeInfo.value.bikeId,
|
||
ecuSn: ebikeInfo.value.ecuSn,
|
||
ecuId: ebikeInfo.value.ecuId,
|
||
};
|
||
switch (index) {
|
||
case 0:
|
||
getBikeINfoData(param);
|
||
break;
|
||
case 1:
|
||
api.callEbikeInfo("getOrientationInfo", param).then((res) => {
|
||
console.log(res);
|
||
|
||
if (res.code === 200) {
|
||
latestOrientation.value = res.data.resLatestOrientationDto;
|
||
latestScanPoint.value = res.data.resLatestScanPointDto;
|
||
finalTrajectory.value = res.data.resFinalTrajectoryDto;
|
||
latestDropOffpoint.value = res.data.resLatestDropOffpointDto;
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
};
|
||
|
||
const getBikeINfoData = (param) => {
|
||
api
|
||
.callCoreApi(
|
||
"gps?ecuId=" +
|
||
ebikeInfo.value.ecuId +
|
||
"&bikeId=" +
|
||
ebikeInfo.value.bikeId,
|
||
{},
|
||
"get"
|
||
)
|
||
.then((ecudata) => {});
|
||
|
||
api.callEbikeInfo("getBikeDetailsINfoData", param).then((res) => {
|
||
if (res.code == 200) {
|
||
equipmentTime.value = res.data.resEquipmentTimeDto;
|
||
equipmentState.value = res.data.resEquipmentStateDto;
|
||
operateInfo.value = res.data.resOperateInfoDto;
|
||
}
|
||
});
|
||
};
|
||
|
||
const loadMoreDataFaultHistoryList = (pageNo, pageSize) => {
|
||
if (!ebikeInfo.value.bikeId) {
|
||
faultList.value.complete([]);
|
||
return;
|
||
}
|
||
// 组装参数
|
||
const params = {
|
||
bikeId: ebikeInfo.value.bikeId,
|
||
pageParam: {
|
||
pageNum: pageNo,
|
||
pageSize: pageSize,
|
||
},
|
||
};
|
||
api.callEbikeInfo("getFaultHistoryList", params).then((res) => {
|
||
if (res.code === 200) {
|
||
faultList.value.complete(res.data);
|
||
} else {
|
||
faultList.value.complete([]);
|
||
}
|
||
});
|
||
};
|
||
|
||
const loadMoreDataOrderRecord = (pageNo, pageSize) => {
|
||
if (!ebikeInfo.value.bikeId) {
|
||
orderRecordList.value.complete([]);
|
||
return;
|
||
}
|
||
// 组装参数
|
||
const params = {
|
||
bikeId: ebikeInfo.value.bikeId,
|
||
pageParam: {
|
||
pageNum: pageNo,
|
||
pageSize: pageSize,
|
||
},
|
||
};
|
||
api.callEbikeInfo("getWorkOrderRecordList", params).then((res) => {
|
||
if (res.code == 200) {
|
||
orderRecordList.value.complete(res.data);
|
||
} else {
|
||
orderRecordList.value.complete([]);
|
||
}
|
||
});
|
||
};
|
||
|
||
const loadMoreDataOrderTrajectory = (pageNo, pageSize) => {
|
||
if (!ebikeInfo.value.bikeId) {
|
||
orderTrajectoryList.value.complete([]);
|
||
return;
|
||
}
|
||
api
|
||
.callOrdereApi(
|
||
"userOrders/page?pageNum=" +
|
||
pageNo +
|
||
"&pageSize=" +
|
||
pageSize +
|
||
"&bikeId=" +
|
||
ebikeInfo.value.bikeId,
|
||
{},
|
||
"get"
|
||
)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
orderTrajectoryList.value.complete(res.data.records);
|
||
} else {
|
||
orderTrajectoryList.value.complete([]);
|
||
}
|
||
});
|
||
};
|
||
|
||
const loadMoreDataInstructionRecord = (pageNo, pageSize) => {
|
||
if (!ebikeInfo.value.bikeId) {
|
||
instructionRecordList.value.complete([]);
|
||
return;
|
||
}
|
||
// 组装参数
|
||
const params = {
|
||
bikeId: ebikeInfo.value.bikeId,
|
||
pageParam: {
|
||
pageNum: pageNo,
|
||
pageSize: pageSize,
|
||
},
|
||
};
|
||
api.callEbikeInfo("getInstructionRecordList", params).then((res) => {
|
||
if (res.code == 200) {
|
||
instructionRecordList.value.complete(res.data);
|
||
} else {
|
||
instructionRecordList.value.complete([]);
|
||
}
|
||
});
|
||
};
|
||
|
||
const loadMoreDatasacnRecordList = (pageNo, pageSize) => {
|
||
if (!ebikeInfo.value.bikeId) {
|
||
sacnRecord.value.complete([]);
|
||
return;
|
||
}
|
||
// 组装参数
|
||
const params = {
|
||
bikeId: ebikeInfo.value.bikeId,
|
||
pageParam: {
|
||
pageNum: pageNo,
|
||
pageSize: pageSize,
|
||
},
|
||
};
|
||
api.callEbikeInfo("getInstructionRecordList", params).then((res) => {
|
||
if (res.code == 200) {
|
||
sacnRecord.value.complete(res.data);
|
||
} else {
|
||
sacnRecord.value.complete([]);
|
||
}
|
||
});
|
||
};
|
||
|
||
onLoad((data) => {
|
||
const bikeId = data["bikeId"];
|
||
const ecuId = data["ecuId"];
|
||
const ecuSn = data["ecuSn"];
|
||
ebikeInfo.value.bikeId = bikeId;
|
||
ebikeInfo.value.ecuId = ecuId;
|
||
ebikeInfo.value.ecuSn = ecuSn;
|
||
});
|
||
|
||
const changePoint = (res) => {};
|
||
|
||
/**
|
||
* 计算骑行时长（支持跨天场景）
|
||
* @param {string} startTimeStr - 开始时间，格式：YYYY-MM-DD HH:mm:ss
|
||
* @param {string} endTimeStr - 结束时间，格式：YYYY-MM-DD HH:mm:ss
|
||
* @returns {string} 格式化的骑行时长，如 "16小时0分钟5秒"
|
||
*/
|
||
function calculateRideTime(startTimeStr, endTimeStr) {
|
||
// 解析时间字符串为Date对象（处理月份0-based问题）
|
||
function parseTime(timeStr) {
|
||
const match = timeStr.match(
|
||
/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/
|
||
);
|
||
if (!match) {
|
||
throw new Error(`时间格式错误: ${timeStr}，需为YYYY-MM-DD HH:mm:ss`);
|
||
}
|
||
const [, year, month, day, hour, minute, second] = match;
|
||
return new Date(
|
||
parseInt(year),
|
||
parseInt(month) - 1, // 月份是0-11，需减1
|
||
parseInt(day),
|
||
parseInt(hour),
|
||
parseInt(minute),
|
||
parseInt(second)
|
||
);
|
||
}
|
||
|
||
// 解析开始和结束时间
|
||
const start = parseTime(startTimeStr);
|
||
const end = parseTime(endTimeStr);
|
||
|
||
// 计算时间差（处理跨天场景）
|
||
let diffMs;
|
||
if (end > start) {
|
||
diffMs = end - start; // 结束时间在开始时间之后，直接计算差
|
||
} else {
|
||
// 结束时间早于开始时间，视为跨天，给结束时间加1天
|
||
const endNextDay = new Date(end);
|
||
endNextDay.setDate(endNextDay.getDate() + 1);
|
||
diffMs = endNextDay - start;
|
||
}
|
||
|
||
// 将毫秒差转换为小时、分钟、秒
|
||
const hours = Math.floor(diffMs / 3600000); // 1小时=3600000毫秒
|
||
const remainder = diffMs % 3600000;
|
||
const minutes = Math.floor(remainder / 60000); // 1分钟=60000毫秒
|
||
const seconds = Math.floor((remainder % 60000) / 1000); // 1秒=1000毫秒
|
||
|
||
// 格式化输出
|
||
return `${hours}小时${minutes}分钟${seconds}秒`;
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 获取设备信息
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
// 获取屏幕高度和状态栏高度
|
||
const screenHeight = systemInfo.screenHeight;
|
||
const statusBarHeight = systemInfo.statusBarHeight;
|
||
// 计算去掉状态栏后的可用区域高度
|
||
scrollHeight.value = screenHeight - statusBarHeight - 113;
|
||
const param = {
|
||
bikeId: ebikeInfo.value.bikeId,
|
||
ecuSn: ebikeInfo.value.ecuSn,
|
||
ecuId: ebikeInfo.value.ecuId,
|
||
};
|
||
getBikeINfoData(param);
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
padding: 0px 0px;
|
||
background-color: #f3f4f6;
|
||
}
|
||
|
||
.success {
|
||
color: green !important;
|
||
}
|
||
|
||
.failure {
|
||
color: red;
|
||
}
|
||
|
||
.default {
|
||
color: gray;
|
||
}
|
||
|
||
.lengthwz {
|
||
width: 60px;
|
||
line-height: 36px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.deepBlackBoldText {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.with50 {
|
||
width: 50%;
|
||
}
|
||
|
||
.uni-forms-item {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-bottom: 5px !important;
|
||
}
|
||
|
||
.uni-forms-item__content {
|
||
position: relative;
|
||
font-size: 14px;
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
flex-direction: row;
|
||
line-height: 36px;
|
||
}
|
||
|
||
.scrollWrap {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.scrollWrap .scrollItem {
|
||
display: inline-block;
|
||
width: 25%;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.scrollWrap .active {
|
||
color: #009dff !important;
|
||
position: relative;
|
||
font-weight: 600;
|
||
font-weight: bold;
|
||
text-decoration: underline;
|
||
text-underline-offset: 4px;
|
||
}
|
||
|
||
.scrollWrap .active :after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: calc(50% - 5px);
|
||
width: 10px;
|
||
height: 2px;
|
||
background-color: #009dff !important;
|
||
}
|
||
|
||
.uni-card {
|
||
border-radius: 15px !important;
|
||
}
|
||
|
||
.you-touchbox-content {
|
||
border-radius: 20px !important;
|
||
background-color: #f2f2f2 !important;
|
||
}
|
||
|
||
.uni-card__header {
|
||
font-weight: bold;
|
||
color: #000000;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.uni-card .uni-card__header .uni-card__header-box {
|
||
flex: none !important;
|
||
}
|
||
|
||
.uni-card .uni-card__header .uni-card__header-extra {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.uni-forms .uni-forms-item__label {
|
||
width: 100px !important;
|
||
}
|
||
|
||
.divmap {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 500px;
|
||
}
|
||
|
||
.cardtitleri {
|
||
font-size: 15px;
|
||
color: #3a3a3a;
|
||
padding: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.cardtitle {
|
||
margin: 5px 0px;
|
||
padding: 5px 0px;
|
||
border-bottom: solid 1px #f1f1f1;
|
||
}
|
||
</style>
|