+ 设备信息

.env.dev

@@ -1,5 +1,5 @@
 //.env.dev
 
-VITE_BASE_URL=http://172.192.10.105:30016/api
+VITE_BASE_URL=http://aiot.xt.wenhq.top:8083/api
 
 VITE_IMG_CDN=http://aiot.xt.wenhq.top:8083/

src/api/device.js

@@ -17,3 +17,13 @@ export const getDeviceDetail = async (id) => {
 export const getDeviceMeta = async (id) => {
   return await get(`/device/getMetadataInfo/${id}`);
 }
+export const forbidDevice = async (ids = []) => {
+  return await post('/device/forbidDevice', ids);
+}
+export const startDevice = async (ids = []) => {
+  return await post('/device/startDevice', ids);
+}
+
+export const scrapDevice = async (data) => {
+  return await post('/device/insertScrapDevice', data);
+}

src/api/workorder.js

@@ -34,3 +34,7 @@ export const getWorkOrderSteps = async (id) => {
 export const submitOrderWork = async (params) => {
   return await post('/orderWork/save', params);
 }
+
+export const scrapWorkOrder = async (id) => {
+  return await get(`/orderWork/scrap/${id}`)
+}

src/common/demo.scss

@@ -113,4 +113,36 @@
       font-size: 20rpx !important;
     }
   }
+}
+
+.common-form {
+  .u-form-item__body__left__content .u-form-item__body__left__content__required {
+    display: flex;
+    position: static;
+    align-items: center;
+    justify-content: flex-end;
+    margin-right: $uni-text-gap;
+  }
+
+  .u-form-item__body .u-form-item__body__left {
+    align-items: flex-start;
+  }
+
+  .u-demo-block__title {
+    color: $uni-text-black;
+  }
+
+  input {
+    text-align: right !important;
+  }
+
+  textarea {
+    text-align: right !important;
+  }
+
+  .u-button--info {
+    background-color: $uni-color-primary !important;
+    border-radius: 40rpx !important;
+    color: $uni-text-color-inverse !important;
+  }
 }

src/pages.json

@@ -54,7 +54,8 @@
         {
           "path": "device/list",
           "style": {
-            "navigationBarTitleText": "设备列表"
+            "navigationBarTitleText": "设备列表",
+            "enablePullDownRefresh": true
           }
         },
         {

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="设备编码"
@@ -105,10 +105,127 @@
         :placeholder="false"
         :safeAreaInsetBottom="false"
     >
-      <view class="warning-btn">报废</view>
-      <view class="def-btn">禁用</view>
-      <view class="def-btn">编辑</view>
+      <view class="warning-btn" @click="state.handleForm=true">报废</view>
+      <view class="def-btn"
+            v-if="DeviceState.UNACTIVATED.value !== state.deviceInfo.status"
+            @click="state.showDisableModal = true">禁用
+      </view>
+      <view
+          class="def-btn"
+          v-if="DeviceState.UNACTIVATED.value === state.deviceInfo.status"
+          @click="state.showEnableModal = true"
+      >激活
+      </view>
     </up-tabbar>
+    <up-action-sheet
+        :show="state.handleForm"
+        @close="state.handleForm = false"
+        title="报废设备"
+        :round="10"
+    >
+      <view class="action-content common-form">
+        <up-form
+            labelPosition="left"
+            :model="state.model"
+            :rules="state.rules"
+            ref="formRef"
+            labelWidth="120"
+        >
+          <up-form-item
+              label="设备名称"
+              borderBottom
+              :required="true"
+          >
+            <up-input
+                :modelValue="state.deviceInfo.deviceNickname"
+                border="none"
+                disabled
+            ></up-input>
+          </up-form-item>
+          <up-form-item
+              label="设备编码"
+              borderBottom
+              :required="true"
+          >
+            <up-input
+                :modelValue="state.deviceInfo.name"
+                border="none"
+                disabled
+            ></up-input>
+          </up-form-item>
+
+          <up-form-item
+              label="报废时间"
+              prop="order.startDate"
+              borderBottom
+              :required="true"
+              @click="state.showStartClendar = true; hideKeyboard()"
+          >
+            <up-input
+                :modelValue="timestampToDate(state.model.order.startDate)"
+                disabled
+                disabledColor="#ffffff"
+                placeholder="请选择预计开始日期"
+                border="none"
+            ></up-input>
+            <template #right>
+              <up-icon
+                  name="arrow-right"
+              ></up-icon>
+            </template>
+          </up-form-item>
+          <up-form-item
+              label="报废原因"
+              borderBottom
+          >
+            <up-textarea
+                placeholder="报废原因"
+                v-model="state.model.order.desc"
+            ></up-textarea>
+          </up-form-item>
+          <up-button @click="submit" style="margin-top: 20rpx;">提交</up-button>
+        </up-form>
+      </view>
+    </up-action-sheet>
+
+    <up-modal
+        :show="state.showDisableModal"
+        title="禁用设备"
+        :closeOnClickOverlay="true"
+        :showCancelButton="true"
+        @close="state.showDisableModal = false"
+        @cancel="state.showDisableModal = false"
+        @confirm="onConfirmDisable"
+    >
+      <view class="modal-content">
+        设备禁用后将导致该设备无法连接
+      </view>
+    </up-modal>
+
+    <up-modal
+        :show="state.showEnableModal"
+        title="启用设备"
+        :closeOnClickOverlay="true"
+        :showCancelButton="true"
+        @close="state.showEnableModal = false"
+        @cancel="state.showEnableModal = false"
+        @confirm="onConfirmEnable"
+    >
+      <view class="modal-content">
+        设备禁用后将导致该设备无法连接
+      </view>
+    </up-modal>
+
+    <up-datetime-picker
+        :show="state.showStartClendar"
+        v-model="state.model.order.startDate"
+        mode="datetime"
+        @close="state.showStartClendar = false"
+        :closeOnClickOverlay="true"
+        @confirm="(e)=>confirm(e,'showStartClendar')"
+        @cancel="state.showStartClendar = false"
+    ></up-datetime-picker>
+    <up-toast ref="uToastRef"></up-toast>
   </view>
 </template>
 
@@ -118,20 +235,35 @@ import list from "@/static/aiot/list.svg";
 import Panel from "@/components/pannel/index.vue";
 import LabelText from "@/components/labeltext/index.vue";
 import {onMounted, reactive, ref} from 'vue';
-import {getDeviceDetail, getDeviceMeta} from "@/api/device.js";
+import {forbidDevice, getDeviceDetail, getDeviceMeta, scrapDevice, startDevice} from "@/api/device.js";
 import {onLoad} from "@dcloudio/uni-app";
-import {formatTxt, getDevImg} from "@/util/index.js";
+import {DateFormat, formatTxt, getDevImg, hideKeyboard, reloadPage, timestampToDate} from "@/util/index.js";
 import {valueToConst} from "@/common/consts/CommonConst.js";
 import {DeviceState} from "@/common/consts/DeviceConst.js";
+import dayjs from "dayjs";
 
+const uToastRef = ref(null)
 const state = reactive({
+  handleForm: false,
+  showDisableModal: false,
+  showEnableModal: false,
   deviceInfo: {},
   metaInfo: {
     dataMetaRunInfo: [],
     dataOnlineRunInfo: [],
   },
+  model: {
+    order: {
+      startDate: dayjs().valueOf(),
+      desc: '',
+    },
+  },
+  rules: {
+    'order.startDate': [
+      {required: true, message: '请选择报废日期'},
+    ],
+  },
 });
-const metaInfo = reactive({});
 const deviceId = ref('')
 onLoad((option) => {
   deviceId.value = option.id
@@ -149,6 +281,46 @@ onMounted(() => {
     }
   })
 });
+const onConfirmDisable = () => {
+  forbidDevice([deviceId.value]).then(() => {
+    uni.showToast({title: '操作成功', icon: "success"});
+    state.showDisableModal = false;
+  })
+};
+const onConfirmEnable = () => {
+  state.showEnableModal = false;
+  startDevice([deviceId.value]).then(() => {
+    uni.showToast({title: '操作成功', icon: "success"});
+    state.showEnableModal = false;
+  })
+}
+const confirm = (e, type) => {
+  state[type] = false;
+};
+const submit = () => {
+  hideKeyboard()
+  let formData = {
+    id: deviceId.value,
+    isScrap: true,
+    scrapReason: state.model.order.desc,
+    scrapTimeStr: timestampToDate(state.model.order.startDate, DateFormat.YYYYMMDDHHMMSS),
+  };
+
+  scrapDevice(formData).then(() => {
+    state.handleForm = false;
+    uToastRef.value.show({
+      type: 'default',
+      message: "操作成功",
+      complete() {
+        uni.$emit('refreshData', {refresh: true});
+        uni.navigateBack({
+          delta: 1
+        })
+      }
+    });
+  })
+}
+
 </script>
 
 
@@ -230,5 +402,9 @@ onMounted(() => {
     align-items: center;
     justify-content: space-between;
   }
+
+  .action-content {
+    padding: 0 $uni-pop-padding;
+  }
 }
 </style>

src/pages/workbenchsub/device/list.vue

@@ -66,32 +66,55 @@
 import {ref} from "vue"
 import {DeviceState} from '@/common/consts/DeviceConst.js'
 import {valueToConst} from '@/common/consts/CommonConst.js'
-import {onLoad} from '@dcloudio/uni-app';
+import {onLoad, onPullDownRefresh, onShow} from '@dcloudio/uni-app';
 import {formatTxt, getDevImg, navigateTo,} from '@/util/index.js'
 import {getDeviceList} from "@/api/device.js";
 
+let searchValue = ref("")
+let indexList = ref([])
+let selectTag = ref(DeviceState.ALL.value)
+let loadmoreFlag = ref(true)
+let loading = ref(false)
 const page = ref(1)
+
 onLoad(() => {
   page.value = 1
   loading.value = true;
   loadmore();
 });
-let searchValue = ref("")
-let indexList = ref([])
-let selectTag = ref(DeviceState.ALL.value)
-let loadmoreFlag = ref(true)
-let loading = ref(false)
+onPullDownRefresh(() => {
+  refreshPage(() => {
+    uni.stopPullDownRefresh();
+  })
+})
+
+onShow(() => {
+  uni.$on('refreshData', (res) => {
+    if (res.refresh) {
+      refreshPage()
+    }
+  })
+});
+
+const refreshPage = (callback = () => {
+}) => {
+  page.value = 1
+  indexList.value = []
+  loading.value = true;
+  loadmore(callback);
+}
 
 function radioClick(item) {
   selectTag.value = item.value
 }
 
 
-const loadmore = async () => {
+const loadmore = async (callback = null) => {
   const {records} = await getDeviceList({
     page: page.value,
     deviceNickName: searchValue.value,
     deviceState: selectTag.value,
+    isScrap: false
   })
   if (records && records.length > 0) {
     indexList.value = indexList.value.concat(records)
@@ -103,6 +126,7 @@ const loadmore = async () => {
     loadmoreFlag.value = false;
   }
   loading.value = false;
+  callback && callback();
 };
 
 const scrolltolower = () => {

src/pages/workbenchsub/workorder/submit.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="order-form info-wrap">
+  <view class="order-form info-wrap common-form">
     <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
     <up-form
         labelPosition="left"
@@ -165,9 +165,9 @@
 import {reactive, ref} from 'vue'
 import {submitOrderWork, uploadOrderFile} from '@/api/workorder.js'
 import dayjs from 'dayjs';
-import {DateFormat, reloadPage} from "@/util/index.js";
+import {DateFormat, hideKeyboard, reloadPage, timestampToDate} from "@/util/index.js";
 import {WorkOrderLevel, WorkOrderTypes} from "@/common/consts/WorkOrderConst.js";
-import {valueToConst} from "@/common/consts/CommonConst";
+import {valueToConst} from "@/common/consts/CommonConst.js";
 
 const state = reactive({
   showOrderType: false,
@@ -224,9 +224,7 @@ Object.keys(WorkOrderLevel).forEach(key => {
 });
 // 使用 ref 创建响应式引用
 const formRef = ref(null);
-const hideKeyboard = () => {
-  uni.hideKeyboard()
-}
+
 const orderTypeSelect = (item) => {
   state.model.order.type = item.id;
   state.showOrderType = false;
@@ -241,7 +239,7 @@ const deletePic = (event) => {
   state.model.order.files.splice(event.index, 1)
 }
 const formatDate = (date) => {
-  return dayjs(date).format(DateFormat.YYYYMMDDHHMM)
+  return timestampToDate(date)
 }
 const confirm = (e, type) => {
   state[type] = false;
@@ -303,25 +301,5 @@ const submit = () => {
   background-color: #fff;
   border-radius: $uni-text-gap;
   padding: $uni-text-gap;
-
-  .u-form-item__body__left__content .u-form-item__body__left__content__required {
-    display: flex;
-    position: static;
-    align-items: center;
-    justify-content: flex-end;
-    margin-right: $uni-text-gap;
-  }
-
-  .u-form-item__body .u-form-item__body__left {
-    align-items: flex-start;
-  }
-
-  .u-demo-block__title {
-    color: $uni-text-black;
-  }
-
-  input {
-    text-align: right !important;
-  }
 }
 </style>

src/uni.scss

@@ -82,3 +82,5 @@ $uni-font-size-paragraph: 15px;
 
 $uni-text-gap: 14rpx;
 $uni-block-gap: 30rpx;
+
+$uni-pop-padding: 50rpx;

src/util/index.js

@@ -2,6 +2,7 @@ import {route} from '@/uni_modules/uview-plus';
 import {Rules} from "@/common/consts/CommonConst";
 import config from "@/common/config";
 import defaultImg from "@/static/aiot/default.png";
+import dayjs from "dayjs";
 
 const weekdays = [
   '星期日',
@@ -169,4 +170,12 @@ export const getStepInfo = (step) => {
     default:
       return {type: 0, name: '未知操作', content: '未知操作'};
   }
+}
+
+export const hideKeyboard = () => {
+  uni.hideKeyboard()
+}
+
+export const timestampToDate = (date, format=DateFormat.YYYYMMDDHHMM) => {
+  return dayjs(date).format(format)
 }