test

cuiqian2004

5 天以前 2af5f043b60c1f7ac38ecccc8f5bf44743134325

 pages/task/infos/task-item.vue

@@ -1,42 +1,54 @@
<template>
   <view class="pages-task-item">
      <view class="btn-no " :class="taskIsRun?'active':'' ">
         {{taskData.taskButton}}
      </view>
      <view class="content" @click="clickTask">
         <view class="line">
            <view class="title"> {{taskData.taskGroupName}}</view>
      <view class="item-content">
         <view class="btn-no " :class="taskIsRun?'active':'' " @click="clickButton">
            {{taskData.taskButton}}
         </view>
         <view class="line">
            {{taskListDesc}}
         <view class="content" @click="clickTask">
            <view class="line">
               <view class="title"> {{taskData.taskGroupName}}</view>
            </view>
            <view class="line">
               <view class="desc">
                  {{taskListDesc}}
               </view>
               <view class="cycle">
                  {{taskCycleTime}}
               </view>
            </view>
         </view>
      </view>
      <view class="action-button" v-if="taskIsRun">
<!--          <button type="primary" v-show="false" :plain="true" class="button" @click.stop="clickRepeatTask">
         <view class="action-button" v-if="taskIsRun">
            <!--          <button type="primary" v-show="false" :plain="true" class="button" @click.stop="clickRepeatTask">
            <text class="ico repeat" />
         </button> -->
         <button type="primary" :plain="true" class="button" @click.stop="clickSkipTask">
            <text class="ico skip-next-rounded" />
         </button>
         <button type="primary" :plain="true" class="button" @click.stop="clickStopTask">
            <text class="ico stop" />
         </button>
         <!--          <button type="primary" v-show="false" :plain="true" class="button" @click.stop="clickPauseTask">
            <button type="primary" :plain="true" class="button" @click.stop="clickSkipTask">
               <text class="ico skip-next-rounded" />
            </button>
            <button type="primary" :plain="true" class="button" @click.stop="clickStopTask">
               <text class="ico stop" />
            </button>
            <!--          <button type="primary" v-show="false" :plain="true" class="button" @click.stop="clickPauseTask">
            <text class="ico pause-rounded" />
         </button>
         <button type="primary" v-show="false" :plain="true" class="button" @click.stop="clickPlayTask">
            <text class="ico play-filled" />
         </button> -->
         </view>
         <view class="action-button" v-else>
            <button :type=" !taskCanRun ? 'default':'primary'" :plain="true" class="button" :disabled=" !taskCanRun"
               @click.stop="clickPlayTask">
               <text class="ico play-filled " :class="taskCanRun ? '':'disabled'" />
            </button>
         </view>
      </view>
      <view class="action-button" v-else>
         <button :type=" !taskCanRun ? 'default':'primary'" :plain="true" class="button" :disabled=" !taskCanRun"
            @click.stop="clickPlayTask">
            <text class="ico play-filled " :class="taskCanRun ? '':'disabled'" />
         </button>
      <view class="item-sub" v-if="showTaskRunning && taskIsRun">
         <view class="sub-item" v-for="(item,index) in taskStatusList" :key="item.taskID">
            <text class="text">{{getStatusText(item.status)}}</text>
            <text class="text">{{translate("target_point" ) + " "+(index+ 1)}}</text>
            <text class="text">{{getDestText(item)}}</text>
            <text class="text">{{getActionText(item)}}</text>
         </view>
      </view>
      <!-- <view class="btn-del" :style="{ transform: `translateX(${deleteX || 0}px)` }" @click="clickDelete">
         删除</view> -->

   </view>

</template>
@@ -73,6 +85,13 @@
               return 0;
            }
         },
         showTaskRunning: {
            type: Boolean,
            default () {
               return false;
            }
         },

      },
      data() {
         return {}
@@ -81,7 +100,42 @@
         taskListDesc() {
            let list = this.taskData.taskList || []
            list = list.map((a) => a.dest?.name)

            return list.join("-")
         },
         taskCycleTime() {

            if (this.taskIsRun) {
               const time = this.taskStatus?.curCycleNumber || 0
               let timeStr = `${time}${this.translate("the_th_suffix")}`
               if (time % 10 == 1) {
                  timeStr = `${time}${this.translate("the_st_suffix")}`
               } else if (time % 10 == 2) {
                  timeStr = `${time}${this.translate("the_nd_suffix")}`
               } else if (time % 10 == 3) {
                  timeStr = `${time}${this.translate("the_rd_suffix")}`
               }
               return this.translate("time_number", [timeStr,
                  `${this.taskStatus?.cycleTotalNumber || 0}`
               ])
            } else {
               const time = this.taskData.cycleTime || 0
               let timeStr = ""
               if(time == 1)
               {
                  timeStr = this.translate("repeat_once")
               }
               else if(time == 2)
               {
                  timeStr = this.translate("repeat_twice")
               }
               else
               {
                  timeStr = this.translate("repeat_times", [`${time}`])
               }
		
               return timeStr
            }
         },
         taskIsRun() {
            if (this.taskStatus?.taskGroupID == this.taskData.taskGroupID) {
@@ -97,6 +151,16 @@
               return true
            }
         },

         taskStatusList() {
            if (this.taskIsRun) {
               let list = this.taskStatus.taskStatusList || []
               list = list.filter((a) => a.cycleNumber == this.taskStatus.curCycleNumber)
               return list
            } else {
               return []
            }
         }

      },

@@ -122,6 +186,11 @@
               });
            });
         },
         clickButton() {
            if (this.taskIsRun)
               this.$emit('click-btn', this.taskData)
         },

         clickTask() {
            this.$emit('click-item', this.taskData)
         },
@@ -151,28 +220,113 @@
            this.$emit('click-delete', this.taskData)
         },



         getStatusText(status) {
            var statusText = this.translate("unknown")
            if (!status) {
               statusText = this.translate("not_started")
            } else if (status === 5) {
               statusText = this.translate("mandatory_completion")
            } else if (status === 4) {
               statusText = this.translate("abnormal_termination")
            } else if (status === 3) {
               statusText = this.translate("canceled")
            } else if (status === 2) {
               statusText = this.translate("completed")
            } else if (status === 1) {
               statusText = this.translate("in_progress")
            }
            return statusText
         },
         getDestText(item) {
            const index = this.taskData.taskList.findIndex((a) => a.taskID == item.taskID)
            if (index > -1) {
               return this.taskData.taskList[index].dest?.name || ""
            }
            return ""
         },
         getActionText(item) {
            const index = this.taskData.taskList.findIndex((a) => a.taskID == item.taskID)
            if (index > -1) {
               const task = this.taskData.taskList[index]
               var actionText = this.translate("unknown")
               if (task.actionType === 1) {
                  actionText = this.translate("navigation")
               }
               // else if (task.actionType === 2) {
               //    actionText = "取货"
               // } 
               else if (task.actionType === 3) {
                  actionText =
                     `${this.translate("auto_unload")}:${this.translate("wait")}:${task.wait || 0}${this.translate("second")}`
               }
               // else if (task.actionType === 4) {
               //    actionText = "人工"
               // }
               return actionText
            }
            return ""
         },
         translate(t, values) {
            if (typeof this.$t == "function") {
               const message = this.$t(`page.${t}`)
               if (values) {
                  return message.replace(/{(\d+)}/g, (match, index) => {
                     const value = values[index]
                     return value !== undefined ? value : match
                  })
               } else return message
            } else return t;
         },
      }
   }
</script>

<style lang="scss" scoped>
   .pages-task-item {

      width: 100%;
      display: flex;
      flex-direction: row;
      position: relative;
      align-items: center;
      flex-direction: column;

      .item-content {
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
      }

      .item-sub {
         display: flex;
         flex-direction: column;
         padding: 10rpx 30rpx 10rpx 50rpx;

         .sub-item {
            color: gray;
            padding: 10rpx;
            border-bottom: 1px solid #ddd;
            display: flex;
            flex-direction: row;

            .text {
               color: gray;
               padding: 10rpx;
            }
         }

         .sub-item:last-child {
            border-bottom: 0;
         }
      }

      .btn-no {
         display: flex;
         margin: 0 10rpx 0 20rpx;
         border-radius: 25rpx;
         background-color: #E6F7FF;
         color: #1890FF;
         width: 50rpx;
         height: 50rpx;
         line-height:54rpx ;
         line-height: 54rpx;
         justify-content: center;
         align-items: center;
         text-align: center;
@@ -184,7 +338,10 @@
      }

      .content {
         display: flex;
         flex-direction: column;
         flex: 1;
         min-width: 0;
         padding: 5px;

         .line {
@@ -196,15 +353,27 @@
            .title {
               font-size: 36rpx;
               font-weight: 600;
               min-width: 0;
               /* 关键：允许收缩到比内容还窄 */
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
            }

            .text {
               padding: 0 10px;
               font-size: 14px;
               color: #1ABC9C;
            .desc {
               flex: 1;
               color: gray;
               min-width: 0;
               /* 关键：允许收缩到比内容还窄 */
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
            }

            .cycle {
               color: gray;
               padding: 0 10rpx;
            }


         }
@@ -229,34 +398,19 @@
               color: #1890FF;

            }
            .disabled{

            .disabled {
               color: gray !important;
            }

         }
         .disabled{

         .disabled {
            color: gray;
         }


      }

      .btn-del {
         position: absolute;
         right: -80px;
         top: 0;
         padding: 0 8px;
         line-height: 100px;
         background-color: #CC001A;
         font-weight: 700;
         color: #fff;
         border: none;
         border-radius: 10px;
         border-bottom-right-radius: 0px;
         border-bottom-left-radius: 0px;
         border-top-left-radius: 0px;
         transform: translateX(100%);
         transition: transform 0.3s;
      }
   }
</style>