You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
388 lines
11 KiB
Vue
388 lines
11 KiB
Vue
<template>
|
|
<view>
|
|
<u-sticky
|
|
class="sticky"
|
|
:custom-nav-height="0"
|
|
>
|
|
<u-navbar
|
|
title="生产计划"
|
|
bg-color="transparent"
|
|
:auto-back="false"
|
|
:title-style="{ fontWeight: 'bold' }"
|
|
left-icon=""
|
|
safe-area-inset-top
|
|
placeholder
|
|
/>
|
|
<u-tabs
|
|
:list="menuList"
|
|
:current="current"
|
|
key-name="name"
|
|
:scrollable="false"
|
|
:active-style="{
|
|
color: '#0E85FF',
|
|
}"
|
|
@change="change"
|
|
>
|
|
</u-tabs>
|
|
</u-sticky>
|
|
<uni-notice-bar show-icon scrollable text="安全生产！有序生产！高效生产！" />
|
|
<!-- 开工中-->
|
|
<view v-if="current === 0" class="container" >
|
|
<u-list>
|
|
<u-list-item
|
|
v-for="item in startList"
|
|
:key="item"
|
|
>
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="title">
|
|
<u-image
|
|
src="@/static/images/icon/product.png"
|
|
width="40rpx"
|
|
height="40rpx"
|
|
/>
|
|
<text class="name">
|
|
{{ item.productName }}
|
|
</text>
|
|
</view>
|
|
<el-text type="success">{{item.code}}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划数:{{ item.planNumber }}</el-text>
|
|
<el-text>入库数:{{ item.finishNumber }}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
|
|
<el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
|
|
</view>
|
|
<view class="text">
|
|
<el-text>备注:</el-text>
|
|
</view>
|
|
<view class="remark">
|
|
<el-text>{{ item.remark }}</el-text>
|
|
</view>
|
|
<view class="u-m-t-30 u-m-b-30"><u-line/></view>
|
|
<view class="u-flex justify-end">
|
|
<el-col v-if="auth.hasPermi('mes:plan:update')" :span="4" class="u-m-r-30">
|
|
<u-button type="success" plain @click="updatePlan(item.id, item.code,'end')">完工</u-button>
|
|
</el-col>
|
|
<el-col v-if="auth.hasPermi('mes:plan:update')" :span="4" class="u-m-r-30">
|
|
<u-button type="warning" plain @click="updatePlan(item.id,item.code,'pause')">暂停</u-button>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<u-button type="info" plain @click="planProgress(item)">进度</u-button>
|
|
</el-col>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
<!-- 派工中-->
|
|
<view v-if="current === 1" class="container" >
|
|
<u-list>
|
|
<u-list-item
|
|
v-for="item in dispatch"
|
|
:key="item"
|
|
>
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="title">
|
|
<u-image
|
|
src="@/static/images/icon/product.png"
|
|
width="40rpx"
|
|
height="40rpx"
|
|
/>
|
|
<text class="name">
|
|
{{ item.productName }}
|
|
</text>
|
|
</view>
|
|
<el-text type="success">{{item.code}}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划数:{{ item.planNumber }}</el-text>
|
|
<el-text>入库数:{{ item.finishNumber }}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
|
|
<el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
|
|
</view>
|
|
<view class="text">
|
|
<el-text>备注:</el-text>
|
|
</view>
|
|
<view class="remark">
|
|
<el-text>{{ item.remark }}</el-text>
|
|
</view>
|
|
<view class="u-m-t-30 u-m-b-30"><u-line/></view>
|
|
<view class="u-flex justify-end">
|
|
<el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
|
|
<u-button type="info" plain @click="updatePlan(item.id,item.code, 'start')">开工</u-button>
|
|
</el-col>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
<!-- 计划中-->
|
|
<view v-if="current === 2" class="container" >
|
|
<u-list>
|
|
<u-list-item
|
|
v-for="item in planList"
|
|
:key="item"
|
|
>
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="title">
|
|
<u-image
|
|
src="@/static/images/icon/product.png"
|
|
width="40rpx"
|
|
height="40rpx"
|
|
/>
|
|
<text class="name">
|
|
{{ item.productName }}
|
|
</text>
|
|
</view>
|
|
<el-text type="success">{{item.code}}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划数:{{ item.planNumber }}</el-text>
|
|
<el-text>入库数:{{ item.finishNumber }}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
|
|
<el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
|
|
</view>
|
|
<view class="text">
|
|
<el-text>备注:</el-text>
|
|
</view>
|
|
<view class="remark">
|
|
<el-text>{{ item.remark }}</el-text>
|
|
</view>
|
|
<view class="u-m-t-30 u-m-b-30"><u-line/></view>
|
|
<view class="u-flex justify-end">
|
|
<el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
|
|
<u-button type="primary" plain>派工</u-button>
|
|
</el-col>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
<!-- 暂停中 -->
|
|
<view v-if="current === 3" class="container" >
|
|
<u-list>
|
|
<u-list-item
|
|
v-for="item in pauseList"
|
|
:key="item"
|
|
>
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="title">
|
|
<u-image
|
|
src="@/static/images/icon/product.png"
|
|
width="40rpx"
|
|
height="40rpx"
|
|
/>
|
|
<text class="name">
|
|
{{ item.productName }}
|
|
</text>
|
|
</view>
|
|
<el-text type="success">{{item.code}}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划数:{{ item.planNumber }}</el-text>
|
|
<el-text>入库数:{{ item.finishNumber }}</el-text>
|
|
</view>
|
|
<view class="flex-box">
|
|
<el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
|
|
<el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
|
|
</view>
|
|
<view class="text">
|
|
<el-text>备注:</el-text>
|
|
</view>
|
|
<view class="remark">
|
|
<el-text>{{ item.remark }}</el-text>
|
|
</view>
|
|
<view class="u-m-t-30 u-m-b-30"><u-line/></view>
|
|
<view class="u-flex justify-end">
|
|
<el-col v-if="auth.hasPermi('mes:plan:update')" :span="4" class="u-m-r-30">
|
|
<u-button type="info" plain @click="updatePlan(item.id, item.code,'start')">开工</u-button>
|
|
</el-col>
|
|
<el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
|
|
<u-button type="success" plain @click="updatePlan(item.id,item.code, 'end')">完工</u-button>
|
|
</el-col>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
<!-- <view class="charts-box">-->
|
|
<!-- <qiun-data-charts :chartData="chartData" type="column"/>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { updateStatus, getByStatus } from "@/api/mes/plan"
|
|
import { timestampToTime } from "@/utils/dateUtil";
|
|
import modal from "@/plugins/modal";
|
|
import tab from "@/plugins/tab";
|
|
import { showConfirm } from "@/utils/common";
|
|
import auth from "@/plugins/auth";
|
|
|
|
const startList = ref([]);
|
|
const dispatch = ref([]);
|
|
const pauseList = ref([]);
|
|
const planList = ref([]);
|
|
const chartData = ref({});
|
|
|
|
const menuList = ref([
|
|
{
|
|
name: '开工中'
|
|
},
|
|
{
|
|
name: '派工中'
|
|
},
|
|
{
|
|
name: '计划中'
|
|
},
|
|
{
|
|
name: '暂停中'
|
|
}
|
|
])
|
|
const current = ref(0)
|
|
const change = (index)=>{
|
|
current.value = index.index
|
|
}
|
|
|
|
onMounted(() => {
|
|
getServerData()
|
|
getPlanList()
|
|
});
|
|
|
|
function getServerData() {
|
|
// 模拟从服务器获取数据时的延时
|
|
setTimeout(() => {
|
|
let res = {
|
|
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
|
series: [
|
|
{
|
|
name: '目标值',
|
|
data: [35, 36, 31, 33, 13, 34],
|
|
},
|
|
{
|
|
name: '完成量',
|
|
data: [18, 27, 21, 24, 6, 28],
|
|
},
|
|
],
|
|
};
|
|
chartData.value = JSON.parse(JSON.stringify(res));
|
|
}, 500);
|
|
}
|
|
// 加载列表数据
|
|
function getPlanList() {
|
|
getByStatus(0).then(response => {
|
|
planList.value = response.data
|
|
})
|
|
getByStatus(1).then(response => {
|
|
dispatch.value = response.data
|
|
})
|
|
getByStatus(2).then(response => {
|
|
startList.value = response.data
|
|
})
|
|
getByStatus(3).then(response => {
|
|
pauseList.value = response.data
|
|
})
|
|
|
|
}
|
|
|
|
/** 开工 */
|
|
function updatePlan(id, planCode, type){
|
|
let content = '确定['
|
|
if(type==='start')content= content+'开工]' + planCode +'?'
|
|
else if(type==='end')content= content+'完工]'+ planCode +'?'
|
|
else if(type==='pause')content= content+'暂停]'+ planCode +'?'
|
|
showConfirm(content).then(res => {
|
|
if (res.confirm) {
|
|
const data = {'id':id, 'code':type}
|
|
updateStatus(data).then(response => {
|
|
getPlanList()
|
|
})
|
|
modal.msgSuccess("操作成功")
|
|
}
|
|
})
|
|
}
|
|
//看进度
|
|
function planProgress(plan){
|
|
tab.navigateTo('/page_report/planProgress',plan)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
width: 100%
|
|
}
|
|
.sticky {
|
|
background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
|
|
backdrop-filter: blur(27.18px);
|
|
box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
|
|
0 0.5px 0 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: #8f8f94;
|
|
}
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.container {
|
|
background-color: #f1f1f1;
|
|
padding: 0 20rpx 20rpx 20rpx;
|
|
.content {
|
|
margin: 20rpx 0;
|
|
padding: 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin-left: 16rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
.flex-box {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 24rpx;
|
|
}
|
|
.text {
|
|
margin-top: 20rpx;
|
|
}
|
|
.remark {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background-color: #f5f7f9;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #555555;
|
|
}
|
|
.u-button {
|
|
height: 60rpx
|
|
}
|
|
}
|
|
}
|
|
</style>
|