454 lines
11 KiB
Vue
454 lines
11 KiB
Vue
|
<template>
|
|||
|
|
|
|||
|
|
<view class="container">
|
|||
|
|
<scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation>
|
|||
|
|
<view class="scrollItem" style="width: 50%;" v-for="(item,index) in changeList" :key="index"
|
|||
|
|
:class="{active:tabIndex == index}" :data-current="tabIndex" @click="sendTabItem(item,index)">
|
|||
|
|
{{item.title}}
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view v-show="tabIndex === 0">
|
|||
|
|
<scroll-view scroll-y="true" style="height: 95vh;">
|
|||
|
|
<uni-card>
|
|||
|
|
<uni-forms>
|
|||
|
|
<uni-forms-item label="工单编号">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.orderCode}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="类型">
|
|||
|
|
<view class="flex" style="line-height: 36px;">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.orderType}}
|
|||
|
|
</view>
|
|||
|
|
<view style="margin-left: 10px;">
|
|||
|
|
<view v-if="workOrdrInfo.handleState=='已完成'" class="cu-tag radius line-green"
|
|||
|
|
style="background-color:rgba(203,240,204,0.4);">{{workOrdrInfo.handleState}}
|
|||
|
|
</view>
|
|||
|
|
<view v-else-if="workOrdrInfo.handleState=='进行中'" class="cu-tag radius line-blue"
|
|||
|
|
style="background-color: rgba(231,242,255, 0.4);">{{workOrdrInfo.handleState}}
|
|||
|
|
</view>
|
|||
|
|
<view v-else-if="workOrdrInfo.handleState=='已取消'" class="cu-tag radius line-grey"
|
|||
|
|
style="background-color: #9c9c9c30;">{{workOrdrInfo.handleState}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="来源">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.workOrderResource}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="级别">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.workOrderRank}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item v-if="workOrdrInfo.handleState=='已完成'
|
|||
|
|
&& orderType == '维修'" label="耗时">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
<view>{{workOrdrInfo.timeConsuming}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="line-height: 20px;color: rgb(195 195 195);">
|
|||
|
|
<view style="font-size: 12px;">
|
|||
|
|
开始时间：{{workOrdrInfo.createdAt}}
|
|||
|
|
</view>
|
|||
|
|
<view style="font-size: 12px;">
|
|||
|
|
结束时间：{{workOrdrInfo.handleAt}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="创建时间">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.createdAt}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="起始位置">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.startPosition}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="结束位置">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.endPosition}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="工单原因">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.workOrderReason}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
</uni-forms>
|
|||
|
|
</uni-card>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-show="tabIndex === 1">
|
|||
|
|
<scroll-view scroll-y="true" style="height: 95vh;">
|
|||
|
|
<uni-card v-if="orderType == '维修'" :title="'车辆编号：'+workOrdrInfo.bikeCode">
|
|||
|
|
<uni-forms>
|
|||
|
|
<uni-forms-item label="处理结果">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.handleState}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item v-if="workOrdrInfo.handleState=='已完成'" label="备注">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.handleResult}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item v-if="workOrdrInfo.handleState=='已完成'" label="处理后图片">
|
|||
|
|
<uni-file-picker readonly="true" limit="9"
|
|||
|
|
:value="workOrdrInfo.faultHandleFiles"></uni-file-picker>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<view class="dashed-divider"></view>
|
|||
|
|
<uni-title class="h3" type="h3" title="故障详情"></uni-title>
|
|||
|
|
<uni-forms-item label="故障部位">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.faultPart}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item v-if="workOrdrInfo.handleState=='已完成'" label="故障原因">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.faultDescription}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="上报人">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.reportUserName}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="上报来源">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.faultReportResource}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="上报时间">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.reportAt}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="车辆位置">
|
|||
|
|
<view class="deepBlackBoldText">
|
|||
|
|
{{workOrdrInfo.position}}
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
<uni-forms-item label="故障图片">
|
|||
|
|
<view>
|
|||
|
|
<uni-file-picker readonly="true" limit="9"
|
|||
|
|
:value="workOrdrInfo.faultReportFiles"></uni-file-picker>
|
|||
|
|
</view>
|
|||
|
|
</uni-forms-item>
|
|||
|
|
</uni-forms>
|
|||
|
|
</uni-card>
|
|||
|
|
<uni-card v-else :title="'车辆编号：'+workOrdrInfo.bikeCode">
|
|||
|
|
<template v-slot:title>
|
|||
|
|
<view class="flex justify-between cardtitle">
|
|||
|
|
<view class="flex align-center ">
|
|||
|
|
<view class="cardtitleri">
|
|||
|
|
{{'车辆编号：'+workOrdrInfo.bikeCode}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view style="margin-left: 10px;">
|
|||
|
|
<view class="cu-tag radius line-green"
|
|||
|
|
style="background-color:rgba(203,240,204,0.4);">{{workOrdrInfo.handleState}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<view class="flex justify-between cardtitle">
|
|||
|
|
<view class="bike-list">
|
|||
|
|
<view class="hdtitle">
|
|||
|
|
换电前
|
|||
|
|
</view>
|
|||
|
|
<view class="flex paddingtopbottom5">
|
|||
|
|
<view class="carbhtitle">
|
|||
|
|
电量
|
|||
|
|
</view>
|
|||
|
|
<view class="hd_dianliang">
|
|||
|
|
1%
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex paddingtopbottom5">
|
|||
|
|
<view class="carbhtitle">
|
|||
|
|
坐标
|
|||
|
|
</view>
|
|||
|
|
<view class="hd_zuobiao">
|
|||
|
|
103.96,30.68
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="hd_shijian">
|
|||
|
|
2025-04-07 14:28:29
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bike-list">
|
|||
|
|
<view class="hdtitle">
|
|||
|
|
换电后
|
|||
|
|
</view>
|
|||
|
|
<view class="flex paddingtopbottom5">
|
|||
|
|
<view class="carbhtitle">
|
|||
|
|
电量
|
|||
|
|
</view>
|
|||
|
|
<view class="hd_dianliang">
|
|||
|
|
0%
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex paddingtopbottom5">
|
|||
|
|
<view class="carbhtitle">
|
|||
|
|
坐标
|
|||
|
|
</view>
|
|||
|
|
<view class="hd_zuobiao">
|
|||
|
|
-
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="hd_shijian">
|
|||
|
|
-
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-card>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
reactive,
|
|||
|
|
ref,
|
|||
|
|
onMounted,
|
|||
|
|
} from 'vue';
|
|||
|
|
import * as api from '@/utils/api.js';
|
|||
|
|
import config from '../../../utils/config';
|
|||
|
|
import {
|
|||
|
|
onLoad
|
|||
|
|
} from '@dcloudio/uni-app';
|
|||
|
|
const ebikeInfo = ref({});
|
|||
|
|
const userInfo = ref(null);
|
|||
|
|
const scrollHeight = ref(0);
|
|||
|
|
const tabIndex = ref(0)
|
|||
|
|
const changeList = ref([]);
|
|||
|
|
const workOrdrInfo = ref({})
|
|||
|
|
const orderId = ref("");
|
|||
|
|
const orderType = ref("");
|
|||
|
|
const sendTabItem = (data) => {
|
|||
|
|
let index = data['id'];
|
|||
|
|
if (tabIndex.value == index) return;
|
|||
|
|
tabIndex.value = index;
|
|||
|
|
|
|||
|
|
switch (index) {
|
|||
|
|
case 0:
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onLoad((options) => {
|
|||
|
|
userInfo.value = uni.getStorageSync('userInfo');
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
const screenHeight = systemInfo.screenHeight;
|
|||
|
|
const statusBarHeight = systemInfo.statusBarHeight;
|
|||
|
|
scrollHeight.value = screenHeight - statusBarHeight - 158;
|
|||
|
|
if (options.orderId) {
|
|||
|
|
orderId.value = options.orderId;
|
|||
|
|
}
|
|||
|
|
if (options.orderType) {
|
|||
|
|
orderType.value = options.orderType;
|
|||
|
|
switch (options.orderType) {
|
|||
|
|
case "维修":
|
|||
|
|
changeList.value = [{
|
|||
|
|
id: 0,
|
|||
|
|
title: '工单信息'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '处理结果'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
break
|
|||
|
|
case "换电":
|
|||
|
|
changeList.value = [{
|
|||
|
|
id: 0,
|
|||
|
|
title: '工单信息'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '车辆列表'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
break
|
|||
|
|
case "调度":
|
|||
|
|
changeList.value = [{
|
|||
|
|
id: 0,
|
|||
|
|
title: '工单信息'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '车辆列表'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
break
|
|||
|
|
default:
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
api.callEbikeInfo("getWorkOrderInfo?orderId=" + orderId.value, {}, "get").then((res) => {
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
workOrdrInfo.value = res.data;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.container {
|
|||
|
|
padding: 0px 0px;
|
|||
|
|
background-color: #f3f4f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cardtitleri {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #3a3a3a;
|
|||
|
|
padding: 5px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
margin-bottom: 5px !important
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bike-list {
|
|||
|
|
width: 48%;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
padding: 8px 15px;
|
|||
|
|
border-radius: 9px;
|
|||
|
|
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-forms-item__content {
|
|||
|
|
position: relative;
|
|||
|
|
font-size: 14px;
|
|||
|
|
flex: 1;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
flex-direction: row;
|
|||
|
|
line-height: 36px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-card {
|
|||
|
|
border-radius: 15px !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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.deepBlackBoldText {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dashed-divider {
|
|||
|
|
height: 1px;
|
|||
|
|
border-top: 1px dashed #ddd;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cardtitle {
|
|||
|
|
margin: 5px 0px;
|
|||
|
|
padding: 5px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hdtitle {
|
|||
|
|
color: rgb(166, 166, 166);
|
|||
|
|
font-size: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hd_dianliang {
|
|||
|
|
|
|||
|
|
margin-left: 10px;
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hd_zuobiao {
|
|||
|
|
|
|||
|
|
margin-left: 10px;
|
|||
|
|
color: rgb(0, 121, 255);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.carbhtitle {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: rgb(140, 140, 140)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hd_shijian {
|
|||
|
|
border-top: solid 1px #e7e4e4;
|
|||
|
|
padding-top: 5px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
width: 134px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: rgb(141, 141, 141);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.paddingtopbottom5 {
|
|||
|
|
padding: 5px 0px;
|
|||
|
|
}
|
|||
|
|
</style>
|