feat: 添加产线监控页面并优化扫码页面样式
- 新增产线监控页面(line.vue)及相关组件 - 优化扫码页面(easycode.vue)的UI布局和样式 - 调整pages.json中的页面顺序和导航栏配置 - 启用并配置tabBar功能
This commit is contained in:
砂糖
@@ -17,7 +17,14 @@
|
|||||||
//#ifdef H5
|
//#ifdef H5
|
||||||
this.checkLogin()
|
this.checkLogin()
|
||||||
//#endif
|
//#endif
|
||||||
|
// uni.hideTabBar()
|
||||||
},
|
},
|
||||||
|
// mounted() {
|
||||||
|
// uni.hideTabBar()
|
||||||
|
// },
|
||||||
|
// onShow() {
|
||||||
|
// uni.hideTabBar()
|
||||||
|
// },
|
||||||
initConfig() {
|
initConfig() {
|
||||||
this.globalData.config = config
|
this.globalData.config = config
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,19 +1,5 @@
|
|||||||
{
|
{
|
||||||
"pages": [
|
"pages": [
|
||||||
{
|
|
||||||
"path" : "pages/easycode/easycode",
|
|
||||||
"style" :
|
|
||||||
{
|
|
||||||
"navigationBarTitleText" : "扫码",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/login",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "登录"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/index",
|
"path": "pages/index",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -21,7 +7,21 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/easycode/easycode",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "扫码",
|
||||||
|
"navigationStyle": "default"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path": "pages/login",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "登录"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/mine/index",
|
"path": "pages/mine/index",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -40,6 +40,13 @@
|
|||||||
{
|
{
|
||||||
"navigationBarTitleText" : "扫码"
|
"navigationBarTitleText" : "扫码"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/line/line",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "产线监控"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// {
|
// {
|
||||||
// "path": "pages/register",
|
// "path": "pages/register",
|
||||||
@@ -99,28 +106,35 @@
|
|||||||
"navigationBarTitleText": "RuoYi",
|
"navigationBarTitleText": "RuoYi",
|
||||||
"navigationBarBackgroundColor": "#FFFFFF"
|
"navigationBarBackgroundColor": "#FFFFFF"
|
||||||
},
|
},
|
||||||
// "tabBar": {
|
"tabBar": {
|
||||||
// "list": [
|
"list": [
|
||||||
// {
|
{
|
||||||
// "text": "产线",
|
"text": "产线",
|
||||||
// "pagePath": "pages/index",
|
"pagePath": "pages/index",
|
||||||
// "selectedIconPath": "/static/images/tabbar/home_.png",
|
"selectedIconPath": "/static/images/tabbar/home_.png",
|
||||||
// "iconPath": "/static/images/tabbar/home.png"
|
"iconPath": "/static/images/tabbar/home.png"
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "text": "扫码",
|
"text": "扫码",
|
||||||
// "pagePath": "pages/code/code",
|
"pagePath": "pages/code/code",
|
||||||
// "selectedIconPath": "/static/images/tabbar/work_.png",
|
"selectedIconPath": "/static/images/tabbar/work_.png",
|
||||||
// "iconPath": "/static/images/tabbar/work.png"
|
"iconPath": "/static/images/tabbar/work.png"
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "text": "我的",
|
"text": "我的",
|
||||||
// "pagePath": "pages/mine/index",
|
"pagePath": "pages/mine/index",
|
||||||
// "selectedIconPath": "/static/images/tabbar/mine_.png",
|
"selectedIconPath": "/static/images/tabbar/mine_.png",
|
||||||
// "iconPath": "/static/images/tabbar/mine.png"
|
"iconPath": "/static/images/tabbar/mine.png"
|
||||||
// }
|
},
|
||||||
// ]
|
{
|
||||||
// },
|
"text": "扫码2",
|
||||||
|
"pagePath": "pages/easycode/easycode",
|
||||||
|
"selectedIconPath": "/static/images/tabbar/work_.png",
|
||||||
|
"iconPath": "/static/images/tabbar/work.png"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"autoscan": true,
|
"autoscan": true,
|
||||||
"custom": {
|
"custom": {
|
||||||
|
|||||||
@@ -1,12 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="container">
|
||||||
<button v-for='item in types' @click="handleScan(item.dictValue)">
|
<!-- 标题区域 -->
|
||||||
{{ item.dictLabel }}
|
<view class="page-title">操作类型选择</view>
|
||||||
</button>
|
|
||||||
|
|
||||||
<button @click='handleLogout'>
|
<!-- 操作类型按钮区域 -->
|
||||||
退出登录
|
<view class="btn-grid">
|
||||||
</button>
|
<button
|
||||||
|
v-for='item in types'
|
||||||
|
:key="item.dictValue"
|
||||||
|
@click="handleScan(item.dictValue)"
|
||||||
|
class="type-btn"
|
||||||
|
>
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 退出登录按钮（固定在底部） -->
|
||||||
|
<view class="logout-container">
|
||||||
|
<button @click='handleLogout' class="logout-btn">
|
||||||
|
退出登录
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -29,32 +43,96 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleScan(type) {
|
handleScan(type) {
|
||||||
// 1. 扫码
|
|
||||||
uni.scanCode({
|
uni.scanCode({
|
||||||
success(res) {
|
success(res) {
|
||||||
const result = res.result;
|
const result = res.result;
|
||||||
// 2. 解析二维码的content，获取enter_coil_no、current_coil_no和coil_id
|
|
||||||
const qrcodeRecord = qrcodeRes.data;
|
|
||||||
const content = JSON.parse(qrcodeRecord.content);
|
|
||||||
const enterCoilNo = content.enter_coil_no;
|
|
||||||
const currentCoilNo = content.current_coil_no;
|
|
||||||
const coilId = content.coil_id && content.coil_id !== 'null' ? content.coil_id : null;
|
|
||||||
|
|
||||||
// 3. 调用创建待操作记录的API
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 获取字典
|
|
||||||
getDicts('easycode_type').then(res => {
|
getDicts('easycode_type').then(res => {
|
||||||
console.log(res)
|
|
||||||
this.types = res.data
|
this.types = res.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
padding: 20rpx;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
/* 页面标题 */
|
||||||
|
.page-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮网格布局 */
|
||||||
|
.btn-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 200rpx 200rpx; /* 固定按钮宽度 */
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
gap: 40rpx; /* 按钮间距 */
|
||||||
|
margin-bottom: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 操作类型按钮样式 */
|
||||||
|
.type-btn {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
line-height: 150rpx; /* 文字竖直居中 */
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-btn:active {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 退出登录按钮容器 */
|
||||||
|
.logout-container {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 30rpx;
|
||||||
|
left: 0;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 退出登录按钮样式 */
|
||||||
|
.logout-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx; /* 文字竖直居中 */
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #ff4d4f;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 4rpx 10rpx rgba(255, 77, 79, 0.2);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn:active {
|
||||||
|
background-color: #f5222d;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
99
apps/hand-factory/pages/line/line.vue
Normal file
99
apps/hand-factory/pages/line/line.vue
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
<template>
|
||||||
|
<view class="production-page">
|
||||||
|
|
||||||
|
<klp-header @lineChange="setActive" class="line-header"></klp-header>
|
||||||
|
|
||||||
|
<view class="content-wrapper">
|
||||||
|
<Acidity v-if="active == 0"/>
|
||||||
|
<Paint v-else-if="active == 1"/>
|
||||||
|
<Zinc1 v-else-if="active == 2"></Zinc1>
|
||||||
|
<Zinc2 v-else-if="active == 3"></Zinc2>
|
||||||
|
<Zinc3 v-else-if="active == 4"></Zinc3>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Acidity from '@/components/lines/acidity.vue'
|
||||||
|
import Paint from '@/components/lines/paint.vue'
|
||||||
|
import Zinc1 from '@/components/lines/zinc1.vue'
|
||||||
|
import Zinc2 from '@/components/lines/zinc2.vue'
|
||||||
|
import Zinc3 from '@/components/lines/zinc3.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Acidity,
|
||||||
|
Paint,
|
||||||
|
Zinc1,
|
||||||
|
Zinc2,
|
||||||
|
Zinc3
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
next() {
|
||||||
|
if (this.active >= 5) {
|
||||||
|
this.active = 0
|
||||||
|
} else {
|
||||||
|
this.active += 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setActive({ index, line }) {
|
||||||
|
this.active = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
/* 主容器 - 简洁背景 */
|
||||||
|
.production-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 顶部装饰 */
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40rpx 30rpx 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1rpx solid #e8e8e8;
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-line {
|
||||||
|
height: 2rpx;
|
||||||
|
background: linear-gradient(90deg, transparent, #ddd, transparent);
|
||||||
|
flex: 1;
|
||||||
|
max-width: 100rpx;
|
||||||
|
|
||||||
|
&.line-left {
|
||||||
|
background: linear-gradient(90deg, transparent, #ddd);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.line-right {
|
||||||
|
background: linear-gradient(90deg, #ddd, transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-header {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容容器 */
|
||||||
|
.content-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user