0930
This commit is contained in:
parent
3621219f2a
commit
8eb78479b8
169
components/categoryList/CategoryList.vue
Normal file
169
components/categoryList/CategoryList.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="list-container">
|
||||
<!-- 救援司机列表 -->
|
||||
<view v-if="type === 'driver'" class="table-wrapper">
|
||||
<view class="table-header">
|
||||
<text class="col-driver">司机</text>
|
||||
<text class="col-num">救援数量(次)</text>
|
||||
<text class="col-distance">公里数(km)</text>
|
||||
<text class="col-money">金额(元)</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, index) in list" :key="index">
|
||||
<view class="col-driver">
|
||||
<!-- <image :src="item.avatar" class="avatar" /> -->
|
||||
<text>{{ item.driverName }}</text>
|
||||
</view>
|
||||
<text class="col-num">{{ item.rescueNum }}</text>
|
||||
<text class="col-distance">{{ item.mileage > 0 ? item.mileage : 0 }}</text>
|
||||
<text class="col-money">{{ item.money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 救援车辆列表 -->
|
||||
<view v-if="type === 'vehicle'" class="table-wrapper">
|
||||
<view class="table-header">
|
||||
<text class="col-driver">车牌号</text>
|
||||
<text class="col-num">救援数量(次)</text>
|
||||
<text class="col-distance">公里数(km)</text>
|
||||
<text class="col-money">金额(元)</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, index) in list" :key="index">
|
||||
<view class="col-driver">
|
||||
<!-- <image :src="item.avatar" class="avatar" /> -->
|
||||
<text>{{ item.driverCarNum }}</text>
|
||||
</view>
|
||||
<text class="col-num">{{ item.rescueNum }}</text>
|
||||
<text class="col-distance">{{ item.mileage > 0 ? item.mileage : 0 }}</text>
|
||||
<text class="col-money">{{ item.money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 调度列表 -->
|
||||
<view v-if="type === 'dispatch'" class="table-wrapper">
|
||||
<view class="table-header">
|
||||
<text class="disp-name">调度</text>
|
||||
<text class="disp-money">创建工单</text>
|
||||
<text class="disp-num">出发现场</text>
|
||||
<text class="disp-distance">转维修</text>
|
||||
<text class="disp-money">完成</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, index) in list" :key="index">
|
||||
<view class="disp-name">
|
||||
<!-- <image :src="item.avatar" class="avatar" /> -->
|
||||
<text>{{ item.driverName }}</text>
|
||||
</view>
|
||||
<text class="disp-money">{{ item.createRescueNum }}</text>
|
||||
<text class="disp-num">{{ item.toSceneNum }}</text>
|
||||
<text class="disp-distance">{{ item.toRepairNum }}</text>
|
||||
<text class="disp-money">{{ item.confirmCompleteNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CategoryList",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "driver",
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list-container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* 通用表格样式 */
|
||||
.table-wrapper {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50rpx 0;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: #f0f3f8;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 列宽分配 */
|
||||
/* .col-driver {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
} */
|
||||
|
||||
.col-driver,
|
||||
.col-num,
|
||||
.col-distance,
|
||||
.col-money {
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 其他类型列表样式 */
|
||||
.vehicle-list,
|
||||
.dispatch-list {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* .disp-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
} */
|
||||
|
||||
.disp-name,
|
||||
.disp-num,
|
||||
.disp-distance,
|
||||
.disp-money {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@ -256,6 +256,12 @@
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/classificationInfo",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
/* ,
|
||||
{
|
||||
|
||||
@ -379,6 +379,18 @@
|
||||
})
|
||||
},
|
||||
goselect() {
|
||||
console.log('执行去救援', this.sfindex);
|
||||
if (this.sfindex == 'police') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/rescue/trafficPolice'
|
||||
})
|
||||
} else {
|
||||
uni.reLaunch({
|
||||
url: '/pages/my/my'
|
||||
})
|
||||
}
|
||||
},
|
||||
/* goselect() {
|
||||
console.log('执行去救援', this.sfindex);
|
||||
// pages/rescue/trafficPolice
|
||||
if (this.sfindex == 'police') {
|
||||
@ -395,10 +407,8 @@
|
||||
url: '/pages/my/my'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
}, */
|
||||
// 验证码方法
|
||||
sendVerificationCode() {
|
||||
let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
235
pages/my/classificationInfo.vue
Normal file
235
pages/my/classificationInfo.vue
Normal file
@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<view class="statistics-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<text class="back-icon" @click="goBack">←</text>
|
||||
<view class="title-tabs">
|
||||
<text :class="['tab-item', activeTab === 'order' ? 'active' : '']" @click="switchTab('order')">
|
||||
工单统计
|
||||
</text>
|
||||
<text :class="['tab-item', activeTab === 'category' ? 'active' : '']" @click="switchTab('category')">
|
||||
分类统计
|
||||
</text>
|
||||
</view>
|
||||
<text class="filter-btn" @click="openFilter">筛选 ⏷</text>
|
||||
</view>
|
||||
|
||||
<!-- 分类统计 -->
|
||||
<view v-if="activeTab === 'category'">
|
||||
<!-- 二级Tab -->
|
||||
<view class="sub-tabs">
|
||||
<text v-for="(tab, index) in subTabs" :key="index"
|
||||
:class="['sub-tab-item', activeSubTab === tab.value ? 'active' : '']"
|
||||
@click="switchSubTab(tab.value)">
|
||||
{{ tab.label }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 列表部分 -->
|
||||
<view v-if="activeSubTab === 'driver'" class="list-container">
|
||||
<view class="table-header">
|
||||
<text class="col-rank">排名</text>
|
||||
<text class="col-driver">司机</text>
|
||||
<text class="col-num">救援数量(辆)</text>
|
||||
<text class="col-distance">公里数(km)</text>
|
||||
<text class="col-money">金额(万)</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, index) in driverList" :key="index">
|
||||
<text class="col-rank">{{ index + 1 }}</text>
|
||||
<view class="col-driver">
|
||||
<image :src="item.avatar" class="avatar" />
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<text class="col-num">{{ item.count }}</text>
|
||||
<text class="col-distance">{{ item.distance }}</text>
|
||||
<text class="col-money">{{ item.money }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="activeSubTab === 'vehicle'" class="list-container">
|
||||
<text>救援车辆列表（待实现）</text>
|
||||
</view>
|
||||
|
||||
<view v-if="activeSubTab === 'dispatch'" class="list-container">
|
||||
<text>调度列表（待实现）</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "StatisticsInfo",
|
||||
data() {
|
||||
return {
|
||||
activeTab: "category", // 默认进入分类统计
|
||||
activeSubTab: "driver", // 默认进入救援司机
|
||||
subTabs: [{
|
||||
label: "救援司机",
|
||||
value: "driver"
|
||||
},
|
||||
{
|
||||
label: "救援车辆",
|
||||
value: "vehicle"
|
||||
},
|
||||
{
|
||||
label: "调度",
|
||||
value: "dispatch"
|
||||
},
|
||||
],
|
||||
driverList: [{
|
||||
name: "张三三",
|
||||
count: 43,
|
||||
distance: 4342.1,
|
||||
money: 42.12,
|
||||
avatar: "/static/avatar1.png",
|
||||
},
|
||||
{
|
||||
name: "何米有",
|
||||
count: 23,
|
||||
distance: 1342.5,
|
||||
money: 12.35,
|
||||
avatar: "/static/avatar2.png",
|
||||
},
|
||||
{
|
||||
name: "晨虹剑",
|
||||
count: 11,
|
||||
distance: 980.3,
|
||||
money: 11.21,
|
||||
avatar: "/static/avatar3.png",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.activeTab = tab;
|
||||
},
|
||||
switchSubTab(tab) {
|
||||
this.activeSubTab = tab;
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
openFilter() {
|
||||
uni.showToast({
|
||||
title: "筛选功能待实现",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.statistics-container {
|
||||
background: #f6f8fc;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(180deg, #3a8dff, #579dff);
|
||||
color: #fff;
|
||||
padding: 10px 16px;
|
||||
height: 56px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title-tabs {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 16px;
|
||||
margin: 0 15px;
|
||||
padding-bottom: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
font-weight: bold;
|
||||
border-bottom: 3px solid #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 二级Tab */
|
||||
.sub-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.sub-tab-item {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.sub-tab-item.active {
|
||||
font-weight: bold;
|
||||
color: #3a8dff;
|
||||
border-bottom: 2px solid #3a8dff;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.list-container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.table-header,
|
||||
.table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
font-weight: bold;
|
||||
background: #f0f3f8;
|
||||
}
|
||||
|
||||
.col-rank {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-driver {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.col-num,
|
||||
.col-distance,
|
||||
.col-money {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -526,6 +526,55 @@
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-popup :show="orderCompleteShow" mode="center" :round="10">
|
||||
<view class="popup-box">
|
||||
<view class="p-title">描述</view>
|
||||
<!-- <view class="huinput" @click="gettype"> -->
|
||||
<view class="huinput">
|
||||
<text>节点：</text>
|
||||
<text class="tshe">{{ dictLabel }}</text>
|
||||
</view>
|
||||
<view class="huinput">
|
||||
<text>救援结束车辆里程数: </text>
|
||||
<u--textarea v-model="detailsData.endScale" placeholder="请输入车辆里程数" border="bottom"
|
||||
autoHeight></u--textarea>
|
||||
</view>
|
||||
<view class="huinput">
|
||||
<text>故障车车牌号: </text>
|
||||
<u--textarea v-model="detailsData.licenseNum" placeholder="请输入故障车车牌号" border="bottom"
|
||||
autoHeight></u--textarea>
|
||||
</view>
|
||||
<view class="huinput">
|
||||
<text>备注信息：</text>
|
||||
<u--textarea v-model="remark" placeholder="请输入备注" border="bottom" autoHeight></u--textarea>
|
||||
</view>
|
||||
|
||||
<!-- 上传状态提示 -->
|
||||
<view class="upload-tips" v-if="uploadingRecord">
|
||||
<u-loading-icon size="20" color="#0D2E8D"></u-loading-icon>
|
||||
<text>图片上传中，请稍候...</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="p-title">现场图片</view>
|
||||
<view class="huinput">
|
||||
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||||
:maxCount="5" :disabled="uploadingRecord"></u-upload>
|
||||
</view>
|
||||
|
||||
<view class="button-group">
|
||||
<view class="cancel-button" @click="cancelOrderComplete" :disabled="uploadingRecord">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
<view class="confirm-button" @click="getdaoda()" :disabled="isSubmitting || uploadingRecord">
|
||||
<!-- <text>确认</text> -->
|
||||
<text>{{ isSubmitting ? '处理中...' : '确认' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-popup :show="toRepairShow" mode="center" :round="10" @close="closeRepairPopup">
|
||||
<view class="popup-box repair-popup">
|
||||
<view class="p-title title-content-s">转维修信息</view>
|
||||
@ -1271,6 +1320,8 @@
|
||||
currentSupplementItem: null,
|
||||
// 救援开始弹框显示状态
|
||||
acceptOrderShow: false,
|
||||
// 确认订单完成显示弹框
|
||||
orderCompleteShow: false,
|
||||
startScale: '',
|
||||
uploadingRecord: false,
|
||||
|
||||
@ -1813,16 +1864,13 @@
|
||||
}
|
||||
this.rescueId = id;
|
||||
if (this.recordSteps.length > 0) {
|
||||
console.log('this.recordSteps', this.recordSteps)
|
||||
console.log('this.currentStepIndex', this.currentStepIndex)
|
||||
console.log('this.currentStepIndex - 1', this.currentStepIndex - 1)
|
||||
this.dictValue = this.recordSteps[this.currentStepIndex - 1].value;
|
||||
this.dictLabel = this.recordSteps[this.currentStepIndex - 1].label;
|
||||
console.log('this.dictValue', this.dictValue)
|
||||
console.log('this.dictLabel', this.dictLabel)
|
||||
}
|
||||
if (this.currentStepIndex === 2) {
|
||||
this.acceptOrderShow = true;
|
||||
} else if (this.currentStepIndex === 7) {
|
||||
this.orderCompleteShow = true
|
||||
} else {
|
||||
this.recordShow = true;
|
||||
}
|
||||
@ -1836,6 +1884,15 @@
|
||||
this.ulImages = [];
|
||||
},
|
||||
|
||||
cancelOrderComplete() {
|
||||
this.orderCompleteShow = false;
|
||||
this.remark = ''; // 清空备注
|
||||
this.fileList1 = []; // 清空图片列表
|
||||
this.selectedOption = '';
|
||||
this.ulImages = [];
|
||||
},
|
||||
|
||||
|
||||
deletePic(event) {
|
||||
// 从 fileList 中删除
|
||||
this[`fileList${event.name}`].splice(event.index, 1);
|
||||
@ -2284,6 +2341,8 @@
|
||||
if (this.currentStepIndex == 7) {
|
||||
updateData.rescueEndTime = new Date();
|
||||
updateData.rescueStatus = '4';
|
||||
updateData.endScale = this.detailsData.endScale;
|
||||
updateData.licenseNum = this.detailsData.licenseNum;
|
||||
}
|
||||
|
||||
// 更新下一步显示
|
||||
@ -2304,9 +2363,12 @@
|
||||
|
||||
// 刷新订单详情
|
||||
this.recordShow = false;
|
||||
if (this.currentStepIndex == 7) {
|
||||
this.orderCompleteShow = false;
|
||||
}
|
||||
this.getrescueDetail(this.rescueId);
|
||||
} else {
|
||||
throw new Error(`API返回错误代码: ${res.code}`);
|
||||
throw new Error(`错误代码: ${res.code}`);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
@ -2647,6 +2709,21 @@
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.currentStepIndex === 7 && (!this.detailsData.licenseNum || this.detailsData.licenseNum
|
||||
.trim() === '')) {
|
||||
uni.showToast({
|
||||
title: '请填写故障车车牌号',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.currentStepIndex === 7 && !this.detailsData.endScale) {
|
||||
uni.showToast({
|
||||
title: '请填写车辆里程',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.ulImages.length === 0 && this.currentStepIndex != 6) {
|
||||
uni.showToast({
|
||||
title: '请上传图片',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user