323 lines
6.8 KiB
Vue
323 lines
6.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 轮播图 -->
|
||
<uni-swiper-dot class="uni-swiper-dot-box" :info="bannerList" :current="current" field="content">
|
||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-swiper-dot>
|
||
|
||
<!-- 宫格组件 -->
|
||
<uni-section title="半导体阀门生产线" type="line"></uni-section>
|
||
<view class="grid-body">
|
||
<uni-grid :column="4" :showBorder="false" @change="changeProduceGrid">
|
||
<uni-grid-item v-for="(item, index) in produceOptions" :key="index" :index="index">
|
||
<view class="grid-item-box">
|
||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||
<text class="text">{{ item.name }}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view>
|
||
<!-- <uni-section title="喷涂线" type="line"></uni-section>
|
||
<view class="grid-body">
|
||
<uni-grid :column="4" :showBorder="false" @change="changePaintingGrid">
|
||
<uni-grid-item v-for="(item, index) in paintingOptions" :key="index" :index="index">
|
||
<view class="grid-item-box">
|
||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||
<text class="text">{{ item.name }}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view> -->
|
||
<!-- <uni-section title="物料管理" type="line"></uni-section>
|
||
<view class="grid-body">
|
||
<uni-grid :column="4" :showBorder="false" @change="changeMaterialGrid">
|
||
<uni-grid-item v-for="(item, index) in materialOptions" :key="index" :index="index">
|
||
<view class="grid-item-box">
|
||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||
<text class="text">{{ item.name }}</text>
|
||
</view>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { fail } from 'assert';
|
||
import { tansParams } from '@/utils/common';
|
||
export default {
|
||
onShow() {},
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
swiperDotIndex: 0,
|
||
bannerList: [
|
||
{
|
||
image: '/static/images/door/1.jpg'
|
||
},
|
||
{
|
||
image: '/static/images/door/2.jpg'
|
||
},
|
||
{
|
||
image: '/static/images/door/3.jpg'
|
||
}
|
||
],
|
||
// 生产模块
|
||
produceOptions: [
|
||
{
|
||
name: '物料领用',
|
||
icon: 'download-filled',
|
||
url: '/pages/produceManagement/requisition/requisition',
|
||
params: {
|
||
processId: 10,
|
||
processName: '物料领用'
|
||
}
|
||
},
|
||
{
|
||
name: '机械加工',
|
||
icon: 'redo-filled',
|
||
url: '/pages/produceManagement/process/process',
|
||
params: {
|
||
processId: 20,
|
||
processName: '机械加工'
|
||
}
|
||
},
|
||
{
|
||
name: '中间检查',
|
||
icon: 'redo-filled',
|
||
url: '/pages/produceManagement/process/process',
|
||
params: {
|
||
processId: 30,
|
||
processName: '中间检查'
|
||
}
|
||
},
|
||
{
|
||
name: '手工研磨',
|
||
icon: 'redo-filled',
|
||
url: '/pages/produceManagement/process/process',
|
||
params: {
|
||
processId: 40,
|
||
processName: '手工研磨'
|
||
}
|
||
},
|
||
{
|
||
name: '机研磨',
|
||
icon: 'redo-filled',
|
||
url: '/pages/produceManagement/process/process',
|
||
params: {
|
||
processId: 50,
|
||
processName: '机研磨'
|
||
}
|
||
},
|
||
{
|
||
name: '精研磨',
|
||
icon: 'redo-filled',
|
||
url: '/pages/produceManagement/process/process',
|
||
params: {
|
||
processId: 60,
|
||
processName: '精研磨'
|
||
}
|
||
},
|
||
{
|
||
name: '入库检查',
|
||
icon: 'redo-filled',
|
||
url: '/pages/produceManagement/process/process',
|
||
params: {
|
||
processId: 70,
|
||
processName: '入库检查'
|
||
}
|
||
},
|
||
// {
|
||
// name: '出厂',
|
||
// icon: 'redo-filled',
|
||
// url: '/pages/produceManagement/process/process',
|
||
// params: {
|
||
// processId: 80,
|
||
// processName: '出厂'
|
||
// }
|
||
// },
|
||
{
|
||
name: '出货',
|
||
icon: 'upload-filled',
|
||
url: '/pages/produceManagement/process/process',
|
||
params: {
|
||
processId: 90,
|
||
processName: '出货'
|
||
}
|
||
},
|
||
{
|
||
name: '制程检验\n（不良跟踪）',
|
||
icon: 'folder-add-filled',
|
||
url: '/pages/qualityManagement/IPQC/IPQC'
|
||
},
|
||
{
|
||
name: '工单列表',
|
||
icon: 'wallet-filled',
|
||
url: '/pages/produceManagement/reportWorkOrderList/reportWorkOrderList'
|
||
}
|
||
],
|
||
// 工序顺序（0为默认首顺序）
|
||
processSort: [0, 10, 20, 30, 40, 50, 60, 70,80,90],
|
||
// 喷涂线模块
|
||
paintingOptions: [
|
||
{
|
||
name: '扫码报工',
|
||
icon: 'scan',
|
||
url: ''
|
||
}
|
||
],
|
||
// 物料模块
|
||
materialOptions: [
|
||
{
|
||
name: '入料',
|
||
icon: 'download',
|
||
url: ''
|
||
},
|
||
{
|
||
name: '出料',
|
||
icon: 'upload',
|
||
url: ''
|
||
},
|
||
{
|
||
name: '盘点',
|
||
icon: 'calendar',
|
||
url: ''
|
||
},
|
||
{
|
||
name: '清单',
|
||
icon: 'list',
|
||
url: ''
|
||
},
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
clickBannerItem(item) {
|
||
console.info(item);
|
||
},
|
||
changeSwiper(e) {
|
||
this.current = e.detail.current;
|
||
},
|
||
// 产线功能
|
||
changeProduceGrid(e) {
|
||
let _url = this.produceOptions[e.detail.index].url;
|
||
let _params = this.produceOptions[e.detail.index].params;
|
||
if (_params) {
|
||
_params.processSort = JSON.stringify(this.processSort);
|
||
_url += `?${tansParams(_params)}`;
|
||
}
|
||
uni.navigateTo({
|
||
url: _url,
|
||
fail: () => {
|
||
this.$modal.showToast('模块建设中~');
|
||
}
|
||
});
|
||
},
|
||
// 涂装线功能
|
||
changePaintingGrid(e) {
|
||
const _url = this.paintingOptions[e.detail.index].url;
|
||
uni.navigateTo({
|
||
url: _url,
|
||
fail: () => {
|
||
this.$modal.showToast('模块建设中~');
|
||
}
|
||
});
|
||
},
|
||
// 物料功能
|
||
changeMaterialGrid(e) {
|
||
const _url = this.materialOptions[e.detail.index].url;
|
||
uni.navigateTo({
|
||
url: _url,
|
||
fail: () => {
|
||
this.$modal.showToast('模块建设中~');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* #ifndef APP-NVUE */
|
||
page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
view {
|
||
font-size: 14px;
|
||
line-height: inherit;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.input-border {
|
||
border: 1px solid #eeeeee;
|
||
}
|
||
.text {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.grid-item-box {
|
||
flex: 1;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.uni-margin-wrap {
|
||
width: 690rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.swiper {
|
||
height: 300rpx;
|
||
}
|
||
|
||
.swiper-box {
|
||
height: 150px;
|
||
}
|
||
|
||
.swiper-item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
height: 300rpx;
|
||
line-height: 300rpx;
|
||
}
|
||
|
||
@media screen and (min-width: 500px) {
|
||
.uni-swiper-dot-box {
|
||
width: 400px;
|
||
/* #ifndef APP-NVUE */
|
||
margin: 0 auto;
|
||
/* #endif */
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|