316 lines
7.5 KiB
Vue
316 lines
7.5 KiB
Vue
<template>
|
|
<view class="bike-maintain-wrapper">
|
|
<view class="header-wrapper">
|
|
<view>
|
|
<view>
|
|
<text style="color: #b7b7b7">车辆编号/类型</text>
|
|
<text style="color: #3b80f8; margin-left: 20rpx" @click="openBikeInfo">详情</text>
|
|
<uni-icons color="#3b80f8" type="right" size="15"></uni-icons>
|
|
</view>
|
|
<view style="margin-top: 10rpx">
|
|
<text style="font-weight: bold; font-size: 32rpx">
|
|
{{ bikeInfo["carInfo"]["bikeCode"] || "-" }}
|
|
</text>
|
|
<text style="margin: 0 12rpx; color: #b7b7b7">|</text>
|
|
<text>/</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="header-right"
|
|
:style="{
|
|
color: getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'color'),
|
|
}"
|
|
>
|
|
<uni-icons
|
|
custom-prefix="iconfont"
|
|
:type="getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'icon')"
|
|
:color="getSocStatus(bikeInfo['carInfo']['resGPSDto']['soc'], 'color')"
|
|
:size="iconsize"
|
|
/>
|
|
{{ bikeInfo['carInfo']['resGPSDto']['soc'] || '-'}}%
|
|
</view>
|
|
</view>
|
|
<view class="status-wrapper">
|
|
{{ bikeInfo["WXInfo"]["faultPart"] || "-" }}
|
|
</view>
|
|
<scroll-view class="content-wrapper" scroll-y="true">
|
|
<view class="card-wrapper">
|
|
<view class="row">
|
|
<view class="key">用户姓名</view>
|
|
<view class="value">
|
|
{{ bikeInfo["WXInfo"]["reportUser"] || "-" }}
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="key">手机号</view>
|
|
<view class="value"> / </view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="key">上报来源</view>
|
|
<view class="value">
|
|
{{ bikeInfo["WXInfo"]["reportSource"] || "-" }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row">
|
|
<view class="key"> 订单编号</view>
|
|
<view class="value">
|
|
/
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="key"> 上报时间</view>
|
|
<view class="value">
|
|
{{ bikeInfo["WXInfo"]["reportAt"] || "-" }}
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="key"> 故障原因</view>
|
|
<view class="value">
|
|
{{ bikeInfo["WXInfo"]["faultDescription"] || "-" }}
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="key"> 上报图片</view>
|
|
<view class="value">
|
|
<image
|
|
v-for="(item, index) in bikeInfo['WXInfo']['fileList'] || []"
|
|
:key="item.fileUniqueKey"
|
|
class="previewImage"
|
|
:src="item.url"
|
|
mode="aspectFit"
|
|
@click="
|
|
previewImage( item.url)
|
|
"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="footer-wrapper">
|
|
<AuditBtnBox :bellParams="bellParams" :bikeCode="bikeCode" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import AuditBtnBox from "@/components/audit-btn-box/audit-btn-box.vue";
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import * as api from "@/utils/api.js";
|
|
import navigator from "@/utils/navigator.js";
|
|
|
|
const iconsize = 18;
|
|
const bikecode = ref("");
|
|
const bellParams = ref({
|
|
ecuId: "",
|
|
bikeId: "",
|
|
});
|
|
const bikeCode = ref("");
|
|
const bikeInfo = ref({
|
|
carInfo: {
|
|
resGPSDto: {},
|
|
},
|
|
WXInfo: {},
|
|
});
|
|
|
|
// 获取电池状态
|
|
const getSocStatus = (value, key) => {
|
|
let status = {
|
|
color: "#3b80f8",
|
|
icon: "icon-ebikedianliang1",
|
|
};
|
|
if (!value) return status;
|
|
|
|
switch (true) {
|
|
case value >= 80:
|
|
status.color = "#66c467";
|
|
status.icon = "icon-ebikedianliang2";
|
|
break;
|
|
case value >= 20 && value < 80:
|
|
status.color = "orange";
|
|
status.icon = "icon-ebikedianliang1";
|
|
break;
|
|
default:
|
|
status.color = "red";
|
|
status.icon = "icon-ebikedianliang";
|
|
}
|
|
|
|
return status[key];
|
|
};
|
|
|
|
const previewImage = (current) => {
|
|
uni.previewImage({
|
|
current, // 当前显示图片的链接
|
|
urls: [current], // 需要预览的图片链接列表
|
|
success: () => {},
|
|
fail: (err) => console.error("预览失败:", err),
|
|
});
|
|
};
|
|
|
|
function getBikeInfo(bikeCode) {
|
|
bikecode.value = String(bikeCode);
|
|
uni.showLoading({title: "加载中...",});
|
|
if (bikeCode) {
|
|
Promise.allSettled([getBikeINfoData(), getFaultInfo()]).then((results) => {
|
|
results.forEach((result, index) => {
|
|
if (result.status === "fulfilled") {
|
|
if (index === 0) bikeInfo.value.carInfo = result.value;
|
|
if (index === 1) bikeInfo.value.WXInfo = result.value;
|
|
|
|
uni.hideLoading();
|
|
} else {
|
|
console.error("获取车辆信息失败:", result.reason);
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: "没有找到车辆信息",
|
|
icon: "none",
|
|
});
|
|
}
|
|
}
|
|
|
|
// 获取车辆详细信息数据
|
|
function getBikeINfoData() {
|
|
return new Promise((resolve, reject) => {
|
|
api
|
|
.callMaintenanceApi(
|
|
"ebikeBikeInfo/getBikeINfoData?bikeCode=" + bikecode.value,
|
|
{},
|
|
"get"
|
|
)
|
|
.then((res) => {
|
|
if (res && res.data) {
|
|
resolve(res.data);
|
|
} else {
|
|
reject("获取车辆信息失败");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
reject(error);
|
|
});
|
|
});
|
|
}
|
|
|
|
// 获取车辆的维护信息
|
|
function getFaultInfo() {
|
|
const userInfo = uni.getStorageSync("userInfo");
|
|
const params = {
|
|
receiverId: userInfo.staffId,
|
|
bikeCode: bikecode.value,
|
|
};
|
|
return new Promise((resolve, reject) => {
|
|
//获取车辆维护订单编号
|
|
api
|
|
.callEbikeInfo("inspectHaveOrNotWorkOrder", params)
|
|
.then((res) => {
|
|
const orderId = res.data;
|
|
api
|
|
.callEbikeInfo("getFaultInfo?orderId=" + orderId, {}, "get")
|
|
.then((res1) => {
|
|
resolve(res1.data);
|
|
})
|
|
.catch((error) => {
|
|
reject(error);
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
reject(error);
|
|
});
|
|
});
|
|
}
|
|
|
|
function openBikeInfo() {
|
|
const { bikeId, ecuId, ecuSn } = bikeInfo.value.carInfo;
|
|
const url = `/pages/devops/ebikeinfo/ebikeinfo?bikeId=${bikeId}&ecuId=${ecuId}&ecuSn=${ecuSn}`;
|
|
uni.navigateTo({
|
|
url: url,
|
|
});
|
|
}
|
|
|
|
onLoad((options) => {
|
|
const { bikeCode } = navigator.getParams(options);
|
|
getBikeInfo(bikeCode);
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.bike-maintain-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5f5f5;
|
|
position: fixed;
|
|
overflow-y: hidden;
|
|
font-size: 26rpx;
|
|
|
|
.header-wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 0 20rpx;
|
|
justify-content: space-between;
|
|
justify-items: center;
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.content-wrapper {
|
|
width: 100%;
|
|
height: 81%;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.footer-wrapper {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
.card-wrapper {
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
background-color: white;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 26rpx;
|
|
margin: 35rpx 0;
|
|
|
|
.key {
|
|
color: #a8a8a8;
|
|
width: 26%;
|
|
}
|
|
|
|
.value {
|
|
color: #464646;
|
|
width: 74%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-wrapper {
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.previewImage {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
</style>
|