更新
This commit is contained in:
xuyuncong
parent
3420d73a6b
commit
4cf02bd1b7
@ -23,6 +23,16 @@
|
||||
<text class="rightText">已派工</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="un_finished_projects cont_title" v-if="order.nodeNames && order.nodeNames.length > 0">
|
||||
<view class="project-left">
|
||||
<view class="c_t_title">
|
||||
未完成项目：
|
||||
</view>
|
||||
<view class="project c_t_size" v-for="(item,index) in order.nodeNames">
|
||||
{{index + 1}}、{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="k_" v-if="order.ifShow">
|
||||
<view class="db_k">
|
||||
<view class="">车辆状态：<span :style="{ color: getFlagColor(order.flag) }" class="flag">
|
||||
@ -544,6 +554,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.un_finished_projects {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.project {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.c_t_title {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
|
||||
@ -10,34 +10,40 @@
|
||||
|
||||
<!-- 进度步骤展示 -->
|
||||
<view class="progress-container">
|
||||
<!-- 步骤线 - 背景线 -->
|
||||
<view class="progress-line-bg"></view>
|
||||
|
||||
<!-- 步骤线 - 已完成部分 -->
|
||||
<view class="progress-line-active" :style="{ width: progressPercentage + '%' }"></view>
|
||||
|
||||
<!-- 所有步骤点 -->
|
||||
<view class="steps-wrapper" :style="{ width: 'calc(100% - ' + (stepSize / 2) + 'px)' }">
|
||||
<view v-for="(step, index) in steps" :key="index" class="step-item"
|
||||
:style="{ left: (index * (100 / (steps.length - 1))) + '%' }">
|
||||
<view class="steps-wrapper">
|
||||
<view v-for="(step, index) in steps" :key="index" class="step-item">
|
||||
<!-- 步骤点 -->
|
||||
<view class="step-dot" :class="{
|
||||
'step-dot-completed': step.status === 'completed',
|
||||
'step-dot-current': step.status === 'current',
|
||||
'step-dot-pending': step.status === 'pending'
|
||||
}">
|
||||
<!-- 完成的步骤显示勾选 -->
|
||||
<text v-if="step.status === 'completed'">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||
<uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
|
||||
</text>
|
||||
<!-- 未完成的步骤显示X -->
|
||||
<text v-else>
|
||||
<uni-icons type="closeempty" size="18" color="#9ca3af"></uni-icons>
|
||||
</text>
|
||||
<text v-else>{{ index + 1 }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 步骤名称 -->
|
||||
<view class="step-name">{{ step.name }}</view>
|
||||
<view class="step-name" @click="showTooltip(step.name)">
|
||||
{{ step.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tooltip 弹出框 -->
|
||||
<view v-if="tooltipVisible" class="tooltip-mask" @click="closeTooltip">
|
||||
<view class="tooltip" @click.stop>
|
||||
<text>{{ tooltipText }}</text>
|
||||
<view class="tooltip-close" @click="closeTooltip">×</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -48,7 +54,7 @@
|
||||
},
|
||||
props: {
|
||||
// 步骤数据，格式: [{name: '步骤1', status: 'completed'}, ...]
|
||||
// status可选值: completed(已完成), current(当前), pending(未完成)
|
||||
// status可选值: completed(已完成), pending(未完成)
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => [{
|
||||
@ -57,27 +63,24 @@
|
||||
},
|
||||
{
|
||||
name: '性能测试',
|
||||
status: 'current'
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
name: '安全检测',
|
||||
status: 'current'
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
name: '最终确认',
|
||||
status: 'completed'
|
||||
},
|
||||
{
|
||||
name: '最终确认',
|
||||
status: 'current'
|
||||
},
|
||||
]
|
||||
},
|
||||
// 步骤点大小
|
||||
stepSize: {
|
||||
type: Number,
|
||||
default: 36
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tooltipVisible: false, // 控制 Tooltip 显示
|
||||
tooltipText: '', // 显示的完整名称
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 计算总步骤数
|
||||
@ -87,22 +90,17 @@
|
||||
// 计算已完成步骤数
|
||||
completedCount() {
|
||||
return this.steps.filter(step => step.status === 'completed').length;
|
||||
},
|
||||
// 计算进度百分比
|
||||
progressPercentage() {
|
||||
// 找到最后一个已完成步骤的索引
|
||||
let lastCompletedIndex = -1;
|
||||
this.steps.forEach((step, index) => {
|
||||
if (step.status === 'completed') {
|
||||
lastCompletedIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
// 如果没有已完成的步骤，进度为0%
|
||||
if (lastCompletedIndex === -1) return 0;
|
||||
|
||||
// 计算进度百分比
|
||||
return (lastCompletedIndex / (this.steps.length - 1)) * 100;
|
||||
},
|
||||
methods: {
|
||||
// 显示 Tooltip
|
||||
showTooltip(name) {
|
||||
this.tooltipText = name;
|
||||
this.tooltipVisible = true;
|
||||
},
|
||||
// 关闭 Tooltip
|
||||
closeTooltip() {
|
||||
this.tooltipVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -114,7 +112,6 @@
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
@ -137,56 +134,35 @@
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 进度线 - 背景 */
|
||||
.progress-line-bg {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: #e5e7eb;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 进度线 - 已完成部分 */
|
||||
.progress-line-active {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background-color: #3b82f6;
|
||||
z-index: 2;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.steps-wrapper {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
/* 每行显示3个步骤 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.step-dot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
/* 增大宽度 */
|
||||
height: 32px;
|
||||
/* 增大高度 */
|
||||
border-radius: 8px;
|
||||
/* 增大圆角 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -197,14 +173,6 @@
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 当前步骤样式 */
|
||||
.step-dot-current {
|
||||
background-color: #36d399;
|
||||
color: #ffffff;
|
||||
border: 2px solid #36d399;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* 未完成步骤样式 */
|
||||
.step-dot-pending {
|
||||
background-color: #ffffff;
|
||||
@ -215,7 +183,44 @@
|
||||
.step-name {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
white-space: nowrap;
|
||||
padding: 0 4px;
|
||||
white-space: normal;
|
||||
/* 允许名称换行 */
|
||||
word-wrap: break-word;
|
||||
/* 强制长单词换行 */
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Tooltip 遮罩层 */
|
||||
.tooltip-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Tooltip 样式 */
|
||||
.tooltip {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
z-index: 1010;
|
||||
}
|
||||
|
||||
.tooltip-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
@ -1145,7 +1145,7 @@
|
||||
|
||||
.topt_ {
|
||||
width: 100%;
|
||||
height: 408rpx;
|
||||
// height: 408rpx;
|
||||
background: linear-gradient(180deg, #2D3BFF 0%, #1463FF 100%);
|
||||
border-radius: 0rpx 0rpx 12rpx 12rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -735,7 +735,15 @@
|
||||
createUniqueCodeByHead(head = '') {
|
||||
const min = 100; // 最小值
|
||||
const max = 999; // 最大值
|
||||
return head.toString() + Date.now().toString() + Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
|
||||
// 获取当前日期并格式化为年月日字符串（例如：20231225）
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const dateStr = `${year}${month}${day}`;
|
||||
|
||||
return head.toString() + dateStr + Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -305,6 +305,28 @@
|
||||
console.log(this.selectedProj, "selectedProj")
|
||||
console.log(this.ticketId, "this.ticketId")
|
||||
},
|
||||
/**
|
||||
* 查询未完成的工单
|
||||
* @param {Array} ids 工单id集合
|
||||
*/
|
||||
async selectUnfinishedProject(ids) {
|
||||
try {
|
||||
const response = await request({
|
||||
url: '/admin-api/repair/tickets/getProjectByTicketIds',
|
||||
params: {
|
||||
ticketIds: ids.join(',') // 将数组转换为逗号分隔的字符串
|
||||
},
|
||||
method: 'GET'
|
||||
});
|
||||
|
||||
// 返回 response.data
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('查询未完成的工单失败:', error);
|
||||
// 处理错误，返回合适的默认值或重新抛出错误
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
// 子表信息预处理
|
||||
formatItem(list) {
|
||||
if (!(list && list.length > 0)) {
|
||||
@ -592,7 +614,7 @@
|
||||
url: '/admin-api/repair/tickets/pageType',
|
||||
method: 'get',
|
||||
params: paramsObj
|
||||
}).then((res) => {
|
||||
}).then(async (res) => {
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
let thisPageRecords = []
|
||||
@ -625,6 +647,23 @@
|
||||
} else {
|
||||
this.orderList = thisPageRecords
|
||||
}
|
||||
if (this.activeKey == 0) {
|
||||
// 过滤出没有获取子项目的id集合
|
||||
const ids = this.orderList.filter(item => !item.nodeNames).map(item => item.id)
|
||||
|
||||
const unFinishedProjects = await this.selectUnfinishedProject(ids)
|
||||
this.orderList.forEach(item => {
|
||||
if (item.nodeNames) {
|
||||
return
|
||||
}
|
||||
const nodeNames = unFinishedProjects.filter(project => project
|
||||
.ticketId ==
|
||||
item
|
||||
.id).map(data => data.itemName)
|
||||
this.$set(item, 'nodeNames', nodeNames)
|
||||
})
|
||||
}
|
||||
// 调用查询接口
|
||||
//将获取的总条数赋值
|
||||
this.total = res.data.total
|
||||
this.isTriggered = false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user