+ 详情面板

src/App.vue

@@ -1,8 +1,10 @@
 <script>
+import {getToken} from "@/util"
 
 export default {
   onLaunch: function () {
     console.log('App Launch')
+    this.overRoute()
   },
   onShow: async function () {
     console.log('App Show')
@@ -11,6 +13,24 @@ export default {
   },
   onHide: function () {
     console.log('App Hide')
+  },
+  methods: {
+    overRoute() {
+      uni.onAppRoute(res => {
+        const token = getToken() //获取token
+        const pages = getCurrentPages(),  //获取页面栈
+            page = pages[pages.length - 1];  //当前页面
+        const urlList = [
+          'pages/login/index'
+        ]; //白名单
+        //不在白名单且token不存在的情况跳转登录
+        if (!urlList.includes(page.route) && !token) {
+          uni.reLaunch({
+            url: '/pages/login/index'
+          })
+        }
+      })
+    }
   }
 }
 </script>
@@ -23,5 +43,10 @@ export default {
 
 page {
   background-color: #f5f5f5;
+
+  > view.info-wrap {
+    width: 680rpx;
+    margin: 14rpx auto 0;
+  }
 }
 </style>

src/common/consts/WorkOrderConst.js

@@ -0,0 +1,38 @@
+export const WorkOrderStat = {
+    ALL:{
+        label: '全部',
+        code: "all",
+        value: null,
+        color: 'primary'
+    },
+    END: {
+        label: '已完成',
+        code: "end",
+        value: 3,
+        color: 'success'
+    },
+    SCRAP: {
+        label: '已废弃',
+        code: "scrap",
+        value: 4,
+        color: 'danger'
+    },
+    IN_HANDLE: {
+        label: '处理中',
+        code: "inhandle",
+        value: 2,
+        color: 'info'
+    },
+    UN_HANDLE: {
+        label: '未处理',
+        code: "unhandle",
+        value: 1,
+        color: 'warning'
+    },
+    UN_CONFIRMED: {
+        label: '未确认',
+        code: "unconfirmed",
+        value: 0,
+        color: 'default'
+    }
+}

src/common/demo.scss

@@ -1,55 +1,84 @@
 .u-block {
-	padding: 14px;
-	&__section {
-		margin-bottom:10px;
-	}
-	&__title {
-		margin-top:10px;
-		font-size: 15px;
-		color: $u-content-color;
-		margin-bottom:10px;
-	}
-	&__flex {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-	}
+  padding: 14px;
+
+  &__section {
+    margin-bottom: 10px;
+  }
+
+  &__title {
+    margin-top: 10px;
+    font-size: 15px;
+    color: $u-content-color;
+    margin-bottom: 10px;
+  }
+
+  &__flex {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+  }
 }
 
 // 使用了cell组件的icon图片样式
 .u-cell-icon {
-	width: 36rpx;
-	height: 36rpx;
-	margin-right: 8rpx;
+  width: 36rpx;
+  height: 36rpx;
+  margin-right: 8rpx;
 }
 
 .u-page {
-	padding: 15px 15px 40px 15px;
-	&__item {
-		flex: 1;
-		// margin-bottom: 23px;
-		&__title {
-			font-size: 14px;
-			color: rgb(143, 156, 162);
-			// margin-bottom: 8px;
-			@include flex;
-		}
-	}
+  padding: 15px 15px 40px 15px;
+
+  &__item {
+    flex: 1;
+    // margin-bottom: 23px;
+    &__title {
+      font-size: 14px;
+      color: rgb(143, 156, 162);
+      // margin-bottom: 8px;
+      @include flex;
+    }
+  }
 }
 
 .u-demo-block {
-	flex: 1;
-	margin-bottom: 23px;
-	
-	&__content {
-		@include flex(column);
-	}
-	
-	&__title {
-		font-size: 14px;
-		color: rgb(143, 156, 162);
-		margin-bottom: 8px;
-		@include flex;
-	}
+  flex: 1;
+  margin-bottom: 23px;
+
+  &__content {
+    @include flex(column);
+  }
+
+  &__title {
+    font-size: 14px;
+    color: rgb(143, 156, 162);
+    margin-bottom: 8px;
+    @include flex;
+  }
 }
 
+.stat-ctl {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+
+  .u-page__tag-item {
+    margin-top: 14rpx;
+    margin-right: 14rpx;
+
+    .u-tag {
+      background-color: $uni-text-color-grey !important;
+      border: transparent;
+
+      &.u-tag--primary--plain--fill {
+        background: $uni-color-primary !important;
+
+        .u-tag__text {
+          color: $uni-bg-color;
+        }
+      }
+    }
+
+  }
+}

src/components/labeltext/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="label-text-wrap">
+    <view class="label-item">
+      {{ label }}：
+    </view>
+    <view class="text-item" :style="{'-webkit-line-clamp': line}">
+      {{ text }}
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "label-text",
+  options: {styleIsolation: 'shared'},
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    text: {
+      type: String,
+      default: "--"
+    },
+    line: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {}
+  },
+
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+.label-text-wrap {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  font-size: 24rpx;
+
+  .label-item {
+    color: #000000;
+    font-weight: bold;
+  }
+
+  .text-item {
+    flex: 1;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    -webkit-box-orient: vertical;
+    color: $uni-text-color;
+  }
+}
+
+</style>

src/components/pannel/index.vue

@@ -25,6 +25,7 @@ export default {
 <style lang="scss">
 .panel-wrap {
   width: 100%;
+  font-size: 28rpx;
   border-radius: 20rpx;
   background-color: #fff;
   display: flex;

src/components/steps/index.vue

@@ -0,0 +1,221 @@
+<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-icon">{{ index + 1 }}</view>
+        <view v-if="index < props.steps.length - 1" class="step-line"></view>
+      </view>
+      <view class="step-content">
+        <view :class="getStatusClass(step.status)" class="step-title">
+          <slot name="stepTitle" :stepInfo="step"></slot>
+        </view>
+        <view class="content-wrap">
+          <slot name="stepItem" :stepInfo="step"></slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {defineProps, ref, watch} from 'vue';
+
+
+const $emit = defineEmits(['update:active']);
+
+const props = defineProps({
+  orientation: {
+    type: String,
+    default: 'horizontal',
+    validator: (value) => ['horizontal', 'vertical'].includes(value)
+  },
+  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',
+  success: 'text-green-500',
+  error: 'text-red-500',
+  disabled: 'text-gray-300'
+};
+
+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 {
+  options: {
+    styleIsolation: 'shared',
+    name: "step-line"
+  }
+}
+</script>
+<style lang="scss">
+.stepper-container {
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  margin-top: $uni-block-gap;
+}
+
+.stepper-container.horizontal {
+  flex-direction: row;
+}
+
+.stepper-container.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.stepper-container.vertical .step {
+  display: flex;
+
+  &:last-child {
+    .step-icon{
+      background-color: $uni-bg-color;
+      color: $uni-bg-color;
+      border-width: 4rpx;
+      box-sizing: border-box;
+    }
+  }
+}
+
+.stepper-container.vertical .step-side {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+
+.stepper-container.vertical .step-line {
+  width: 2rpx;
+  height: calc(100% - 30rpx);
+  background-color: $uni-color-primary;
+}
+
+.content-wrap {
+  margin: $uni-text-gap 0;
+}
+
+.step-title {
+  > view {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .title-info {
+    font-weight: bold;
+    color: #000000;
+  }
+
+  .title-info {
+
+  }
+}
+
+.step-icon {
+  width: 30rpx;
+  height: 30rpx;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  border-radius: 30rpx;
+  border: 3rpx solid $uni-color-primary;
+  background-color: $uni-color-primary;
+  color: #f2f1f1;
+  font-weight: bold;
+}
+
+.step-content {
+  flex: 1;
+  height: auto;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 0 $uni-text-gap;
+}
+
+.step-connector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.step-line {
+  background-color: $uni-color-primary;
+}
+
+.step-number {
+  font-weight: bold;
+}
+
+.text-gray-500 {
+  color: #6b7280;
+}
+
+.text-blue-500 {
+  color: #4299e1;
+}
+
+.text-green-500 {
+  color: #48bb78;
+}
+
+.text-red-500 {
+  color: #f56565;
+}
+
+.text-gray-300 {
+  color: #d1d5db;
+}
+
+.bg-green-500 {
+  background-color: #48bb78;
+}
+
+.bg-blue-500 {
+  background-color: #4299e1;
+}
+
+.bg-gray-500 {
+  background-color: #d1d5db;
+}
+</style>

src/pages.json

@@ -30,7 +30,8 @@
     {
       "path": "pages/workbench/index",
       "style": {
-        "navigationBarTitleText": "工作台"
+        "navigationBarTitleText": "工作台",
+        "enablePullDownRefresh": true
       }
     },
     {
@@ -61,6 +62,24 @@
           "style": {
             "navigationBarTitleText": "详细信息"
           }
+        },
+        {
+          "path": "workorder/list",
+          "style": {
+            "navigationBarTitleText": "设备工单"
+          }
+        },
+        {
+          "path": "workorder/detail",
+          "style": {
+            "navigationBarTitleText": "工单处置"
+          }
+        },
+        {
+          "path": "workorder/submit",
+          "style": {
+            "navigationBarTitleText": "工单提报"
+          }
         }
       ]
     }

src/pages/workbench/appctl.vue

@@ -49,15 +49,18 @@ const ctlItems = ref([
   {
     name: alarm,
     title: '设备告警',
-    color: '#0079fe'
+    color: '#0079fe',
+    target: "/pages/workbenchsub/device/detail"
   }, {
     name: order,
     title: '设备工单',
-    color: '#6a6bcd'
+    color: '#6a6bcd',
+    target: "/pages/workbenchsub/workorder/list"
   }, {
     name: submitOrder,
     title: '故障提报',
-    color: '#ff7f5d'
+    color: '#ff7f5d',
+    target: "/pages/workbenchsub/workorder/submit"
   }
 ]);
 

src/pages/workbench/index.vue

@@ -66,6 +66,12 @@ export default {
       return style;
     }
   },
+  onPullDownRefresh() {
+    console.log('refresh');
+    setTimeout(function () {
+      uni.stopPullDownRefresh();
+    }, 100);
+  },
   methods: {
     submit() {
       if (this.$u.test.mobile(this.tel)) {
@@ -80,7 +86,6 @@ export default {
 
 <style lang="scss">
 .wrap {
-  font-size: 28rpx;
   background: linear-gradient(to bottom, #0079fe 500rpx, transparent 500rpx);
   color: #fefefe;
 
@@ -130,6 +135,7 @@ export default {
       margin-top: 30rpx;
       width: 100%;
       height: 200rpx;
+      font-size: 28rpx;
 
       .order-summery-item {
         display: flex;

src/pages/workbench/usrsubmit.vue

@@ -4,11 +4,11 @@
       <up-icon size="45rpx" :name="tag"></up-icon>
       我的提报
       <up-text
-          color="#aaaaaa"
-          size="18rpx"
-          style="margin-left: auto;color:#aaaaaa;flex: inherit;width: auto;" text="查看更多">
+          color="#007aff"
+          size="24rpx"
+          style="margin-left: auto;flex: inherit;width: auto;" text="查看更多">
       </up-text>
-      <up-icon size="20rpx" name="arrow-right-double" color="#aaaaaa"></up-icon>
+      <up-icon size="20rpx" name="arrow-right-double" color="#007aff"></up-icon>
     </template>
     <template #content>
       <view class="u-page" style="padding-bottom: 0">

src/pages/workbenchsub/device/detail.vue

@@ -1,14 +1,171 @@
 <template>
-  <view>
-
+  <view class="device-info-wrap info-wrap">
+    <panel>
+      <template v-slot:header>
+        <up-icon size="28rpx" :name="list"></up-icon>
+        设备信息
+      </template>
+      <template v-slot:content>
+        <view class="order-info">
+          <view class="mix-wrap">
+            <view class="info-column">
+              <label-text
+                  label="所属产品"
+                  text="华设智能机箱"
+              />
+              <label-text
+                  label="设备编码"
+                  :line="2"
+                  text="jx001"
+              />
+              <label-text
+                  label="设备类型"
+                  text="直连设备"
+              />
+              <label-text
+                  label="设备厂家"
+                  text="华为"
+              />
+            </view>
+            <u--image
+                :showLoading="true"
+                src="https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png"
+                width="160rpx"
+                height="150rpx"
+            />
+          </view>
+          <view class="line-info-wrap">
+            <label-text
+                label="设备心跳超时"
+                text="3600"
+            />
+            <label-text
+                label="第三方设备编码"
+                text="oC2swfGhCqWu"
+            />
+            <label-text
+                label="最新在线时间"
+                text="2023-01-14 16:34:23"
+            />
+            <label-text
+                label="最后通讯时间"
+                text="2023-01-14 16:34:23"
+            />
+            <label-text
+                label="位置"
+                text="南京市秦淮区紫云大道9号"
+            />
+            <label-text
+                label="描述"
+                line="3"
+                text="这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱。"
+            />
+          </view>
+        </view>
+      </template>
+    </panel>
+    <panel>
+      <template v-slot:header>
+        <up-icon size="28rpx" :name="list"></up-icon>
+        运行状态
+      </template>
+      <template v-slot:content>
+        <view>
+          <label-text
+              label="设备心跳超时"
+              text="3600"
+          />
+        </view>
+      </template>
+    </panel>
+    <up-tabbar
+        :fixed="true"
+        :placeholder="false"
+        :safeAreaInsetBottom="false"
+    >
+      <view class="warning-btn">报废</view>
+      <view class="def-btn">禁用</view>
+      <view class="def-btn">编辑</view>
+    </up-tabbar>
   </view>
 </template>
 
 <script setup lang="ts">
 
+import list from "@/static/aiot/list.svg";
+import Panel from "@/components/pannel/index.vue";
+import LabelText from "@/components/labeltext/index.vue";
+import {ref} from 'vue';
+
+const option = ref({
+  titleKey: "name",
+  content1Key: "details",
+  content2Key: "label"
+})
 </script>
 
 
-<style scoped lang="scss">
+<style lang="scss">
+.device-info-wrap {
+  padding-bottom: 140rpx;
+
+  .panel-wrap {
+    margin-bottom: $uni-block-gap;
+  }
+
+  .mix-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .info-column {
+      display: flex;
+      flex: 1;
+      align-items: flex-start;
+      justify-content: flex-start;
+      flex-direction: column;
+    }
+  }
+
+  .panel-content {
+    box-sizing: border-box;
+    padding: 15px 15px 15px 15px;
+  }
+
+  .label-text-wrap {
+    margin-top: $uni-text-gap;
+  }
+
+  .stepper-container {
+    .title-date {
+      margin-left: auto;
+    }
+  }
+
+  .u-tabbar__content__item-wrapper {
+    padding-bottom: 40rpx;
+
+
+    > view {
+      box-sizing: border-box;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $uni-bg-color;
+
+      &:not(:last-child) {
+        border-right: 2rpx solid #fefefe47;
+      }
+    }
+
+    .warning-btn {
+      background-color: $uni-color-error;
+    }
 
+    .def-btn {
+      background-color: $uni-color-primary;
+    }
+  }
+}
 </style>

src/pages/workbenchsub/device/list.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="device-list">
     <up-search v-model="searchValue"></up-search>
-    <view class="device-stat-ctl">
+    <view class="stat-ctl">
       <view class="u-page__tag-item" v-for="(item, index) in DeviceState" :key="index">
         <up-tag
             :text="item.label"
@@ -31,7 +31,8 @@
               <view>
                 <up-text :lines="1" text="设备名称： 机箱" size="24rpx"/>
                 <up-tag text="标签" plain size="mini" bgColor="red" class="tag-stat"></up-tag>
-                <up-link text="详情>" @click="onDetailClick"></up-link>
+                <up-text text="详情>" color="#007aff" style="flex:none;width: auto"
+                         @click="()=>onDetailClick(item)"></up-text>
               </view>
               <view>
                 <up-text :lines="1" text="设备编码：44010200492000000002" size="24rpx"/>
@@ -52,6 +53,7 @@
 import {ref} from "vue"
 import {DeviceState} from '@/common/consts/DeviceConst.js'
 import {onLoad} from '@dcloudio/uni-app';
+import {navigateTo} from '@/util/index.js'
 
 onLoad(() => {
   loadmore();
@@ -71,8 +73,11 @@ const loadmore = () => {
     indexList.value.push({});
   }
 };
-const onDetailClick = () => {
-
+const onDetailClick = (item) => {
+  navigateTo({
+    url: "/pages/workbenchsub/device/detail",
+    param: item
+  })
 }
 </script>
 
@@ -89,34 +94,6 @@ const onDetailClick = () => {
     }
   }
 
-
-  .device-stat-ctl {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    margin-top: 18rpx;
-
-    .u-page__tag-item {
-      &:not(:first-child) {
-        margin-left: 14rpx;
-      }
-
-      .u-tag {
-        background-color: $uni-text-color-grey !important;
-        border: transparent;
-
-        &.u-tag--primary--plain--fill {
-          background: $uni-color-primary !important;
-
-          .u-tag__text {
-            color: $uni-bg-color;
-          }
-        }
-      }
-
-    }
-  }
-
   .u-page-list {
     margin-top: 14rpx;
   }

src/pages/workbenchsub/workorder/detail.vue

@@ -0,0 +1,238 @@
+<template>
+  <view class="work-order-wrap info-wrap">
+    <panel>
+      <template v-slot:header>
+        <up-icon size="28rpx" :name="list"></up-icon>
+        工单信息
+      </template>
+      <template v-slot:content>
+        <view class="order-info">
+          <view class="mix-wrap">
+            <view class="info-column">
+              <label-text
+                  label="工单类型"
+                  text="告警"
+              />
+              <label-text
+                  label="工单号"
+                  :line="2"
+                  text="GJ20241107000971"
+              />
+              <label-text
+                  label="紧急程度"
+                  text="一般"
+              />
+              <label-text
+                  label="是否逾期"
+                  text="处理预期"
+              />
+            </view>
+            <u--image
+                :showLoading="true"
+                src="https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png"
+                width="160rpx"
+                height="150rpx"
+            />
+          </view>
+          <view class="line-info-wrap">
+            <label-text
+                label="预计处理时间"
+                text="2023-01-14 16:34:23"
+            />
+            <label-text
+                label="预计结束时间"
+                text="2023-01-14 16:34:23"
+            />
+            <label-text
+                label="问题原因"
+                line="3"
+            />
+            <label-text
+                label="解决方案"
+                line="3"
+            />
+            <label-text
+                label="费用/材料"
+                line="3"
+            />
+            <label-text
+                label="是否需要补充材料"
+                text="否"
+            />
+            <label-text
+                label="补充材料说明"
+                line="3"
+            />
+            <label-text
+                label="描述"
+                line="3"
+                text="这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱。"
+            />
+          </view>
+        </view>
+      </template>
+    </panel>
+    <panel>
+      <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>
+        </view>
+      </template>
+    </panel>
+    <panel>
+      <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>
+        </view>
+      </template>
+    </panel>
+    <panel>
+      <template v-slot:header>
+        <up-icon size="28rpx" :name="list"></up-icon>
+        工单历程
+      </template>
+      <template v-slot:content>
+        <steps
+            :orientation="'vertical'"
+            :steps="stepList"
+            :options="option"
+            :active="current"
+            @update:active="getActiveIndex">
+          <template #stepTitle="props">
+            <view class="title-info">{{ props.stepInfo.label }}</view>
+            <view class="title-date">2024-08-09 12:20:00</view>
+          </template>
+          <template #stepItem="stepInfo">
+            {{ JSON.stringify(stepInfo) }}
+          </template>
+        </steps>
+      </template>
+    </panel>
+    <up-tabbar
+        :fixed="true"
+        :placeholder="false"
+        :safeAreaInsetBottom="false"
+    >
+      <view class="warning-btn">作废</view>
+      <view class="def-btn">处理</view>
+      <view class="def-btn">指派</view>
+      <view class="def-btn">受理</view>
+    </up-tabbar>
+  </view>
+</template>
+
+<script setup lang="ts">
+
+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"
+})
+const stepList = ref([{
+  name: '进度一',
+  details: '描述一',
+  label: '测试'
+}, {
+  name: '进度二',
+  details: '描述二'
+}, {
+  name: '进度三',
+  details: '描述三'
+}, {
+  name: '进度四',
+  details: '描述四'
+}])
+</script>
+
+
+<style lang="scss">
+.work-order-wrap {
+  padding-bottom: 140rpx;
+
+  .panel-wrap {
+    margin-bottom: $uni-block-gap;
+  }
+
+  .mix-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .info-column {
+      display: flex;
+      flex: 1;
+      align-items: flex-start;
+      justify-content: flex-start;
+      flex-direction: column;
+    }
+  }
+
+  .panel-content {
+    box-sizing: border-box;
+    padding: 15px 15px 15px 15px;
+  }
+
+  .label-text-wrap {
+    margin-top: $uni-text-gap;
+  }
+
+  .stepper-container {
+    .title-date {
+      margin-left: auto;
+    }
+  }
+
+  .u-tabbar__content__item-wrapper {
+    padding-bottom: 40rpx;
+
+
+    > view {
+      box-sizing: border-box;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $uni-bg-color;
+
+      &:not(:last-child) {
+        border-right: 2rpx solid #fefefe47;
+      }
+    }
+
+    .warning-btn {
+      background-color: $uni-color-error;
+    }
+
+    .def-btn {
+      background-color: $uni-color-primary;
+    }
+  }
+}
+</style>

src/pages/workbenchsub/workorder/list.vue

@@ -0,0 +1,155 @@
+<template>
+  <view class="device-list info-wrap">
+    <up-search v-model="searchValue"></up-search>
+    <view class="stat-ctl">
+      <view class="u-page__tag-item" v-for="(item, index) in WorkOrderStat" :key="index">
+        <up-tag
+            :text="item.label"
+            :plain="selectTag === item.label"
+            :plainFill="true"
+            bgColor="#007aff"
+            :name="item.value"
+            @click="()=>radioClick(item.label)"
+        >
+        </up-tag>
+      </view>
+    </view>
+    <view class="u-page-list" style="padding-bottom: 100rpx">
+      <up-list>
+        <up-list-item
+            v-for="(item, index) in indexList"
+            :key="index"
+        >
+          <view class="item-content">
+            <u--image
+                :showLoading="true"
+                src="https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png"
+                width="160rpx"
+                height="150rpx"
+            />
+            <view class="content-info">
+              <view>
+                <up-text :lines="1" text="户外温度高于15度" size="24rpx"/>
+                <up-tag text="标签" plain size="mini" bgColor="red" class="tag-stat"></up-tag>
+                <up-text text="详情>" color="#007aff" style="flex:none;width: auto" @click="()=>onDetailClick(item)"></up-text>
+              </view>
+              <view>
+                <up-text :lines="1" text="工单号：GJ20241107000971" size="24rpx"/>
+
+              </view>
+              <view>
+                <up-text :lines="1" text="提交时间：2023-01-14 16:34:23" size="24rpx"/>
+              </view>
+            </view>
+          </view>
+        </up-list-item>
+      </up-list>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue"
+import {WorkOrderStat} from '@/common/consts/WorkOrderConst.js'
+import {onLoad} from '@dcloudio/uni-app';
+import {navigateTo} from "@/util";
+
+onLoad(() => {
+  loadmore();
+});
+let searchValue = ref("")
+let indexList = ref([
+  {}
+])
+let selectTag = ref(WorkOrderStat.ALL.label)
+
+function radioClick(label) {
+  selectTag.value = label
+}
+
+const loadmore = () => {
+  for (let i = 0; i < 10; i++) {
+    indexList.value.push({});
+  }
+};
+const onDetailClick = (item) => {
+  navigateTo({
+    url: "/pages/workbenchsub/workorder/detail",
+    param: item
+  })
+}
+</script>
+
+<style lang="scss">
+.device-list {
+
+  .u-search__content {
+    background: $uni-bg-color !important;
+
+    .u-search__content__input {
+      background-color: $uni-bg-color !important;
+    }
+  }
+
+  .u-page-list {
+    margin-top: 14rpx;
+  }
+
+  .item-content {
+    width: 100%;
+    border-radius: $comm-border-radius;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: flex-start;
+    background: $uni-bg-color;
+    margin-bottom: 14rpx;
+
+    padding: 14rpx;
+
+    .content-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      margin-left: 14rpx;
+
+      > view {
+        font-size: inherit;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        .tag-stat {
+          margin-left: auto;
+          margin-right: 14rpx;
+
+          .u-tag--mini {
+            height: 35rpx;
+          }
+
+          .u-tag--primary--plain {
+            border-color: transparent !important;
+
+            .u-tag__text--primary--plain {
+              color: $uni-bg-color !important;
+              font-size: 18rpx !important;
+            }
+          }
+        }
+
+
+        .u-link {
+          flex: none;
+        }
+
+        &:not(:first-child) {
+          margin-top: 14rpx;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/workbenchsub/workorder/submit.vue

@@ -0,0 +1,14 @@
+<template>
+  <view>
+
+  </view>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+
+<style scoped lang="scss">
+
+</style>

src/uni.scss

@@ -77,4 +77,7 @@ $uni-font-size-title: 20px;
 $uni-color-subtitle: #555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
-$uni-font-size-paragraph: 15px;
+$uni-font-size-paragraph: 15px;
+
+$uni-text-gap: 14rpx;
+$uni-block-gap: 30rpx;

src/util/index.js

@@ -1,3 +1,5 @@
+import {route} from '@/uni_modules/uview-plus';
+
 const weekdays = [
     '星期日',
     '星期一',
@@ -10,4 +12,55 @@ const weekdays = [
 
 export function formatWeekday(index) {
     return weekdays[index]
-}
+}
+
+export function navigateTo({url = "", param = {}}) {
+    route({
+        url,
+        params: param,
+    })
+}
+
+export const getStorageObj = (key) => {
+    const json = uni.getStorageSync(key);
+    if (!json) {
+        return null;
+    }
+    return JSON.parse(json);
+};
+export const getUserInfo = () => {
+    const userInfo = getStorageObj('userInfo');
+    if (!userInfo) {
+        return null;
+    }
+    return userInfo;
+};
+export const setUserInfo = (userInfo) => {
+    setStorageObj('userInfo', userInfo);
+};
+export const exit = () => {
+    uni.clearStorageSync();
+};
+export const getToken = () => {
+    const token = getStorageObj('token');
+    if (!token) {
+        return null;
+    }
+    return token;
+};
+export const authLogin = (callback) => {
+    const user = getUserInfo();
+    if (!user) {
+        uni.navigateTo({
+            url: '/pasb/pages/login/index',
+        });
+        return;
+    }
+    callback(user);
+};
+export const storageKey = {
+    USER_INFO: 'userInfo',
+    TOKEN: 'token',
+    regtheme: 'regtheme',
+    regmeet: 'regmeet',
+};