<template>
|
<view class="container">
|
<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
|
<block slot="backText">返回</block>
|
<block slot="content">我的发起</block>
|
</cu-custom>
|
|
<view class="list-container">
|
<!-- 列表项 -->
|
<view class="andon-item" v-for="(item, index) in mockBillList" :key="index">
|
<!-- 主信息与操作区容器 -->
|
<view class="item-content">
|
<!-- 左侧信息区 -->
|
<view class="info-section">
|
<!-- 顶部核心信息 -->
|
<view class="item-header">
|
<text class="type-value">{{ item.buttonName }}</text>
|
<text class="status-tag" :style="{ backgroundColor: statusColorMap[item.orderStatus] }">
|
{{ statusMap[item.orderStatus] || '未知' }}
|
</text>
|
</view>
|
|
<!-- 中间信息卡片 -->
|
<view class="info-card">
|
<view class="info-row">
|
<view class="info-col">
|
<text class="label">工厂：</text>
|
<text class="value">{{ item.parentFactoryName || '-' }}</text>
|
</view>
|
<view class="info-col">
|
<text class="label">产线：</text>
|
<text class="value">{{ item.factoryName || '-' }}</text>
|
</view>
|
</view>
|
<view class="info-row">
|
<view class="info-col">
|
<text class="label">发起人：</text>
|
<text class="value">{{ item.operatorName}}</text>
|
</view>
|
<view class="info-col">
|
<text class="label">响应时长：</text>
|
<text class="value">{{item.upgradeResponseDuration || '-' }} 分钟</text>
|
</view>
|
</view>
|
<view class="info-row">
|
<view class="info-col">
|
<text class="label">响应人：</text>
|
<text class="value">{{ item.responder}}</text>
|
</view>
|
<view class="info-col">
|
<text class="label">处理人：</text>
|
<text class="value">{{item.processor || '-' }} 分钟</text>
|
</view>
|
</view>
|
</view>
|
|
|
|
|
<!-- 新增操作行 -->
|
<view class="action-row">
|
<text class="action-label">操作：</text>
|
<button class="respond-btn" :class="{ disabled: !canRespond(item.orderStatus) }"
|
@click="handleRespond(item)" :disabled="!canRespond(item.orderStatus)">
|
响应
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 空状态 -->
|
<view v-if="mockBillList.length === 0" class="empty-state">
|
<image src="/static/icon/empty_andon.png" class="empty-img" mode="widthFix"></image>
|
<text class="empty-text">暂无发起的安灯记录</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
mockBillList: [],
|
NavBarColor: this.NavBarColor || '#ffffff',
|
url: {
|
button: "/andonbuttonconfig/andonButtonConfig/queryUserAndonCallList",
|
respond: "/andonorder/andonOrder/AndonRespond"
|
},
|
currentLineId: '',
|
statusMap: {
|
'1': '待响应',
|
'2': '待处理',
|
'3': '已完成'
|
|
},
|
statusColorMap: {
|
'1': '#ff5252', // 待响应-红色
|
'2': '#ff9800', // 已响应-橙色
|
'3': '#4caf50', // 已处理-绿色
|
}
|
};
|
},
|
methods: {
|
// 获取工单列表数据
|
getAndonButtonList() {
|
this.$http
|
.get(this.url.button, {
|
params: {
|
factoryId: this.currentLineId,
|
orderStatus:"1"
|
}
|
})
|
.then((res) => {
|
if (res.data.success) {
|
this.mockBillList = res.data.result || [];
|
// 按时间倒序排序（假设存在andonTime字段）
|
this.mockBillList.sort((a, b) => new Date(b.andonTime) - new Date(a.andonTime));
|
} else {
|
uni.showToast({
|
title: "数据加载失败",
|
icon: "none"
|
});
|
}
|
})
|
.catch(() => {
|
uni.showToast({
|
title: "网络错误，无法加载",
|
icon: "none"
|
});
|
});
|
},
|
|
// 判断是否可响应（仅待响应状态可点击）
|
canRespond(status) {
|
return status === '1'; // 状态1为待响应
|
},
|
|
// 处理响应逻辑
|
handleRespond(item) {
|
// 模拟网络请求
|
this.$http.get(this.url.respond, {
|
params: {
|
id: item.id
|
}
|
|
}).then(res => {
|
if (res.data.success) {
|
uni.showToast({
|
title: "响应成功",
|
icon: "none",
|
duration: 1500
|
});
|
// 延迟刷新列表，确保提示可见
|
setTimeout(() => {
|
this.getAndonButtonList();
|
}, 500);
|
} else {
|
uni.showToast({
|
title: res.data.message || "响应失败",
|
icon: "none"
|
});
|
}
|
}).catch(() => {
|
uni.showToast({
|
title: "网络错误，响应失败",
|
icon: "none"
|
});
|
});
|
}
|
},
|
onLoad(options) {
|
// 接收页面参数
|
this.currentLineId = options.currentLineId || '';
|
// 加载数据
|
this.getAndonButtonList();
|
}
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.list-container {
|
padding: 20rpx;
|
}
|
|
/* 列表项样式 */
|
.andon-item {
|
background-color: #ffffff;
|
border-radius: 12rpx;
|
padding: 24rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
}
|
|
/* 内容与操作区容器 */
|
.item-content {
|
display: flex;
|
align-items: flex-start;
|
/* 顶部对齐 */
|
gap: 16rpx;
|
}
|
|
/* 左侧信息区 */
|
.info-section {
|
flex: 1;
|
min-width: 0;
|
/* 解决flex子元素溢出问题 */
|
}
|
|
/* 顶部核心信息区 */
|
.item-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 24rpx;
|
/* 增大与下方区域的间距 */
|
padding-bottom: 16rpx;
|
border-bottom: 1rpx solid #f1f1f1;
|
}
|
|
.type-value {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: #333333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
/* 状态标签样式 */
|
.status-tag {
|
font-size: 24rpx;
|
padding: 6rpx 16rpx;
|
border-radius: 20rpx;
|
color: #ffffff;
|
font-weight: 500;
|
line-height: 1;
|
}
|
|
/* 中间信息卡片 */
|
.info-card {
|
background-color: #79f4b5;
|
border-radius: 8rpx;
|
padding: 16rpx;
|
margin-bottom: 24rpx;
|
/* 增大与下方区域的间距 */
|
}
|
|
.info-row {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 12rpx;
|
}
|
|
.info-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.info-col {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
}
|
|
.info-col .label {
|
font-size: 24rpx;
|
color: #666666;
|
width: 120rpx;
|
}
|
|
.info-col .value {
|
font-size: 26rpx;
|
color: #333333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
/* 响应人信息区 */
|
.responder-group {
|
display: flex;
|
align-items: center;
|
margin-bottom: 24rpx;
|
/* 增大与下方操作行的间距 */
|
}
|
|
.responder-title {
|
font-size: 26rpx;
|
color: #666666;
|
margin-right: 8rpx;
|
}
|
|
.responder-name {
|
font-size: 26rpx;
|
color: #333333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
/* 新增操作行 */
|
.action-row {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
/* 按钮靠右 */
|
}
|
|
.action-label {
|
font-size: 26rpx;
|
color: #666666;
|
margin-right: 16rpx;
|
/* 增大与按钮的间距 */
|
}
|
|
/* 响应按钮样式 */
|
.respond-btn {
|
background-color: #007aff;
|
color: #ffffff;
|
border-radius: 8rpx;
|
padding: 10rpx 24rpx;
|
font-size: 26rpx;
|
line-height: 1;
|
border: none;
|
}
|
|
/* 禁用状态按钮 */
|
.respond-btn.disabled {
|
background-color: #e5e9f2;
|
color: #c9cdD4;
|
}
|
|
/* 按钮点击反馈 */
|
.respond-btn:not(.disabled):active {
|
background-color: #0051aa;
|
}
|
|
/* 空状态样式 */
|
.empty-state {
|
text-align: center;
|
padding: 150rpx 0;
|
color: #999999;
|
}
|
|
.empty-img {
|
width: 160rpx;
|
height: 160rpx;
|
margin-bottom: 30rpx;
|
opacity: 0.5;
|
}
|
|
.empty-text {
|
font-size: 28rpx;
|
}
|
</style>
|
