<template>
|
<view class="andon-call-page">
|
<!-- 头部区域 -->
|
<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="productionTask">
|
<block slot="backText">返回</block>
|
<block slot="content">安灯呼叫</block>
|
</cu-custom>
|
|
<!-- 用户信息区域 -->
|
<view class="user-info">
|
<image class="avatar" src="/static/avatar_boy.png"></image>
|
<view class="user-detail">
|
<view class="username">{{username}}</view>
|
<view class="user-desc">所属产线：{{currentLineName || '未选择产线' }}</view>
|
</view>
|
</view>
|
|
<!-- 统计入口区域 -->
|
<view class="stats-entry">
|
<view class="entry-item" @click="goToMyInitiated">
|
<view class="icon-container">
|
<image class="avatar-icon" src="/static/icon/kaoqin.png"></image>
|
</view>
|
<text>我发起的</text>
|
</view>
|
<view class="entry-item" @click="goToResponded">
|
<view class="icon-container">
|
<image class="avatar-icon" src="/static/icon/tongzhi.png"></image>
|
</view>
|
<text>已响应</text>
|
</view>
|
<view class="entry-item" @click="goToProcessed">
|
<view class="icon-container">
|
<image class="avatar-icon" src="/static/icon/liucheng.png"></image>
|
</view>
|
<text>已处理</text>
|
</view>
|
</view>
|
|
<view class="content"></view>
|
|
<view class="call-type-title">安灯按钮</view>
|
|
<!-- 安灯按钮区域 -->
|
<view class="call-type-grid">
|
<view class="call-type-item" :class="{ 'blink': item.blinkingFlag > 0 }" :style="getButtonColor(item)"
|
@click="toggleBlink(item)" v-for="(item, index) in buttonList" :key="index">
|
<text>{{ item.buttonName }}</text>
|
<view class="shine-effect"></view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
import {
|
mapGetters
|
} from "vuex";
|
|
export default {
|
mixins: [MescrollMixin],
|
data() {
|
return {
|
NavBarColor: this.NavBarColor,
|
// 安灯按钮数据
|
buttonList: [],
|
// 按钮颜色映射
|
buttonColorMap: {
|
"设备安灯": {
|
normal: "linear-gradient(145deg, #ff6b6b, #ee5253)",
|
active: "linear-gradient(145deg, #ff3838, #c0392b)"
|
},
|
"工艺安灯": {
|
normal: "linear-gradient(145deg, #feca57, #ff9f43)",
|
active: "linear-gradient(145deg, #ff9800, #e67e22)"
|
},
|
"质量安灯": {
|
normal: "linear-gradient(145deg, #48dbfb, #1dd1a1)",
|
active: "linear-gradient(145deg, #1abc9c, #16a085)"
|
},
|
"人员安灯": {
|
normal: "linear-gradient(145deg, #8e44ad, #9b59b6)",
|
active: "linear-gradient(145deg, #8e44ad, #7d3c98)"
|
},
|
"安防安灯": {
|
normal: "linear-gradient(145deg, #54a0ff, #2e86de)",
|
active: "linear-gradient(145deg, #2980b9, #3498db)"
|
}
|
},
|
url: {
|
sendMessage: 'andonresponseconfig/andonResponseConfig/sendMessage',
|
add: "andonorder/andonOrder/app/add",
|
button: "/andonbuttonconfig/andonButtonConfig/queryUserAndonButtonList"
|
},
|
defaultColor: {
|
normal: "linear-gradient(145deg, #0088ff, #0066cc)",
|
active: "linear-gradient(145deg, #ff4d4d, #cc0000)"
|
}
|
|
};
|
},
|
computed: {
|
...mapGetters(["currentLineName", "username", "currentLineId"]),
|
top() {
|
return this.CustomBar * 2 + 200
|
},
|
style() {
|
var StatusBar = this.StatusBar;
|
var CustomBar = this.CustomBar;
|
return `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
},
|
},
|
created() {
|
this.getAndonButtonList()
|
},
|
methods: {
|
|
getAndonButtonList() {
|
console.log(this.currentLineId)
|
this.$http.get(this.url.button, {
|
|
params: {
|
factoryId: this.currentLineId
|
|
}
|
}).then(res => {
|
//设置列表数据
|
|
if (res.data.success) {
|
console.log(res.data.result)
|
this.buttonList = res.data.result
|
} else {
|
uni.showToast({
|
title: "按钮数据加载失败",
|
icon: "none"
|
});
|
}
|
|
}).catch(() => {
|
//联网失败,
|
uni.showToast({
|
title: "网络错误，无法加载按钮",
|
icon: "none"
|
});
|
})
|
},
|
|
|
|
/**
|
* 切换闪烁状态（0=不闪烁，1=闪烁）
|
*/
|
toggleBlink(item) {
|
this.sendMessage(item);
|
},
|
sendMessage(item) {
|
this.$http.post(this.url.add, {
|
/**产线ID*/
|
factoryId:this.currentLineId,
|
/**安灯类型*/
|
buttonId:item.buttonId,
|
/**安灯人*/
|
operator:uni.getStorageSync("userId"),
|
/**安灯时间*/
|
operateTime:null,
|
/**安灯等级*/
|
andonLevel:null,
|
/**响应人*/
|
responder:null,
|
/**响应时间*/
|
responseTime:null,
|
/**处理人*/
|
processor:null,
|
/**处理完成时间*/
|
processTime:null,
|
/**安灯状态*/
|
orderStatus:'1'
|
})
|
.then(res => {
|
if (res.data.success) {
|
uni.showToast({
|
title: "发送成功",
|
icon: "none"
|
});
|
this.getAndonButtonList()
|
} else {
|
uni.showToast({
|
title: res.data.message,
|
icon: "none"
|
});
|
}
|
})
|
.catch(() => {
|
uni.showToast({
|
title: "网络错误，无法加载按钮",
|
icon: "none"
|
});
|
})
|
},
|
|
/**
|
* 获取按钮颜色（根据int状态判断）
|
*/
|
getButtonColor(item) {
|
const colorConfig = this.buttonColorMap[item.buttonName] || this.defaultColor;
|
// 1=闪烁（使用active色），0=不闪烁（使用normal色）
|
return {
|
background: item.isBlinking === 1 ? colorConfig.active : colorConfig.normal
|
};
|
},
|
|
// 跳转方法
|
goToMyInitiated() {
|
uni.navigateTo({
|
url: '/pages/eam/andon/myInitiated/myInitiated?currentLineId=' + this.currentLineId
|
});
|
},
|
goToResponded() {
|
uni.navigateTo({
|
url: '/pages/eam/andon/andonRespond/andonRespond?currentLineId=' + this.currentLineId
|
});
|
},
|
goToProcessed() {
|
uni.navigateTo({
|
url: '/pages/eam/andon/andonDetail/andonDetail?currentLineId=' + this.currentLineId
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 原有样式保持不变 */
|
.andon-call-page {
|
background-color: #f9f9f9;
|
min-height: 100vh;
|
}
|
|
.user-info {
|
display: flex;
|
padding: 15px;
|
background-color: #fff;
|
border-bottom: 1px solid #eee;
|
margin-bottom: 10px;
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
|
}
|
|
.avatar {
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
margin-right: 10px;
|
border: 3px solid #f0f7ff;
|
box-shadow: 0 3px 8px rgba(0, 122, 255, 0.15);
|
}
|
|
.user-detail {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.username {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 5px;
|
color: #333;
|
}
|
|
.user-desc {
|
font-size: 14px;
|
color: #666;
|
line-height: 1.6;
|
}
|
|
.stats-entry {
|
display: flex;
|
justify-content: space-around;
|
padding: 20px 15px;
|
background-color: #fff;
|
border-bottom: 10px solid #f5f5f5;
|
}
|
|
.entry-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 15px 0;
|
border-radius: 12px;
|
width: 30%;
|
transition: all 0.3s ease;
|
}
|
|
.entry-item:active {
|
transform: scale(0.96);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) inset;
|
}
|
|
.icon-container {
|
width: 60px;
|
height: 60px;
|
border-radius: 16px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: linear-gradient(145deg, #f0f0f0, #ffffff);
|
box-shadow: 5px 5px 10px #e0e0e0, -5px -5px 10px #ffffff;
|
}
|
|
.avatar-icon {
|
width: 32px;
|
height: 32px;
|
}
|
|
.entry-item text {
|
margin-top: 10px;
|
font-size: 14px;
|
color: #333;
|
font-weight: 500;
|
}
|
|
.call-type-title {
|
font-size: 16px;
|
font-weight: bold;
|
padding: 15px;
|
background-color: #fff;
|
margin-top: 10px;
|
border-bottom: 1px solid #eee;
|
color: #333;
|
}
|
|
.call-type-grid {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px;
|
background-color: #fff;
|
}
|
|
.call-type-item {
|
width: calc(50% - 10px);
|
height: 110px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin: 5px;
|
border-radius: 16px;
|
font-size: 18px;
|
font-weight: 600;
|
color: #fff;
|
position: relative;
|
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15),
|
-3px -3px 8px rgba(255, 255, 255, 0.2);
|
transition: all 0.2s ease;
|
overflow: hidden;
|
}
|
|
.shine-effect {
|
position: absolute;
|
top: 0;
|
left: -100%;
|
width: 50%;
|
height: 100%;
|
background: linear-gradient(to right,
|
rgba(255, 255, 255, 0) 0%,
|
rgba(255, 255, 255, 0.2) 50%,
|
rgba(255, 255, 255, 0) 100%);
|
transform: skewX(-25deg);
|
transition: left 0.6s ease;
|
}
|
|
.call-type-item:active .shine-effect,
|
.call-type-item:hover .shine-effect {
|
left: 120%;
|
}
|
|
.call-type-item:active {
|
transform: translateY(2px);
|
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
|
}
|
|
.blink {
|
animation: blinkEffect 0.8s infinite;
|
}
|
|
@keyframes blinkEffect {
|
0% {
|
opacity: 1;
|
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15),
|
-3px -3px 8px rgba(255, 255, 255, 0.2);
|
}
|
|
50% {
|
opacity: 0.6;
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
|
6px 6px 15px rgba(0, 0, 0, 0.2);
|
}
|
|
100% {
|
opacity: 1;
|
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15),
|
-3px -3px 8px rgba(255, 255, 255, 0.2);
|
}
|
}
|
</style>
|
