终检报工app

mes-ui/mini-app/src/pages/zjPgMaster/components/dataItem.vue

@@ -0,0 +1,416 @@
+<script setup lang="ts">
+import { onMounted, computed, ref } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { getListAPI, getDictAPI } from '@/services/zjPgMaster'
+import { useLoginStore } from '@/stores/modules/login'
+import { formatDate } from '@/utils/index'
+
+const userStore = useLoginStore()
+const userId = userStore.userInfo.userId
+
+// 是否分页结束
+const isFinish = ref(false)
+// 是否触发下拉刷新
+const isTriggered = ref(false)
+// 定义 porps
+const props = defineProps<{
+  orderState: string
+}>()
+
+const statusText = computed(() => {
+  const text = props.orderState == '0,1' ? '处理' : '查看'
+  return text
+})
+// 是否加载中标记，用于防止滚动触底触发多次请求
+const isLoading = ref(false)
+// 请求参数
+const queryParams: Required<any> = {
+  pageNo: 1,
+  pageSize: 5,
+   detilUser: userId,
+//
+pgType: 0,
+// 工序完成状态列表
+dispatchType: "ASSEMBLE",
+// 派工类型
+isReport: 1
+// 是否需要报工
+}
+const dataList = ref([])
+const getListData = async () => {
+	console.log("props.orderState");
+	console.log(props.orderState);
+	queryParams.pgType = props.orderState;
+  // 如果数据出于加载中，退出函数
+  if (isLoading.value) return
+  if (isFinish.value === true) {
+    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
+  }
+  isLoading.value = true
+  // 发送请求
+  const data = await getListAPI(queryParams)
+  isLoading.value = false
+  data.list.forEach((e) => {
+    e.orderTime = formatDate(e.orderTime, 'YYYY-MM-DD')
+    e.startTime = formatDate(e.startTime, 'YYYY-MM-DD')
+    e.entTime = formatDate(e.entTime, 'YYYY-MM-DD')
+  })
+  // 数组追加
+  dataList.value.push(...data.list)
+  // 分页条件
+  if (queryParams.pageNo < data.total) {
+    // 页码累加
+    queryParams.pageNo++
+  } else {
+    // 分页已结束
+    isFinish.value = true
+  }
+}
+
+onMounted(async () => {
+  await getListData()
+})
+
+onShow(async () => {
+  isFinish.value = false
+  isLoading.value = false
+  queryParams.pageNo = 1
+  dataList.value = []
+  await getListData()
+})
+
+const handleDetail = (item) => {
+  const url = `/pages/zjPgMaster/zjPgMaster-detail?id=${item.id}`
+  uni.navigateTo({ url })
+}
+
+// 自定义下拉刷新被触发
+const onRefresherrefresh = async () => {
+  // 开始动画
+  isTriggered.value = true
+  // 重置数据
+  queryParams.pageNo = 1
+  dataList.value = []
+  isFinish.value = false
+  // 加载数据
+  await getListData()
+  // 关闭动画
+  isTriggered.value = false
+}
+// const searchVal = ref('')
+// const dataListDefault = ref([])
+// const handleSearch = async () => {
+//   const code = searchVal.value
+//   if (code) {
+//     dataListDefault.value = dataList.value
+//     dataList.value = dataList.value.filter((e) => {
+//       return e.code == code
+//     })
+//   } else {
+//     dataList.value = dataListDefault.value
+//   }
+// }
+</script>
+<template>
+  <view class="cont">
+    <!-- <view class="search" v-if="dataList.length > 5">
+      <view class="title"></view>
+      <input class="uni-input" v-model="searchVal" @change="handleSearch" placeholder="根据编号搜索" />
+    </view> -->
+    <scroll-view enable-back-to-top scroll-y class="data-list" refresher-enabled :refresher-triggered="isTriggered"
+      @refresherrefresh="onRefresherrefresh" @scrolltolower="getListData">
+      <view class="item" v-for="item in dataList" :key="item.id" @click="handleDetail(item)">
+        <view class="hd">
+          <view class="num">派工单：</view>
+          <view class="statusLabel">（ 单号：{{ item.pgNumber }} ）</view>
+        </view>
+        <view class="md">
+          <view class="product-item">项目名称：{{ item.projectName }}</view>
+          <view class="product-item">子项目：{{ item.projectSubCode || '' }} {{' ' + item.projectSubName }}</view>
+		  <view class="product-item">模型名称：{{ item.mouldName }}</view>
+          <!-- <view class="product-row">
+            <view class="row-item">
+              <view class="label">模型名称: {{ item.mouldName }}</view>
+            </view>
+            <view class="row-item">
+              <view class="label">派工工序: {{ item.procedureName }}</view>
+            </view>
+          </view> -->
+		  <view class="product-row">
+			  <view class="row-item">
+				  <view class="label">派工数量</view>
+				  <view class="val">{{item.amount}}</view>
+			  </view>
+			  <view class="row-item">
+				  <view class="label">总报工数量</view>
+				  <view class="val high-color">{{item.amounts}}</view>
+			  </view>
+		  </view>
+
+          <view class="product-row">
+            <view class="row-item">
+              <view class="label">预计工时</view>
+              <view class="val">{{ item.gongShi }}</view>
+            </view>
+            <view class="row-item">
+              <view class="label">总报工工时</view>
+              <view class="val high-color">{{ item.workTime }}</view>
+            </view>
+          </view>
+          <view class="product-item">预计生产日期：{{ item.startTime }} ～ {{ item.entTime }}</view>
+        </view>
+        <view class="statusText">{{ statusText }}</view>
+      </view>
+      <!-- 底部提示文字 -->
+      <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
+        {{ isFinish ? '没有更多数据~' : '正在加载...' }}
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style lang="scss">
+// 订单列表
+.search {
+  padding: 4rpx;
+  width: 80%;
+  margin: 30rpx auto;
+
+  .uni-input {
+    border: 1px solid #D1D6DB;
+    height: 60rpx;
+    line-height: 60rpx;
+    padding: 4rpx 10rpx;
+    font-size: 32rpx;
+    border-radius: 6rpx;
+  }
+}
+
+.data-list {
+  height: 90vh;
+  .item {
+    position: relative;
+    padding: 20rpx 0;
+    margin: 20rpx 20rpx;
+    border-radius: 10rpx;
+    background-color: #fff;
+
+    .hd {
+      padding: 10rpx;
+      font-size: 28rpx;
+      display: flex;
+
+      .statusLabel {
+        font-size: 24rpx;
+        color: #737D88;
+      }
+    }
+
+    .md {
+      position: relative;
+      padding: 10rpx;
+      min-height: 100rpx;
+      font-size: 28rpx;
+      border-top: 2rpx solid #F2F2F2;
+
+      .product-item {
+        margin: 20rpx 0;
+        display: flex;
+        align-items: center;
+        color: #737D88
+      }
+      .product-row {
+        margin: 20rpx 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        color: #737D88;
+        .row-item {
+          flex: 1;
+          .label {
+              margin-bottom: 10rpx;
+            }
+          
+            .val {
+              color: #1D2129;
+              &.high-color {
+                color: #00B42A
+              }
+            }
+        }
+        
+      }
+    }
+
+    .statusText {
+      position: absolute;
+      right: 30rpx;
+      top: 100rpx;
+      border-radius: 10rpx;
+      font-size: 24rpx;
+      padding: 10rpx 30rpx;
+      border-radius: 10rpx;
+      font-size: 24rpx;
+      background: linear-gradient(149deg, #2DACE6 4%, #356899 98%);
+      color: #fff;
+    }
+
+    &:last-child {
+      padding-bottom: 40rpx;
+    }
+  }
+
+  .status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 28rpx;
+    color: #999;
+    margin-bottom: 15rpx;
+
+    .date {
+      color: #666;
+      flex: 1;
+    }
+
+    .primary {
+      color: #ff9240;
+    }
+
+    .icon-delete {
+      line-height: 1;
+      margin-left: 10rpx;
+      padding-left: 10rpx;
+      border-left: 1rpx solid #e3e3e3;
+    }
+  }
+
+  .goods {
+    display: flex;
+    margin-bottom: 20rpx;
+
+    .cover {
+      width: 170rpx;
+      height: 170rpx;
+      margin-right: 20rpx;
+      border-radius: 10rpx;
+      overflow: hidden;
+      position: relative;
+
+      .image {
+        width: 170rpx;
+        height: 170rpx;
+      }
+    }
+
+    .quantity {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      line-height: 1;
+      padding: 6rpx 4rpx 6rpx 8rpx;
+      font-size: 24rpx;
+      color: #fff;
+      border-radius: 10rpx 0 0 0;
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    .meta {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .name {
+      height: 80rpx;
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .type {
+      line-height: 1.8;
+      padding: 0 15rpx;
+      margin-top: 10rpx;
+      font-size: 24rpx;
+      align-self: flex-start;
+      border-radius: 4rpx;
+      color: #888;
+      background-color: #f7f7f8;
+    }
+
+    .more {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22rpx;
+      color: #333;
+    }
+  }
+
+  .payment {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    line-height: 1;
+    padding: 20rpx 0;
+    text-align: right;
+    color: #999;
+    font-size: 28rpx;
+    border-bottom: 1rpx solid #eee;
+
+    .quantity {
+      font-size: 24rpx;
+      margin-right: 16rpx;
+    }
+
+    .amount {
+      color: #444;
+      margin-left: 6rpx;
+    }
+
+    .symbol {
+      font-size: 20rpx;
+    }
+  }
+
+  .action {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 20rpx;
+
+    .button {
+      width: 180rpx;
+      height: 60rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-left: 20rpx;
+      border-radius: 60rpx;
+      border: 1rpx solid #ccc;
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .secondary {
+      color: #3775F6;
+      border-color: #3775F6;
+    }
+
+    .primary {
+      color: #fff;
+      background-color: #3775F6;
+      border-color: #3775F6;
+    }
+  }
+
+  .loading-text {
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    padding: 20rpx 0;
+  }
+}
+</style>import type { stringify } from 'querystring';

mes-ui/mini-app/src/pages/zjPgMaster/zjPgMaster-detail.vue

@@ -0,0 +1,570 @@
+<script setup lang="ts">
+import { toRaw, ref, computed } from 'vue'
+import { formatDate } from '@/utils/index'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { useLoginStore } from '@/stores/modules/login'
+import { getTaskRepotPageAPI, getTaskDetailAPI, postOperateAPI } from '@/services/zjPgMaster'
+const popup = ref<UniHelper.UniPopupInstance>()
+const userStore = useLoginStore()
+const dictInfo = userStore?.dictInfo || []
+const unitDictData = dictInfo.filter(e => e.dictType == 'heli_material_unit') || []
+const userId = userStore.userInfo.userId
+
+const isShowStart = computed(() => {
+  let flag = true
+  if (historyList.value.length) {
+    const obj = historyList.value[0]
+    if (!obj?.endTime) {
+      flag = false
+    }
+  }
+  // // 派工数量和总报工数量相等了就不展示开始生产
+  // if (detailInfo.value.amount == detailInfo.value.totalReportAmount) {
+  //   flag = false
+  // }
+  return flag
+})
+const isShowEnd = computed(() => {
+  let flag = true
+  if (historyList.value.length) {
+    const obj = historyList.value[0]
+    if (obj?.endTime) {
+      flag = false
+    }
+  } else {
+    flag = false
+  }
+  return flag
+})
+const productionTitle = ref('开始生产')
+const amount = ref('')
+const workTime = ref('')
+// 详情数据
+const detailInfo = ref({})
+let isLoading = ref(false)
+const historyList = ref([])
+const formObj = ref({})
+// 历史明细
+const getData = async () => {
+  // 发送请求
+  isLoading.value = true
+  const params = {
+    pageNo: 1,
+    integerpageSize: 5,
+    bgUser: userId,
+    zjMxId: detailInfo.value.id,
+  }
+  const data = await getTaskRepotPageAPI(params)
+  data.list.forEach((e) => {
+    e.startTimeStr = e.startTime && formatDate(e.startTime, 'YYYY-MM-DD HH:mm')
+    e.endTimeStr = e.endTime && formatDate(e.endTime, 'YYYY-MM-DD HH:mm')
+	e.bgTime =  e.bgTime && formatDate(e.bgTime, 'YYYY-MM-DD HH:mm')
+  })
+  if (data.list[0]) {
+    formObj.value = data.list[0]
+    const time = formObj.value.endTime - formObj.value.startTime //时间差秒
+    const leave1 = time % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+    workTime.value = Math.floor(leave1 / (3600 * 1000))
+  }
+  historyList.value = data.list
+  isLoading.value = false
+}
+// 详情
+const getDetailData = async (id) => {
+  // 发送请求
+  // isLoading.value = true
+  const params = {
+    id,
+  }
+  const data = await getTaskDetailAPI(params)
+  data.startTime = formatDate(data.startTime, 'YYYY-MM-DD')
+  data.entTime = formatDate(data.entTime, 'YYYY-MM-DD')
+  
+
+  // 单位枚举
+  const lineObj = unitDictData.find((q) => q.value == data.unit) || {}
+  data.unit = lineObj.label
+  detailInfo.value = data || {}
+  isLoading.value = false
+}
+onLoad(async (options: any) => {
+  await getDetailData(options.id)
+  await getData()
+  const obj = historyList.value[0]
+    // 最新的报工是否完成
+  if (obj && obj?.workTime == null && obj.endTime) {
+    popup.value?.open()
+  }
+})
+
+// 生产完成
+const handleComplate = async () => {
+ /* const params = {
+    id: detailInfo.value?.id,
+    active: 'FINISH',
+	ownerId: userId,
+  }
+  const data = await postOperateAPI(params)
+  const url = `/pages/productionReport/productionReport-detail?id=${detailInfo.value.id}`
+  uni.redirectTo({
+    url,
+  }) */
+}
+// 提交报工
+const handleOk = async (active) => {
+  const params = {
+    zjMxId: detailInfo.value?.id,
+    amount: amount.value,
+	workTime: workTime.value,
+	bgUser: userId,
+  }
+  const data = await postOperateAPI(params)
+  const url = `/pages/zjPgMaster/zjPgMaster-detail?id=${detailInfo.value.id}`
+  uni.redirectTo({
+    url,
+  })
+}
+// 开始生产
+const handleStart = async () => {
+	popup.value.open();
+  /* const params = {
+    id: detailInfo.value.id,
+    active: 'START',
+	ownerId: userId,
+  }
+  const data = await postOperateAPI(params)
+  const url = `/pages/productionReport/productionReport-detail?id=${detailInfo.value.id}`
+  uni.redirectTo({
+    url,
+  })
+  productionTitle.value = '生产中' */
+}
+// 结束生产
+const handleStop = async () => {
+  const params = {
+    id: detailInfo.value?.id,
+    active: 'END',
+  }
+  const data = await postOperateAPI(params)
+  const url = `/pages/productionReport/productionReport-detail?id=${detailInfo.value.id}`
+  uni.redirectTo({
+    url,
+  })
+  popup.value?.open()
+}
+
+</script>
+<template>
+  <view class="data-detail">
+    <template v-if="!isLoading">
+      <view class="module">
+        <view class="module-info">
+          <view class="product-item">项目：{{detailInfo.projectName}}</view>
+          <image src="/static/images/productionReport-page.png" class="product-img" mode="scaleToFill"></image>
+          <view :class="[detailInfo.pgType == 1 ? 'had' : 'unhad', 'product-status']">{{
+            detailInfo.pgType == 1 ? '已完成' : '未完成' }}</view>
+          <view class="product-item">子项目：{{ detailInfo.projectSubCode || '' }} {{' ' + detailInfo.projectSubName }}
+          </view>
+		  <view class="product-item">模具名称：{{detailInfo.mouldName}}</view>
+          <view class="product-row">
+            <view class="row-item">
+              <view class="label">派工数量</view>
+              <view class="val">{{ detailInfo.amount }}</view>
+            </view>
+            <view class="row-item">
+              <view class="label">总报工数量</view>
+              <view class="val high-color">{{ detailInfo.amounts }}</view>
+            </view>
+          </view>
+          <view class="product-row">
+            <view class="row-item">
+              <view class="label">预计工时</view>
+              <view class="val">{{ detailInfo.gongShi }}</view>
+            </view>
+            <view class="row-item">
+              <view class="label">总报工工时</view>
+              <view class="val high-color">{{ detailInfo.workTime }}</view>
+            </view>
+          </view>
+          <view class="product-item">预计生产日期：{{ detailInfo.startTime }} ～ {{ detailInfo.entTime }}</view>
+          <view class="finish" v-if="isShowStart && detailInfo.procedureStatus !== 2 && detailInfo.totalWorkTime"
+            @click="handleComplate">
+            <image class="complate-img" src="/static/images/productionReport-detail-complate.png" mode="scaleToFill" />
+            生产完成
+          </view>
+        </view>
+      </view>
+      <view class="module-list">
+        <view class="module-title">历史报工明细</view>
+        <view class="history-list">
+          <view class="no-data" v-if="!historyList.length">
+            无数据...
+          </view>
+          <template v-else>
+            <view class="item" v-for="(item, index) in historyList" :key="item.id">
+              <view class="product-item">报工时间：{{ item.bgTime }}</view>
+              <!-- <view class="product-item">生产结束时间：{{ item.endTimeStr }}</view> -->
+
+              <view class="product-row">
+                <view class="row-item">
+                  <view class="label">报工工时：</view>
+                  <view class="val high-color">{{ item.workTime }}</view>
+                </view>
+                <view class="row-item">
+                  <view class="label">报工数量：</view>
+                  <view class="val high-color">{{ item.amount }}</view>
+                </view>
+              </view>
+              <view class="tip-index">
+                <image src="/static/images/productionReport-detail-index.png" class="icon-status" mode="scaleToFit">
+                </image>
+                <view class="text">{{historyList.length - index}}</view>
+              </view>
+
+            </view>
+          </template>
+        </view>
+      </view>
+      <view class="action" v-if="detailInfo.pgType !== 1">
+        <view class="action-item start" v-if="detailInfo.pgType !== 1" @click="handleStart">终检报工</view>
+        <!-- <view class="action-item stop" v-if="isShowEnd" @click="handleStop">结束生产</view> -->
+      </view>
+    </template>
+    <view class="loading-text" v-else>加载中..</view>
+    <uni-popup class="popup" ref="popup" :mask-click="false" type="bottom" background-color="#fff">
+      <view class="title">
+        <view class="text">填写信息</view>
+        <!-- <view class="close" @click="handleClose">X</view> -->
+      </view>
+      <view class="cont">
+        <view class="item">
+          <view class="label">终检开始时间：</view>
+          <view class="val">{{ formObj.startTime }}</view>
+        </view>
+        <view class="item">
+          <view class="label">终检结束时间：</view>
+          <view class="val">{{ formObj.endTime }}</view>
+        </view>
+        <view class="item">
+          <view class="label"><span class="star">*</span>本次报工工时：</view>
+          <uni-easyinput class="val" type="digit" v-model="workTime" placeholder="请输入本次报工工时"></uni-easyinput>
+          <view class="unit">小时</view>
+        </view>
+        <view class="item">
+          <view class="label"><span class="star">*</span>本次报工数量：</view>
+          <uni-easyinput class="val" type="number" v-model="amount" placeholder="请输入本次报工数量"></uni-easyinput>
+          <view class="unit"> {{ detailInfo.unit }}</view>
+        </view>
+      </view>
+      <view class="ok" @click="handleOk">确定</view>
+    </uni-popup>
+  </view>
+</template>
+<style lang="scss">
+// 订单列表
+.data-detail {
+  border-radius: 10rpx;
+  padding-bottom: 200rpx;
+
+  .module {
+    background: linear-gradient(178deg, #356899 7%, #356899 57%, #F4F6F9 94%);
+    padding: 20rpx;
+
+    .module-info {
+      padding: 20rpx 20rpx 80rpx;
+      border-radius: 10rpx;
+      min-height: 100rpx;
+      font-size: 28rpx;
+      border-bottom: 2rpx solid #F2F2F2;
+      background: linear-gradient(215deg, #C7D3E5 8%, rgba(222, 228, 236, 0) 13%), linear-gradient(162deg, #FFFFFF 25%, #E4EFFD 106%);
+      position: relative;
+      border-top-right-radius: 100rpx;
+
+      .product-img {
+        position: absolute;
+        right: 0rpx;
+        top: 0;
+        width: 100rpx;
+        height: 100rpx;
+      }
+
+      .product-status {
+        
+        width: 140rpx;
+        border-raduis: 10rpx;
+        text-align: center;
+        padding: 8rpx 12rpx;
+        &.had {
+          background: #E8FFEA;
+          color: #00B42A;
+        }
+        &.unhad {
+          background: #FFF7E8;
+          color: #FF7D00;
+        }
+      }
+
+      .product-item {
+        margin: 20rpx 0;
+        display: flex;
+        align-items: center;
+        color: #737D88
+      }
+
+      .product-row {
+        margin: 20rpx 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        color: #737D88;
+
+        .row-item {
+          flex: 1;
+
+          .label {
+            margin-bottom: 10rpx;
+          }
+
+          .val {
+            color: #1D2129;
+
+            &.high-color {
+              color: #00B42A
+            }
+          }
+        }
+
+      }
+      .finish {
+        position: absolute;
+        right: 40rpx;
+        bottom: 30rpx;
+        background: linear-gradient(142deg, #FEB34A 14%, #FE9B12 83%);
+        color: #fff;
+        width: 200rpx;
+        text-align: center;
+        padding: 10rpx;
+        border-radius: 31rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .complate-img {
+          width: 30rpx;
+          height: 30rpx;
+          margin-right: 10rpx;
+        }
+      }
+
+    }
+  }
+
+  .module-list {
+    padding: 20rpx 20rpx;
+    // box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);
+
+    .module-title {
+      color: #0D0D26;
+      font-size: 36rpx;
+      margin: 20rpx 0;
+      font-weight: 500;
+    }
+
+    .history-list {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-height: 200rpx;
+      justify-content: center;
+      padding: 0rpx 10rpx;
+
+      .item {
+        margin: 10rpx 0;
+        background: #EAEEF4;
+        font-size: 28rpx;
+        padding: 20rpx;
+        width: 100%;
+        border-radius: 10rpx;
+        color: #737D88;
+        position: relative;
+
+        .product-item {
+          margin: 10rpx 0;
+          .hight-color {
+            color: #00B42A;
+          }
+        }
+        .product-row {
+          margin: 20rpx 0;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          color: #737D88;
+
+          .row-item {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            .label {
+              margin-bottom: 10rpx;
+              &.high-color {
+                  color: #00B42A
+                }
+            }
+
+            .val {
+              color: #1D2129;
+
+              &.high-color {
+                color: #00B42A
+              }
+            }
+          }
+
+        }
+        .tip-index {
+          position: absolute;
+          top: 0rpx;
+          right: 0rpx;
+          .icon-status {
+            width: 100rpx;
+            height: 72rpx;
+            z-index: 1;
+          }
+          .text {
+            color: #fff;
+            position: absolute;
+            top: 4rpx;
+            right: 30rpx;
+            z-index: 2;
+          }
+        }
+      }
+
+      .no-data {
+        font-size: 28rpx;
+        color: #444;
+      }
+    }
+
+    .table-cont {
+      font-size: 24rpx;
+    }
+
+    .button {
+      color: #356899;
+    }
+  }
+
+  .action {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: 0rpx;
+    border-radius: 18rpx;
+    padding: 30rpx 30rpx;
+    background: #FFFFFF;
+    margin: 0 auto;
+    width: 100vw;
+    box-shadow: 0px -4px 10px 0px rgba(121, 153, 183, 0.2);
+
+    .action-item {
+      width: 272rpx;
+      height: 86rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 20rpx;
+      font-size: 40rpx;
+      color: #fff;
+      width: 272rpx;
+      height: 86rpx;
+      border-radius: 24rpx;
+
+      &.start {
+        background: linear-gradient(157deg, #2EACE6 -3%, #356899 90%);
+      }
+
+      &.stop {
+        background: linear-gradient(167deg, #FEA97B -2%, #F75E40 87%);
+      }
+
+      &.finish {
+        background: linear-gradient(142deg, #FEB34A 14%, #FE9B12 83%);
+      }
+    }
+  }
+
+  .loading-text {
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    padding: 20rpx 0;
+  }
+
+  .popup {
+    .title {
+      line-height: 1;
+      padding: 40rpx;
+      font-size: 32rpx;
+      font-weight: normal;
+      border-bottom: 1rpx solid #ddd;
+      color: #444;
+
+      .close {
+        position: absolute;
+        right: 24rpx;
+        top: 40rpx;
+        height: 60rpx;
+        width: 60rpx;
+        text-align: center;
+      }
+    }
+
+    .cont {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 40rpx;
+      height: 50vh;
+
+      .item {
+        display: flex;
+        align-items: center;
+        margin: 20rpx 0;
+        color: #737D88;
+        width: 94%;
+
+        .label {
+          font-size: 32rpx;
+          width: 260rpx;
+          .star {
+            color: red
+          }
+        }
+
+        .val {
+          flex: 1;
+          font-size: 32rpx;
+        }
+        .unit {
+          width: 100rpx;
+          margin-left: 4rpx;
+          text-align: center;
+        }
+      }
+    }
+
+    .ok {
+      font-size: 32rpx;
+      margin: 20rpx auto 80rpx;
+      text-align: center;
+      width: 200rpx;
+      border-radius: 10rpx;
+      padding: 8rpx 0;
+      background-color: #3C8AF7;
+      color: #fff;
+    }
+  }
+}
+</style>

mes-ui/mini-app/src/pages/zjPgMaster/zjPgMaster.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import dataItem from './components/dataItem.vue'
+// 定义 porps
+const props = defineProps<{
+  state: string
+}>()
+// tabs 数据
+const orderTabs = ref([
+  { orderState: '0', title: '未完成', isRender: false },
+  { orderState: '1', title: '已完成', isRender: false },
+])
+// 高亮下标
+const activeIndex = ref(0)
+const handleIndexChange = (index: any) => {
+  orderTabs.value.forEach((e) => {
+    e.isRender = false
+  })
+  activeIndex.value = index
+  orderTabs.value[index].isRender = true
+}
+onLoad(async (options) => {
+  if (options.state) {
+    // 高亮下标
+    orderTabs.value.forEach((e, index) => {
+      e.isRender = e.orderState == options.state
+      if (e.isRender) {
+        activeIndex.value = index
+      }
+    })
+  } else {
+    orderTabs.value.forEach((e, index) => {
+      e.isRender = e.orderState == '0'
+      if (e.isRender) {
+        activeIndex.value = index
+      }
+    })
+  }
+})
+</script>
+
+<template>
+  <view class="viewport">
+    <view class="tabs">
+      <text class="item" :class="{ active: activeIndex == index }" v-for="(item, index) in orderTabs" :key="item.title"
+        @tap="handleIndexChange(index)">
+        {{ item.title }}
+      </text>
+      <!-- 游标 -->
+      <view class="cursor" :style="{ left: activeIndex ? '65%' : '14%' }"></view>
+    </view>
+    <!-- 滑动容器 -->
+    <swiper class="swiper" :current="activeIndex" @change="handleIndexChange($event.detail.current)">
+      <!-- 滑动项 -->
+      <swiper-item v-for="item in orderTabs" :key="item.title">
+        <dataItem v-if="item.isRender" :order-state="item.orderState" />
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  height: 100%;
+}
+
+.viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  // background-color: #3775F6;
+  .navbar {
+    width: 750rpx;
+    color: #000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    /* background-color: #f8f8f8; */
+    background-color: #3775f6;
+
+    .wrap {
+      position: relative;
+      background-color: #3775f6;
+
+      .title {
+        height: 44px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 32rpx;
+        /* color: #000; */
+        color: #fff;
+      }
+
+      .back {
+        position: absolute;
+        left: 0;
+        height: 44px;
+        width: 44px;
+        font-size: 44rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* color: #000; */
+        color: #fff;
+      }
+    }
+  }
+
+  .tabs {
+    display: flex;
+    justify-content: space-around;
+    line-height: 60rpx;
+    position: relative;
+    z-index: 9;
+    width: 100%;
+
+    .item {
+      flex: 1;
+      text-align: center;
+      padding: 20rpx;
+      font-size: 28rpx;
+      color: #1D2129;
+
+      &.active {
+        color: #356899;
+      }
+    }
+
+    .cursor {
+      position: absolute;
+      left: 13%;
+      bottom: 0;
+      width: 20%;
+      height: 6rpx;
+      padding: 0 50rpx;
+      background-color: #356899;
+      /* 过渡效果 */
+      transition: all 0.4s;
+    }
+  }
+
+  // swiper
+  .swiper {
+    background-color: #f7f7f8;
+  }
+}
+</style>

mes-ui/mini-app/src/services/zjPgMaster.ts

@@ -0,0 +1,44 @@
+/*
+ * @Author: 王文杰
+ * @Date: 2024-01-04 12:54:56
+ * @LastEditors: 王文杰 
+ * @LastEditTime: 2024-03-29 15:44:53
+ * @FilePath: /app-nx-personal/src/services/home.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { http } from '@/utils/http'
+// 获取工序分页
+export const getListAPI = (data: Object) => {
+  return http<any[]>({
+    method: 'GET',
+    url: '/heli/zj-pg-master/task-dispatch-detail/page',
+    data,
+  })
+}
+// 报工记录分页查询
+export const getTaskRepotPageAPI = (data: Object) => {
+  return http<any[]>({
+    method: 'GET',
+    url: '/heli/zj-bg-master-line/page',
+    data,
+  })
+}
+// 派工任务详情
+export const getTaskDetailAPI = (data: Object) => {
+  return http<any[]>({
+    method: 'GET',
+    url: '/heli/zj-pg-master/task-dispatch-detail/get',
+    data,
+  })
+}
+
+/**
+ * 操作生产任务（开始/结束/提交/完成）
+ */
+export const postOperateAPI = (data: Object) => {
+  return http<any[]>({
+    method: 'POST',
+    url: '/heli/zj-bg-master-line/create',
+    data,
+  })
+}