+ 设备详情

src/api/device.js

@@ -1,4 +1,4 @@
-import {post} from "@/util/request/index.js";
+import {get, post} from "@/util/request/index.js";
 import {Page} from "@/common/consts/CommonConst";
 
 export const getDeviceList = async ({page = Page.page, size = Page.size, ...params}) => {
@@ -8,3 +8,12 @@ export const getDeviceList = async ({page = Page.page, size = Page.size, ...para
     ...params
   });
 }
+
+
+export const getDeviceDetail = async (id) => {
+  return await get(`/device/getDeviceDetail/${id}`)
+}
+
+export const getDeviceMeta = async (id) => {
+  return await get(`/device/getMetadataInfo/${id}`);
+}

src/common/demo.scss

@@ -96,3 +96,21 @@
     }
   }
 }
+
+.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: 20rpx !important;
+    }
+  }
+}

src/pages/workbenchsub/device/detail.vue

@@ -4,6 +4,12 @@
       <template v-slot:header>
         <up-icon size="28rpx" :name="list"></up-icon>
         设备信息
+        <up-tag
+            :text="state.deviceInfo.statusName"
+            plain
+            size="mini"
+            :bgColor="valueToConst(DeviceState,state.deviceInfo.status).color"
+            class="tag-stat"/>
       </template>
       <template v-slot:content>
         <view class="order-info">
@@ -11,54 +17,51 @@
             <view class="info-column">
               <label-text
                   label="所属产品"
-                  text="华设智能机箱"
+                  :text="formatTxt(state.deviceInfo.productName)"
               />
               <label-text
                   label="设备编码"
                   :line="2"
-                  text="jx001"
+                  :text="formatTxt(state.deviceInfo.name)"
               />
               <label-text
                   label="设备类型"
-                  text="直连设备"
+                  :text="formatTxt(state.deviceInfo.deviceTypeName)"
               />
               <label-text
                   label="设备厂家"
-                  text="华为"
+                  :text="formatTxt(state.deviceInfo.manufactor)"
               />
             </view>
             <u--image
                 :showLoading="true"
-                src="https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png"
+                :src="getDevImg(state.deviceInfo.devImg)"
                 width="160rpx"
                 height="150rpx"
             />
           </view>
           <view class="line-info-wrap">
             <label-text
-                label="设备心跳超时"
-                text="3600"
-            />
-            <label-text
                 label="第三方设备编码"
-                text="oC2swfGhCqWu"
+                :text="formatTxt(state.deviceInfo.thirdDevCode)"
             />
             <label-text
                 label="最新在线时间"
-                text="2023-01-14 16:34:23"
+                :text="formatTxt(state.deviceInfo.lastOnlineTime)"
             />
             <label-text
                 label="最后通讯时间"
-                text="2023-01-14 16:34:23"
+                :text="formatTxt(state.deviceInfo.lastReportTime)"
             />
             <label-text
                 label="位置"
-                text="南京市秦淮区紫云大道9号"
+                line="2"
+                :text="formatTxt(state.deviceInfo.locationStr)"
             />
             <label-text
                 label="描述"
                 line="3"
-                text="这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱，这是华设智能机箱。"
+                :text="formatTxt(state.deviceInfo.description)"
             />
           </view>
         </view>
@@ -70,12 +73,31 @@
         运行状态
       </template>
       <template v-slot:content>
-        <view>
-          <label-text
-              label="设备心跳超时"
-              text="3600"
-          />
-        </view>
+        <up-cell-group :border="false">
+          <up-cell
+              v-for="item in state.metaInfo.dataMetaRunInfo"
+              :title="`${item.name}(${item.identifier})`"
+              size="small"
+          >
+            <template v-slot:label>
+              <view class="meta-data">
+                <up-text
+                    :lines="1"
+                    :text="`${item.data}${item.data && JSON.parse(item.dataType).specs.unit ? JSON.parse(item.dataType).specs.unit:''}`"
+                    size="30rpx"
+                    :bold="true"
+                >
+                </up-text>
+                <up-text
+                    :lines="1"
+                    :text="formatTxt(item.timeStamp)"
+                    size="20rpx"
+                >
+                </up-text>
+              </view>
+            </template>
+          </up-cell>
+        </up-cell-group>
       </template>
     </panel>
     <up-tabbar
@@ -95,13 +117,38 @@
 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"
-})
+import {onMounted, reactive, ref} from 'vue';
+import {getDeviceDetail, getDeviceMeta} from "@/api/device.js";
+import {onLoad} from "@dcloudio/uni-app";
+import {formatTxt, getDevImg} from "@/util/index.js";
+import {valueToConst} from "@/common/consts/CommonConst.js";
+import {DeviceState} from "@/common/consts/DeviceConst.js";
+
+const state = reactive({
+  deviceInfo: {},
+  metaInfo: {
+    dataMetaRunInfo: [],
+    dataOnlineRunInfo: [],
+  },
+});
+const metaInfo = reactive({});
+const deviceId = ref('')
+onLoad((option) => {
+  deviceId.value = option.id
+});
+onMounted(() => {
+  getDeviceDetail(deviceId.value).then((data) => {
+    state.deviceInfo = data
+  })
+  getDeviceMeta(deviceId.value).then((res) => {
+    if (res.metadataList) {
+      state.metaInfo.dataMetaRunInfo = res.metadataList.filter((item) => item.disply !== false);
+    }
+    if (res.onlineList.type) {
+      state.metaInfo.dataOnlineRunInfo = res.onlineList
+    }
+  })
+});
 </script>
 
 
@@ -167,5 +214,21 @@ const option = ref({
       background-color: $uni-color-primary;
     }
   }
+
+  .u-cell-group {
+    .u-cell {
+      margin-bottom: $uni-text-gap;
+
+      .u-cell__body {
+        padding: 0;
+      }
+    }
+  }
+
+  .meta-data {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 </style>

src/pages/workbenchsub/device/list.vue

@@ -56,7 +56,6 @@
             size="24rpx"
             color="gray"
         >
-
         </up-text>
       </up-list>
     </view>
@@ -163,25 +162,6 @@ const onDetailClick = (item) => {
         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;
         }

src/util/request/index.js

@@ -7,68 +7,68 @@ import {http} from '@/uni_modules/uview-plus'
 import {getToken} from "@/util";
 //  初始化请求配置
 const initRequest = (vm) => {
-    http.setConfig((defaultConfig) => {
-        /* defaultConfig 为默认全局配置 */
-        defaultConfig.baseURL = config.baseUrl /* 根域名 */
-        defaultConfig.sslVerify = false
-        defaultConfig.validateStatus = (statusCode) => {
-            // statusCode 必存在。此处示例为全局默认配置
-            return statusCode >= 200 && statusCode < 300 || statusCode === 401 || statusCode === 500;
-        }
-        return defaultConfig
-    })
-    requestInterceptors()
-    responseInterceptors()
+  http.setConfig((defaultConfig) => {
+    /* defaultConfig 为默认全局配置 */
+    defaultConfig.baseURL = config.baseUrl /* 根域名 */
+    defaultConfig.sslVerify = false
+    defaultConfig.validateStatus = (statusCode) => {
+      // statusCode 必存在。此处示例为全局默认配置
+      return statusCode >= 200 && statusCode < 300 || statusCode === 401 || statusCode === 500;
+    }
+    return defaultConfig
+  })
+  requestInterceptors()
+  responseInterceptors()
 }
 export const postWidthHeader = async (url, data, header = {}) => {
-    return await http.post(url, data, {
-        header: {
-            'Content-Type': 'application/json',
-            ...header,
-        },
-    })
+  return await http.post(url, data, {
+    header: {
+      'Content-Type': 'application/json',
+      ...header,
+    },
+  })
 }
 
 export const post = async (url, data, header = {}) => {
-    const token = getToken();
-    return await postWidthHeader(url, data, {
-        'Authorization': token ? `bearer ${token}` : '',
-        ...header,
-    })
+  const token = getToken();
+  return await postWidthHeader(url, data, {
+    'Authorization': token ? `bearer ${token}` : '',
+    ...header,
+  })
 }
-export const get = async (url, params, header = {}) => {
-    const token = getToken();
-    return await http.get(url, {
-        params,
-        header: {
-            'Content-Type': 'application/json',
-            'Authorization': token ? `bearer ${token}` : '',
-            ...header,
-        },
-    })
+export const get = async (url, params = {}, header = {}) => {
+  const token = getToken();
+  return await http.get(url, {
+    params,
+    header: {
+      'Content-Type': 'application/json',
+      'Authorization': token ? `bearer ${token}` : '',
+      ...header,
+    },
+  })
 }
 export const uploadFilePromise = (url, file, param) => {
-    return new Promise((resolve, reject) => {
-        let a = uni.uploadFile({
-            url: `${config.baseUrl}${url}`, // 仅为示例，非真实的接口地址
-            filePath: file,
-            name: 'file',
-            formData: {
-                ...param
-            },
-            header: {
-                'Authorization': `bearer ${getToken()}`
-            },
-            success: (res) => {
-                setTimeout(() => {
-                    resolve(res.data.data)
-                }, 1000)
-            }
-        });
-    })
+  return new Promise((resolve, reject) => {
+    let a = uni.uploadFile({
+      url: `${config.baseUrl}${url}`, // 仅为示例，非真实的接口地址
+      filePath: file,
+      name: 'file',
+      formData: {
+        ...param
+      },
+      header: {
+        'Authorization': `bearer ${getToken()}`
+      },
+      success: (res) => {
+        setTimeout(() => {
+          resolve(res.data.data)
+        }, 1000)
+      }
+    });
+  })
 }
 export {
-    initRequest,
+  initRequest,
 
 }