<template>
|
<uni-base-page :footer="false">
|
<view slot="page">
|
<view v-if="loginInfo.hasLogin" class="main-container">
|
<!-- 教学视频、公司内部宣传图片等 -->
|
<!-- <swiper indicator-dots="true" :autoplay="true" :interval="3000">-->
|
<!-- <swiper-item v-for="(img,key) in imgUrls" :key="key">-->
|
<!-- <image :src="img"/>-->
|
<!-- </swiper-item>-->
|
<!-- </swiper>-->
|
<!-- 通报批评、消息预警、公告、报告 -->
|
<uni-notice-bar :show-icon="true" :scrollable="true" :speed="30" :single="true" :text="msg" />
|
|
<!-- 筛选按钮 -->
|
<view class="filter-btn" @click="toggleFilter">
|
<uni-icons type="funnel-fill" size="20" color="#fff"></uni-icons>
|
<text class="filter-btn-text">筛选</text>
|
<view v-if="selectedDepartmentId || selectedLineId" class="filter-badge"></view>
|
</view>
|
|
<!-- 筛选弹出层 -->
|
<view v-if="showFilter" class="filter-overlay" @click="closeFilter">
|
<view class="filter-panel" @click.stop>
|
<view class="filter-header">
|
<text class="filter-title">筛选条件</text>
|
<view class="close-icon" @click="closeFilter">
|
<uni-icons type="close" size="20" color="#666"></uni-icons>
|
</view>
|
</view>
|
|
<view class="filter-content">
|
<view class="filter-row">
|
<text class="filter-label">车间</text>
|
<picker @change="onDepartmentChange" :value="departmentIndex" :range="departments" range-key="departmentname" class="filter-picker">
|
<view class="picker-text">
|
{{departmentIndex >= 0 ? departments[departmentIndex].departmentname : '请选择车间'}}
|
</view>
|
</picker>
|
</view>
|
|
<view class="filter-row">
|
<text class="filter-label">线体</text>
|
<picker @change="onLineChange" :value="lineIndex" :range="lines" range-key="lineName" :disabled="!selectedDepartmentId" class="filter-picker">
|
<view class="picker-text" :class="{'disabled': !selectedDepartmentId}">
|
{{lineIndex >= 0 ? lines[lineIndex].lineName : selectedDepartmentId ? '请选择线体' : '请先选择车间'}}
|
</view>
|
</picker>
|
</view>
|
</view>
|
|
<view class="filter-footer">
|
<button class="reset-btn" @click="clearFilters">清空</button>
|
<button class="confirm-btn" @click="closeFilter">确定</button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 用户系统菜单模块 -->
|
<view class="example-body">
|
<uni-grid :column="col" :showBorder="false">
|
<uni-grid-item v-for="(item, index) in userMenu" :index="index" :key="index" class="grid-item">
|
<navigator navigateTo class="grid-item-box" hover-class="none" :url="`../${item.path}`" @click="handleMenuClick(item)">
|
<image v-if="item.icoimg" class="imgMenu" :src="`${item.icoimg}`"></image>
|
<image v-else class="imgMenu" src="/static/img/imgMenu/WARBAAHtml.png"></image>
|
<!-- <uni-notice-bar v-if="item.pagE_VIEW.length>6" :speed="30"
|
style="padding:0;margin-bottom:0;font-weight: 900;" textSize="13px"
|
background-color="#ffffff" color="#000000" :scrollable="item.pagE_VIEW.length>6"
|
:single="true" :text="item.pagE_VIEW"/>-->
|
<text class="text"
|
style="text-align: center;padding:5px 0px 5px 0px">{{ item.pagE_VIEW }}</text>
|
</navigator>
|
</uni-grid-item>
|
</uni-grid>
|
</view>
|
</view>
|
<view v-if="!loginInfo.hasLogin">
|
<view class="title">
|
您好 游客。
|
</view>
|
<view class="ul">
|
<view>这是 XXMES 首页。</view>
|
<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
|
</view>
|
</view>
|
</view>
|
</uni-base-page>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loginInfo: this.$loginInfo,
|
color: this.$defaultColor,
|
userMenu: [],
|
imgUrls: [
|
"../../static/img/SN-GG.png",
|
"../../static/img/SN-GG1.png"
|
],
|
col: 4, //菜单列数
|
msg: "宁波广深科技有限公司",
|
updateChecked: false,
|
// 车间和线体筛选相关数据
|
departments: [],
|
departmentIndex: -1,
|
selectedDepartmentId: '',
|
lines: [],
|
lineIndex: -1,
|
selectedLineId: '',
|
showFilter: false // 控制筛选面板显示
|
};
|
},
|
methods: {
|
// 切换筛选面板显示
|
toggleFilter() {
|
this.showFilter = !this.showFilter;
|
},
|
|
// 关闭筛选面板
|
closeFilter() {
|
this.showFilter = false;
|
},
|
|
// 获取车间列表
|
getDepartments() {
|
this.$post({
|
url: "/Base/GetQCDepartments",
|
data: {}
|
}).then(res => {
|
this.departments = res.data || [];
|
// 从缓存中恢复选择
|
const cachedDeptId = uni.getStorageSync('qc_filter_departmentId');
|
if (cachedDeptId && this.departments.length > 0) {
|
const index = this.departments.findIndex(d => d.departmentid == cachedDeptId);
|
if (index >= 0) {
|
this.departmentIndex = index;
|
this.selectedDepartmentId = cachedDeptId;
|
this.getLines();
|
}
|
}
|
}).catch(err => {
|
console.error('获取车间列表失败:', err);
|
});
|
},
|
|
// 获取线体列表（根据车间过滤）
|
getLines() {
|
if (!this.selectedDepartmentId) {
|
this.lines = [];
|
return;
|
}
|
|
this.$post({
|
url: "/Base/GetQCLines",
|
data: {
|
departmentId: this.selectedDepartmentId
|
}
|
}).then(res => {
|
this.lines = res.data || [];
|
// 从缓存中恢复选择
|
const cachedLineId = uni.getStorageSync('qc_filter_lineId');
|
if (cachedLineId && this.lines.length > 0) {
|
const index = this.lines.findIndex(l => l.lineNo == cachedLineId);
|
if (index >= 0) {
|
this.lineIndex = index;
|
this.selectedLineId = cachedLineId;
|
} else {
|
// 如果缓存的线体不在当前车间下，清除线体选择
|
this.lineIndex = -1;
|
this.selectedLineId = '';
|
uni.removeStorageSync('qc_filter_lineId');
|
uni.removeStorageSync('qc_filter_lineName');
|
}
|
}
|
}).catch(err => {
|
console.error('获取线体列表失败:', err);
|
});
|
},
|
|
// 车间选择改变
|
onDepartmentChange(e) {
|
const index = parseInt(e.detail.value);
|
this.departmentIndex = index;
|
|
if (index >= 0 && this.departments[index]) {
|
this.selectedDepartmentId = this.departments[index].departmentid;
|
const departmentName = this.departments[index].departmentname;
|
|
// 保存到缓存
|
uni.setStorageSync('qc_filter_departmentId', this.selectedDepartmentId);
|
uni.setStorageSync('qc_filter_departmentName', departmentName);
|
|
// 清除线体选择
|
this.lineIndex = -1;
|
this.selectedLineId = '';
|
uni.removeStorageSync('qc_filter_lineId');
|
uni.removeStorageSync('qc_filter_lineName');
|
|
// 加载该车间下的线体
|
this.getLines();
|
|
uni.showToast({
|
title: `已选择车间：${departmentName}`,
|
icon: 'none'
|
});
|
}
|
},
|
|
// 线体选择改变
|
onLineChange(e) {
|
const index = parseInt(e.detail.value);
|
this.lineIndex = index;
|
|
if (index >= 0 && this.lines[index]) {
|
this.selectedLineId = this.lines[index].lineNo;
|
const lineName = this.lines[index].lineName;
|
|
// 保存到缓存
|
uni.setStorageSync('qc_filter_lineId', this.selectedLineId);
|
uni.setStorageSync('qc_filter_lineName', lineName);
|
|
uni.showToast({
|
title: `已选择线体：${lineName}`,
|
icon: 'none'
|
});
|
}
|
},
|
|
// 清空筛选条件
|
clearFilters() {
|
this.departmentIndex = -1;
|
this.selectedDepartmentId = '';
|
this.lineIndex = -1;
|
this.selectedLineId = '';
|
this.lines = [];
|
|
// 清除缓存
|
uni.removeStorageSync('qc_filter_departmentId');
|
uni.removeStorageSync('qc_filter_departmentName');
|
uni.removeStorageSync('qc_filter_lineId');
|
uni.removeStorageSync('qc_filter_lineName');
|
|
uni.showToast({
|
title: '已清空筛选条件',
|
icon: 'success'
|
});
|
},
|
|
// 处理菜单点击
|
handleMenuClick(item) {
|
// 存储功能名称
|
uni.setStorageSync("code", this.$loginInfo.account);
|
uni.setStorageSync('functionName', item.pagE_VIEW);
|
},
|
|
getMenu(isShowMask) {
|
if (isShowMask) uni.showLoading({
|
mask: true,
|
title: "加载中..."
|
});
|
this.$getUserMenu({
|
type: 'sys',
|
programId: this.loginInfo.sysNumber,
|
success: (res) => {
|
this.userMenu = res;
|
uni.stopPullDownRefresh();
|
|
},
|
fail: (err) => {
|
|
},
|
complete() {
|
if (isShowMask) uni.hideLoading();
|
}
|
});
|
|
|
},
|
getIsMsg() {
|
this.$post({
|
url: "/MessageCenter/IsShow",
|
data: {
|
createBy: this.$loginInfo.account,
|
isShow: 1,
|
},
|
}).then(res => {
|
if (res.data.tbBillList > 0) {
|
this.msg = "您有新的异常待处理/您有新的异常待处理";
|
//展示图标
|
uni.showTabBarRedDot({
|
index: 1
|
});
|
} else {
|
this.msg = "宁波广深科技有限公司";
|
//展示图标
|
uni.hideTabBarRedDot({
|
index: 1
|
});
|
}
|
})
|
},
|
checkForUpdate() {
|
this.$post({
|
url: "/Login/getAppUpgradeInfo",
|
data: {}
|
}).then(res => {
|
|
let newVersion = res.data.version;
|
let currentVersion = uni.getSystemInfoSync(); // 获取当前 APK 版本号
|
|
if (newVersion > currentVersion.appVersion) {
|
uni.showModal({
|
title: "发现新版本",
|
content: "是否下载最新版本?",
|
success: (modalRes) => {
|
if (modalRes.confirm) {
|
this.downloadNewApk(res.data.apkUrl);
|
}
|
}
|
});
|
//this.downloadNewApk(res.data.apkUrl);
|
this.updateChecked = true; // 标记更新已检查过
|
// // 如果有新版本，开始下载
|
//download(res.data.apkUrl);
|
}
|
})
|
|
},
|
|
|
downloadNewApk(apkUrl) {
|
uni.showToast({
|
title: "开始下载更新...",
|
icon: "none",
|
duration: 2000
|
});
|
|
uni.downloadFile({
|
url: apkUrl,
|
success: (res) => {
|
if (res.statusCode === 200) {
|
plus.runtime.install(res.tempFilePath, {
|
force: true
|
}, function() {
|
console.log("安装成功，重启应用");
|
//plus.runtime.restart();
|
//plus.runtime.quit();
|
// uni.navigateBack()
|
}, function(e) {
|
console.error("安装失败:", e);
|
});
|
}
|
},
|
fail: (err) => {
|
console.error("下载失败:", err);
|
uni.showToast({
|
title: "下载失败，请检查网络",
|
icon: "none",
|
duration: 2000
|
});
|
}
|
});
|
}
|
},
|
onLoad() {
|
|
if (!this.loginInfo.hasLogin) {
|
uni.showModal({
|
title: '未登录',
|
content: '您未登录，需要登录后才能继续',
|
/**
|
* 如果需要强制登录，不显示取消按钮
|
*/
|
showCancel: !this.loginInfo.forcedLogin,
|
success: (res) => {
|
if (res.confirm) {
|
/**
|
* 如果需要强制登录，使用reLaunch方式
|
*/
|
if (this.loginInfo.forcedLogin) {
|
uni.reLaunch({
|
url: 'login'
|
});
|
} else {
|
uni.navigateTo({
|
url: 'login'
|
});
|
}
|
}
|
}
|
});
|
} else {
|
|
this.getMenu(true);
|
this.checkForUpdate();
|
this.getDepartments(); // 加载车间列表
|
}
|
|
|
},
|
onShow() {
|
// this.getIsMsg();
|
// 每次显示页面时恢复筛选条件显示
|
if (this.loginInfo.hasLogin && this.departments.length === 0) {
|
this.getDepartments();
|
}
|
// 检查缓存的筛选条件，如果不存在则重置UI状态
|
const cachedDeptId = uni.getStorageSync('qc_filter_departmentId');
|
if (!cachedDeptId) {
|
this.departmentIndex = -1;
|
this.selectedDepartmentId = '';
|
this.lineIndex = -1;
|
this.selectedLineId = '';
|
this.lines = [];
|
}
|
},
|
onPullDownRefresh() {
|
if (this.loginInfo.hasLogin)
|
this.getMenu(true);
|
},
|
}
|
</script>
|
|
<style>
|
.text {
|
/* color: #ffffff; */
|
/* font-size: 15px; */
|
font-weight: 900;
|
}
|
|
.example-body {
|
flex-direction: row;
|
flex-wrap: wrap;
|
justify-content: center;
|
padding: 0;
|
font-size: 14px;
|
/* background-color: #ffffff; */
|
}
|
|
.grid-item {
|
display: flex;
|
flex-wrap: wrap;
|
height: 100% !important;
|
display: flex;
|
flex-direction: column;
|
align-items: stretch;
|
/* 保证垂直拉伸以适应内容 */
|
}
|
|
.grid-item-box {
|
flex: 1;
|
/* position: relative;*/
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 5px;
|
}
|
|
.imgMenu {
|
width: 100rpx;
|
height: 100rpx;
|
}
|
|
image,
|
swiper,
|
.img-view {
|
width: 100%;
|
height: 350rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.example-body {
|
flex-direction: row;
|
justify-content: flex-start;
|
}
|
|
.main-container {
|
position: relative;
|
}
|
|
/* 筛选按钮样式 */
|
.filter-btn {
|
position: fixed;
|
top: 20rpx;
|
right: 20rpx;
|
z-index: 1000;
|
display: flex;
|
align-items: center;
|
gap: 8rpx;
|
padding: 12rpx 24rpx;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-radius: 50rpx;
|
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
|
}
|
|
.filter-btn-text {
|
font-size: 24rpx;
|
color: #fff;
|
font-weight: 600;
|
}
|
|
.filter-badge {
|
position: absolute;
|
top: 4rpx;
|
right: 4rpx;
|
width: 16rpx;
|
height: 16rpx;
|
background-color: #ff4757;
|
border-radius: 50%;
|
border: 2rpx solid #fff;
|
}
|
|
/* 筛选弹出层 */
|
.filter-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: rgba(0, 0, 0, 0.5);
|
z-index: 999;
|
display: flex;
|
align-items: flex-start;
|
justify-content: flex-end;
|
padding: 80rpx 20rpx 20rpx 20rpx;
|
}
|
|
.filter-panel {
|
width: 500rpx;
|
max-width: 90%;
|
background-color: #fff;
|
border-radius: 16rpx;
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
|
animation: slideIn 0.3s ease-out;
|
}
|
|
@keyframes slideIn {
|
from {
|
transform: translateX(100%);
|
opacity: 0;
|
}
|
to {
|
transform: translateX(0);
|
opacity: 1;
|
}
|
}
|
|
.filter-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 24rpx 28rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
}
|
|
.filter-title {
|
font-size: 32rpx;
|
font-weight: 700;
|
color: #333;
|
}
|
|
.close-icon {
|
padding: 8rpx;
|
}
|
|
.filter-content {
|
padding: 32rpx 28rpx;
|
}
|
|
.filter-row {
|
margin-bottom: 32rpx;
|
}
|
|
.filter-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.filter-label {
|
display: block;
|
font-size: 28rpx;
|
color: #666;
|
margin-bottom: 16rpx;
|
font-weight: 600;
|
}
|
|
.filter-picker {
|
width: 100%;
|
}
|
|
.picker-text {
|
padding: 20rpx 24rpx;
|
background-color: #f8f9ff;
|
border-radius: 12rpx;
|
border: 2rpx solid #e0e5ff;
|
font-size: 28rpx;
|
color: #333;
|
text-align: left;
|
}
|
|
.picker-text.disabled {
|
background-color: #f5f5f5;
|
color: #999;
|
border-color: #e5e5e5;
|
}
|
|
.filter-footer {
|
display: flex;
|
gap: 16rpx;
|
padding: 24rpx 28rpx;
|
border-top: 1rpx solid #f0f0f0;
|
}
|
|
.reset-btn,
|
.confirm-btn {
|
flex: 1;
|
padding: 20rpx;
|
border-radius: 12rpx;
|
font-size: 28rpx;
|
font-weight: 600;
|
border: none;
|
}
|
|
.reset-btn {
|
background-color: #f5f5f5;
|
color: #666;
|
}
|
|
.confirm-btn {
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
color: #fff;
|
}
|
</style>
|
