+ 工单处置流图

src/api/workorder.js

@@ -21,6 +21,10 @@ export const getWorkOrderDetail = async (id) => {
   return await get(`/orderWork/getDetail/${id}`)
 }
 
+export const getWorkOrderSteps = async (id) => {
+  return await get(`/orderWork/getHistory/${id}`)
+}
+
 /**
  * 提交工单
  * {"name":"CC","type":1,"level":2,"estimatedStartTime":"2024-11-29 00:00:00","estimatedEndTime":"2024-11-30 00:00:00","description":"fffssscccsss","source":3,"problemImg":"[{\"name\":\"login_bg.png\",\"url\":\"http://172.192.10.105:30011/aiot/aiot/202411/aiot/aiot/1732759747878/login_bg.png\",\"uid\":1732759748425,\"status\":\"success\"}]","problemFile":null}

src/components/imagesh/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <u--image
+      :showLoading="true"
+      :src="src"
+      width="160rpx"
+      height="150rpx"
+  />
+</template>
+
+<script setup lang="ts">
+import {computed, defineProps} from 'vue';
+import defaultImg from "@/static/aiot/default.png";
+
+const props = defineProps({
+  url: {
+    type: String,
+    default: defaultImg
+  },
+});
+const src = computed(() => {
+  if (props.url && props.url !== "") {
+    return props.url;
+  }
+  return defaultImg;
+});
+</script>
+<script lang="ts">
+export default {
+  options: {
+    styleIsolation: 'shared',
+    name: "images-h"
+  }
+}
+</script>
+<style lang="scss">
+</style>

src/components/steps/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="stepper-container" :class="orientation">
     <view v-for="(step, index) in props.steps" :key="'step' + index" class="step">
-      <view @click="handleStepClick(index)" class="step-side">
+      <view class="step-side">
         <view class="step-icon">{{ index + 1 }}</view>
         <view v-if="index < props.steps.length - 1" class="step-line"></view>
       </view>
@@ -18,10 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import {defineProps, ref, watch} from 'vue';
-
-
-const $emit = defineEmits(['update:active']);
+import {defineProps} from 'vue';
 
 const props = defineProps({
   orientation: {
@@ -32,25 +29,9 @@ const props = defineProps({
   steps: {
     type: Array,
     required: true
-  },
-  options: {
-    type: Object,
-    required: true
-  },
-  active: {
-    type: Number,
-    default: 0
-  },
+  }
 });
 
-watch(() => props.active, (newActive) => {
-  console.log('newActive', newActive);
-
-  activeIndex.value = newActive;
-})
-// let a = active
-const activeIndex = ref(props.active);
-
 const statusClasses = {
   pending: 'text-gray-500',
   current: 'text-blue-500',
@@ -63,19 +44,6 @@ const getStatusClass = (status) => {
   return statusClasses[status] || 'text-gray-500';
 }
 
-const handleStepClick = (index) => {
-  activeIndex.value = index;
-  $emit('update:active', index);
-  props.steps.forEach((step, i) => {
-    if (i < index) {
-      step.status = 'success'; // Completed steps
-    } else if (i === index) {
-      step.status = 'current'; // Current step
-    } else {
-      step.status = 'pending'; // Future steps
-    }
-  });
-}
 </script>
 <script lang="ts">
 export default {
@@ -105,9 +73,10 @@ export default {
 
 .stepper-container.vertical .step {
   display: flex;
+  width: 100%;
 
   &:last-child {
-    .step-icon{
+    .step-icon {
       background-color: $uni-bg-color;
       color: $uni-bg-color;
       border-width: 4rpx;
@@ -138,6 +107,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    width: 100%;
   }
 
   .title-info {
@@ -145,8 +115,9 @@ export default {
     color: #000000;
   }
 
-  .title-info {
-
+  .title-date {
+    margin-left: auto;
+    color: #909399;
   }
 }
 

src/pages/workbenchsub/device/detail.vue

@@ -17,7 +17,7 @@
             <view class="info-column">
               <label-text
                   label="所属产品"
-                  :text="formatTxt(state.deviceInfo.productName)"
+                    :text="formatTxt(state.deviceInfo.productName)"
               />
               <label-text
                   label="设备编码"

src/pages/workbenchsub/workorder/detail.vue

@@ -11,90 +11,90 @@
             <view class="info-column">
               <label-text
                   label="工单类型"
-                  text="告警"
+                  :text="valueToConst(WorkOrderTypes,state.orderInfo.type).label"
               />
               <label-text
                   label="工单号"
                   :line="2"
-                  text="GJ20241107000971"
+                  :text="state.orderInfo.code"
               />
               <label-text
                   label="紧急程度"
-                  text="一般"
+                  :text="valueToConst(WorkOrderLevel,state.orderInfo.status).label"
               />
               <label-text
                   label="是否逾期"
-                  text="处理预期"
+                  :text="getDeviceStatus(state.orderInfo)"
               />
             </view>
-            <u--image
-                :showLoading="true"
-                src="https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png"
-                width="160rpx"
-                height="150rpx"
-            />
+            <images-h :url="state.orderInfo.problemImgSingle"/>
           </view>
           <view class="line-info-wrap">
             <label-text
                 label="预计处理时间"
-                text="2023-01-14 16:34:23"
+                :text="state.orderInfo.estimatedStartTime"
             />
             <label-text
                 label="预计结束时间"
-                text="2023-01-14 16:34:23"
+                :text="state.orderInfo.estimatedEndTime"
             />
             <label-text
                 label="问题原因"
-                line="3"
+                line="2"
+                :text="formatTxt(state.orderInfo.reason)"
             />
             <label-text
                 label="解决方案"
-                line="3"
+                line="2"
+                :text="formatTxt(state.orderInfo.solution)"
             />
             <label-text
                 label="费用/材料"
-                line="3"
+                line="1"
+                :text="formatTxt(state.orderInfo.consumables)"
             />
             <label-text
                 label="是否需要补充材料"
-                text="否"
+                :text="state.orderInfo.rewrite ? '是': '否'"
             />
             <label-text
+                v-if="state.orderInfo.rewrite"
                 label="补充材料说明"
                 line="3"
+                :text="formatTxt(state.orderInfo.rewriteDes)"
             />
             <label-text
                 label="描述"
                 line="3"
-                text="这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱。"
+                :text="formatTxt(state.orderInfo.description)"
             />
           </view>
         </view>
       </template>
     </panel>
-    <panel>
+    <panel v-if="state.orderInfo.problemImg && state.orderInfo.problemImg.length>0">
       <template v-slot:header>
         <up-icon size="28rpx" :name="list"></up-icon>
         问题图片
       </template>
       <template v-slot:content>
         <view>
-          <up-album :urls="urls2" :autoWrap="true" :maxCount="8"></up-album>
+          <up-album :urls="state.orderInfo.problemImg" :autoWrap="true" :maxCount="8"></up-album>
         </view>
       </template>
     </panel>
-    <panel>
+    <panel v-if="state.orderInfo.solveImg && state.orderInfo.solveImg.length>0">
       <template v-slot:header>
         <up-icon size="28rpx" :name="list"></up-icon>
         处置图
       </template>
       <template v-slot:content>
         <view>
-          <up-album :urls="urls2" :autoWrap="true" :maxCount="8"></up-album>
+          <up-album :urls="state.orderInfo.solveImg" :autoWrap="true" :maxCount="8"></up-album>
         </view>
       </template>
     </panel>
-    <panel>
+    <panel v-if="state.steps.length>0">
       <template v-slot:header>
         <up-icon size="28rpx" :name="list"></up-icon>
         工单历程
@@ -102,16 +102,18 @@
       <template v-slot:content>
         <steps
             :orientation="'vertical'"
-            :steps="stepList"
-            :options="option"
-            :active="current"
-            @update:active="getActiveIndex">
+            :steps="state.steps"
+            style="width: 100%"
+        >
           <template #stepTitle="props">
-            <view class="title-info">{{ props.stepInfo.label }}</view>
-            <view class="title-date">2024-08-09 12:20:00</view>
+            <view class="title-info">{{ props.stepInfo.username }}</view>
+            <view class="title-date">{{ props.stepInfo.handleTime }}</view>
           </template>
-          <template #stepItem="stepInfo">
-            {{ JSON.stringify(stepInfo) }}
+          <template #stepItem="props">
+            <view class="step-content">
+              由{{ props.stepInfo.username }} &nbsp;{{ getStepInfo(props.stepInfo).content }}
+
+            </view>
           </template>
         </steps>
       </template>
@@ -135,40 +137,54 @@ import list from "@/static/aiot/list.svg";
 import Panel from "@/components/pannel/index.vue";
 import LabelText from "@/components/labeltext/index.vue";
 import Steps from "@/components/steps/index.vue";
-import {ref} from 'vue';
-
-const urls2 = ref([
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-  'https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png',
-]);
-const current = ref(0)
-const option = ref({
-  titleKey: "name",
-  content1Key: "details",
-  content2Key: "label"
+import {onMounted, reactive, ref} from 'vue';
+import {onLoad} from "@dcloudio/uni-app";
+import {getWorkOrderDetail, getWorkOrderSteps} from "@/api/workorder.js";
+import {valueToConst} from "@/common/consts/CommonConst.js";
+import {WorkOrderLevel, WorkOrderTypes} from "@/common/consts/WorkOrderConst.js";
+import {formatTxt, getImgs, getStepInfo} from "@/util/index.js";
+import ImagesH from "@/components/imagesh/index.vue";
+
+const order = ref('')
+const state = reactive({
+  orderInfo: {
+    problemImg: [],
+    solveImg: []
+  },
+  steps: []
+})
+onLoad((option) => {
+  order.value = option.id
+});
+onMounted(() => {
+  getWorkOrderDetail(order.value).then((data) => {
+    state.orderInfo = data
+    state.orderInfo.statusMsg = getDeviceStatus(data)
+    data.problemImg && (state.orderInfo.problemImg = getImgs(data.problemImg))
+    data.solveImg && (state.orderInfo.solveImg = getImgs(data.solveImg))
+    state.orderInfo.problemImgSingle = state.orderInfo.problemImg.length > 0 && state.orderInfo.problemImg[0]
+  })
+  getWorkOrderSteps(order.value).then((data) => {
+    state.steps = data
+  })
 })
-const stepList = ref([{
-  name: '进度一',
-  details: '描述一',
-  label: '测试'
-}, {
-  name: '进度二',
-  details: '描述二'
-}, {
-  name: '进度三',
-  details: '描述三'
-}, {
-  name: '进度四',
-  details: '描述四'
-}])
+const getDeviceStatus = (dataDetail) => {
+  let statusMsg = []
+  if (dataDetail.status === 1 && isLessThanNow(dataDetail.estimatedStartTime)) {
+    statusMsg.push('处理逾期')
+  }
+  if ((dataDetail.status === 1 || dataDetail.status === 2) && isLessThanNow(dataDetail.estimatedEndTime)) {
+    statusMsg.push('结束逾期')
+  }
+  return statusMsg.join('、')
+}
+const isLessThanNow = (date) => {
+  let str1 = new Date(date).getTime();
+  let str2 = new Date().getTime();
+  // 小于0则str1时间小，大于0则str1时间大
+  return str1 - str2 < 0
+}
+
 </script>
 
 

src/util/index.js

@@ -111,7 +111,7 @@ export const DateFormat = {
 
 export const getDevImg = (devImg) => {
   if (!devImg) {
-    return "";
+    return defaultImg;
   }
   const parse = JSON.parse(devImg);
   if (parse.length > 0 && parse[0].url) {
@@ -121,10 +121,52 @@ export const getDevImg = (devImg) => {
     return defaultImg;
   }
 };
+export const getImgs = (items) => {
+  return JSON.parse(items).filter(item => !!item.url).map((item) => {
+    return getImgUrl(item.url)
+  })
+}
+
+export const getImgUrl = (img) => {
+  if (!img) {
+    return defaultImg;
+  }
+  if (img) {
+    return img.replace(Rules.domainPort, config.imgCdn);
+  } else {
+    return defaultImg;
+  }
+};
 
 export const formatTxt = (txt) => {
   if (!txt) {
     return "--";
   }
   return txt;
+}
+
+export const getStepInfo = (step) => {
+  switch (step.type) {
+    case 1:
+      return {type: 1, name: '创建工单', content: '创建工单'};
+    case 2:
+      return {type: 2, name: '受理工单', content: '受理工单'};
+    case 3:
+      return {type: 3, name: '结束工单', content: '结束工单'};
+    case 4:
+      return {type: 4, name: '报废工单', content: '报废工单'};
+    case 5: {
+      const param = JSON.parse(step.param)
+      if (param.desc) {
+        return {type: 5, name: '指派工单', content: `指派此工单给 ${param.user} 原因：${param.desc}`};
+      }
+      return {type: 5, name: '指派工单', content: `指派此工单给 ${param.user}`};
+    }
+    case 6:
+      return {type: 6, name: '修改工单', content: '修改工单'};
+    case 7:
+      return {type: 7, name: '处理工单', content: '处理工单'};
+    default:
+      return {type: 0, name: '未知操作', content: '未知操作'};
+  }
 }