消防物联网3.0功能深化

src/api/business/fireIot/deviceManage.js

@@ -30,7 +30,7 @@ export function dmpProductAttribute(param) {
 // 设备多属性历史数据请求
 export function historyMetrics(param) {
     return request({
-        url: "/data-tsdb-proxy/dataQuery/historyMetrics",
+        url: "/data-tsdb-proxy/dataQuery/history",
         method: "POST",
         data: param,
     });
@@ -52,9 +52,9 @@ export function getList(data) {
         method: 'POST',
         data,
     })
-  }
+}
+
 
-  
 //设备离线状态更新
 export function deviceStatus(params) {
     return request({
@@ -62,4 +62,13 @@ export function deviceStatus(params) {
         method: 'get',
         params,
     })
-  }
+}
+
+//命令下发
+export function control(params) {
+    return request({
+        url: '/service-iot/deviceHttp/control',
+        method: 'get',
+        params,
+    })
+}

src/pages/business/door/list/index.vue

@@ -37,22 +37,10 @@
 
       <u-grid class="p10" :border="true" :col="2" gap="10px">
         <u-grid-item class="p10 radius" bgColor="#fff" v-for="(item, index) in dataList" :key="index" @click="doorSetting(item)">
-          <view
-            :style="{
-              fontSize: '14px',
-              fontWeight: 600,
-              marginBottom: '20px',
-              marginRight: 'auto',
-            }"
-          >
+          <view :style="{ fontSize: '14px', fontWeight: 600, marginBottom: '20px', marginRight: 'auto' }">
             {{ item.deviceName }}
           </view>
-          <view
-            class="flex"
-            :style="{
-              width: '100%',
-            }"
-          >
+          <view class="flex" :style="{ width: '100%' }">
             <image style="width: 40px; height: 40px" :src="'/static/images/door/lock.png'" mode="aspectFill"></image>
             <view class="iconfont oaIcon-open_door ml-auto mtb-auto font35" @click.stop="controlStore.openDoor(item, true)"></view>
           </view>

src/pages/business/fireIot/deviceManage/components/deviceDetails.vue

@@ -11,98 +11,88 @@
     :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
   >
     <template #default>
-      <view style="background: linear-gradient(to bottom, #fafbff, #e7f3ff)">
-        <view class="flex" style="padding: 15px 15px 0">
-          <view style="margin: auto auto auto 0">
-            <view style="font-size: 16px; color: #000"> {{ detailData.deviceName }} </view>
+      <view class="header-area p15">
+        <view class="header-area-top flex mb15">
+          <view class="title"> {{ commonStore.deviceManageData.deviceName }} </view>
+          <view class="status" :style="{ backgroundColor: commonStore.deviceManageData.deviceStatus == 1 ? '#16bf00' : 'red' }">
+            {{ commonStore.deviceManageData.deviceStatus == 1 ? "在线" : "离线" }}
           </view>
+        </view>
 
-          <view style="margin: auto 0 auto 0">
-            <view
-              style="margin-left: 20px; font-size: 12px; color: #ffffff; padding: 2px 10px; border-radius: 20px; line-height: 20px"
-              :style="{ fontSize: '15px', backgroundColor: detailData.deviceStatus == 1 ? '#16bf00' : 'red' }"
-            >
-              {{ detailData.deviceStatus == 1 ? "在线" : "离线" }}
+        <u-row class="header-area-center p0">
+          <u-col span="9">
+            <view class="header-area-center-item" v-for="data in listData" :key="data">
+              <span class="title">{{ data.title }}：</span>
+              <span class="value">{{ commonStore.deviceManageData[data.prop] ? commonStore.deviceManageData[data.prop] : "-" }}</span>
             </view>
-          </view>
-        </view>
-        <view class="p15" style="color: rgba(0, 0, 0, 0.7)">
-          <!-- <uni-section class="block mb10" title="基本信息" type="line"></uni-section> -->
-          <view class="basicBox p0">
-            <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
-
-            <u-row>
-              <u-col span="9" class="basicLeft">
-                <view v-for="po in dataList" :key="po">
-                  <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.title }}:</view>
-                  <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
-                </view>
-              </u-col>
-              <u-col span="3">
-                <image style="width: 80px; height: 80px; margin: auto 15px auto 0" :src="'/static/images/device/jg.png'" mode="aspectFill"></image>
-              </u-col>
-            </u-row>
-          </view>
-        </view>
+          </u-col>
+          <u-col span="3">
+            <image style="width: 80px; height: 80px; display: flex; margin: auto" :src="'/static/images/device/jg.png'" mode="aspectFill"></image>
+          </u-col>
+        </u-row>
       </view>
 
-      <view class="bg-white p15 mb15">
+      <view class="body-area">
         <!-- 分段器组件 -->
-        <view class="app-subsection">
-          <u-subsection :list="list" mode="subsection" :current="tabPosition" @change="tabPositionChange" style="width: 100%; font-size: 16px"></u-subsection>
+        <view class="subsection">
+          <view class="subsection-item" v-for="(li, index) in tabs.list" :key="index" :class="{ active: index == tabs.value }" @click="tabPositionChange(index)">{{ li }}</view>
+        </view>
+
+        <view class="realTimeData-area flex plr15" v-if="tabs.value == 0">
+          <view class="realTimeData-area-item" v-for="item in realTimeData" :key="item">
+            <view class="title">{{ item.attributeName }}</view>
+            <view class="value">
+              <span v-if="item.attributeDict.length > 0">
+                {{ Number.isFinite(item.value) ? proxy.$common.mapping("name", "value", item.value, item.attributeDict) : item.value ? item.value : "-" }}
+              </span>
+              <span v-else>
+                {{ Number.isFinite(item.value) ? (Number.isInteger(item.value) ? item.value : item.value.toFixed(2)) : item.value ? item.value : "-" }}
+              </span>
+              <span style="color: #333; width: auto; font-size: 14px">{{ item.attributeUnit }} </span>
+            </view>
+          </view>
         </view>
 
-        <view v-if="tabPosition == 1">
+        <view class="plr15" v-if="tabs.value == 1">
           <view class="flex" :style="{ color: proxy.$settingStore.themeColor.color }">
             <view class="ml10" style="margin-left: auto" @click="open">选择时间</view>
             <view class="ml10" @click="modalShow = true">筛选</view>
           </view>
 
-          <chart :currentDateList="currentDateList"></chart>
-
-          <!-- <view class="tableType1">
-            <u-row>
-              <u-col span="12">
-                <view>指数</view>
-              </u-col>
-            </u-row>
-            <u-row v-for="(co, index) in content4" :key="index">
-              <u-col span="12">
-                <view>{{ co.name1 }}</view>
-              </u-col>
-            </u-row>
-          </view> -->
+          <chart :currentDateList="ecahrtsDate"></chart>
         </view>
-        <view v-if="tabPosition == 0">
-          <u-empty v-if="realTimeDataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
-          <view v-else class="flex" style="flex-wrap: wrap; line-height: 36px; font-size: 16px">
-            <view style="width: 100%; border-bottom: 1px solid #f3f3f3" v-for="realTime in realTimeDataList" :key="realTime">
-              {{ realTime.attributeName + "：" }}
-              <view style="color: #000; display: inline-block">{{ realTime.value }}</view>
-              {{ realTime.attributeUnit ? realTime.attributeUnit : "" }}
+
+        <view class="cotrol-area plr15" v-if="tabs.value == 2">
+          <view class="cotrol-area-item p10 mb15" v-for="(item, index) in deviceCotrolData" :key="index">
+            <u-select
+              v-if="item.commandDict.length > 0"
+              v-model:current="item.commandValue"
+              :label="item.commandName"
+              :options="item.commandDict"
+              keyName="value"
+              labelName="name"
+              @select="selectItem(item)"
+            >
+              <template #text>
+                <view class="title"> {{ item.commandName }}（{{ proxy.$common.mapping("name", "value", item.commandValue, item.commandDict) }}）</view>
+              </template>
+            </u-select>
+
+            <view class="title" v-else>
+              <view class="flex mb10">
+                <span style="margin: auto 0"> {{ item.commandName }}</span>
+                <span style="margin: auto 0 auto auto"> {{ item.commandValue }}</span>
+              </view>
+              <u-slider v-model="item.commandValue" :min="item.minimum" :max="item.maximum" height="5px" @change="selectItem(item)"></u-slider>
             </view>
           </view>
         </view>
-
-        <view v-if="tabPosition == 2">
-          <br />
-          <u-row gutter="10" style="justify-content: center">
-            <u-empty v-if="deviceCotrolList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
-
-            <u-col v-else span="3" v-for="(item, index) in deviceCotrolList" :key="index">
-              <view class="demo-layout" @click="goAction(item)">{{ item.commandName }}</view>
-            </u-col>
-          </u-row>
-          <br />
-          <br />
-          <br />
-        </view>
       </view>
 
       <u-modal :show="modalShow" @confirm="modalShow = false" @close="modalShow = false" :closeOnClickOverlay="true">
         <view class="slot-content">
           <u-checkbox-group
-            v-model="checkboxValueList"
+            v-model="checkbox.value"
             @change="
               (val) => {
                 checkboxChange(val);
@@ -111,7 +101,7 @@
             :size="14"
             :activeColor="proxy.$settingStore.themeColor.color"
           >
-            <u-checkbox class="mb10" v-for="option in checkboxDataList" :key="option" :label="option.attributeName" :name="option.attributeCode"> </u-checkbox>
+            <u-checkbox class="mb10" v-for="option in checkbox.list" :key="option" :label="option.attributeName" :name="option.attributeCode"> </u-checkbox>
           </u-checkbox-group>
         </view>
       </u-modal>
@@ -126,7 +116,7 @@
 import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject, watch } from "vue";
 /*----------------------------------接口引入-----------------------------------*/
-import { dmpDeviceInfo, dmpProductAttribute, historyMetrics, last, getList } from "@/api/business/fireIot/deviceManage.js";
+import { dmpProductAttribute, historyMetrics, last, getList, control } from "@/api/business/fireIot/deviceManage.js";
 /*----------------------------------组件引入-----------------------------------*/
 import chart from "./chart.vue";
 /*----------------------------------store引入-----------------------------------*/
@@ -136,72 +126,47 @@ import { useStores, commonStores } from "@/store/modules/index";
 const { proxy } = getCurrentInstance();
 const commonStore = commonStores();
 /*----------------------------------变量声明-----------------------------------*/
-const dataList = ref([
-  {
-    title: "设备类型",
-    value: commonStore.deviceDetailsArray.productName,
-  },
-  {
-    title: "设备编号",
-    value: commonStore.deviceDetailsArray.deviceId,
+const state = reactive({
+  listData: [
+    { title: "设备类型", prop: "productName" },
+    { title: "设备编号", prop: "deviceId" },
+    { title: "SIM卡号", prop: "simCode" },
+    { title: "安装位置", prop: "installAddress" },
+    { title: "添加时间", prop: "createdTime" },
+  ],
+
+  tabs: {
+    list: ["实时数据", "历史数据", "指令操作"],
+    value: 0,
   },
-  {
-    title: "物联网卡号",
-    value: commonStore.deviceDetailsArray.simCode,
-  },
-  {
-    title: "安装位置",
-    value: commonStore.deviceDetailsArray.installAddress,
-  },
-  {
-    title: "添加时间",
-    value: commonStore.deviceDetailsArray.createdTime ? commonStore.deviceDetailsArray.createdTime.replace("T", " ") : "",
-  },
-]);
 
-const checkboxDataList = ref([]); //复选框渲染数据存储
-const checkboxValueList = ref([]); //复选框值数据存储
-
-const realTimeDataList = ref([]); //实时数据存储
-const tableDataList = ref([]); //表格数据存储
-const currentDateList = ref([]); //图表数据存储
+  metrics: [], //属性编号数据存储
+  metricsValue: {}, //属性编号值数据存储
+  realTimeData: [], //实时数据存储
+  ecahrtsDate: [], //图表数据存储
+  deviceCotrolData: [], //设备调试数据存储
+  checkbox: {
+    list: [], //复选框渲染数据存储
+    value: [], //复选框值数据存储
+  },
+});
+const { listData, tabs, metrics, metricsValue, realTimeData, ecahrtsDate, deviceCotrolData, checkbox } = toRefs(state);
 
 const modalShow = ref(false); //模态框显示隐藏
-
 const calendar = ref(null);
-const calendarStartTime = ref(""); //日历开始时间
-const calendarEndTime = ref(""); //日历结束时间
+const calendarStartTime = ref(proxy.$dayjs().format("YYYY-MM-DD")); //日历开始时间
+const calendarEndTime = ref(proxy.$dayjs().format("YYYY-MM-DD")); //日历结束时间
 const productId = ref(0); //产品id
 const deviceId = ref(0); //设备id
-const detailData = ref({}); //设备详情数据存储
-const deviceCotrolList = ref([]); //设备调试数据存储
-function open() {
-  calendar.value.open();
-}
 
 /**
  * @初始化
  */
-
-/**
- * @详情查询
- * @api接口查询
- */
-function dmpDeviceInfoApi() {
-  dmpDeviceInfo({ productId: productId.value, deviceId: deviceId.value, current: 1, size: 10 }).then((requset) => {
-    if (requset.status === "SUCCESS") {
-      dataList.value[0].value = requset.data.records[0].deviceName;
-      dataList.value[1].value = requset.data.records[0].deviceId;
-      dataList.value[2].value = requset.data.records[0].simCode;
-      dataList.value[3].value = requset.data.records[0].installAddress;
-      dataList.value[4].value = requset.data.records[0].createdTime ? requset.data.records[0].createdTime.replace("T", " ") : requset.data.records[0].createdTime;
-      detailData.value = requset.data.records[0];
-    }
-  });
-}
-
 function init() {
-  dmpDeviceInfoApi();
+  state.metrics = [];
+  state.realTimeData = [];
+  state.checkbox.list = [];
+
   dmpProductAttribute({
     current: 1,
     size: 100,
@@ -210,63 +175,74 @@ function init() {
     deviceId: deviceId.value,
   }).then((requset) => {
     if (requset.status === "SUCCESS") {
-      checkboxDataList.value = requset.data.records;
-      realTimeDataList.value = requset.data.records;
-
-      var array = [];
-
-      requset.data.records.forEach((el) => {
-        array.push(el.attributeCode);
+      requset.data.records.forEach((item) => {
+        item.attributeDict = item.attributeDict ? JSON.parse(item.attributeDict) : [];
+        state.metrics.push(item.attributeCode.toLowerCase());
+        state.realTimeData.push(item);
+        state.checkbox.list.push(item);
       });
 
       last({
-        deviceUUId: detailData.value.deviceUuid,
-        metrics: array,
-      }).then((requsets) => {
-        if (requsets.status === "SUCCESS") {
-          realTimeDataList.value.forEach((el) => {
-            el.value = 0;
-            requsets.data.forEach((e) => {
-              if (el.attributeCode === e.metric) {
-                el.value = e.value;
-              }
-            });
+        metrics: state.metrics,
+        deviceuuid: [commonStore.deviceManageData.deviceUuid],
+      }).then((requset) => {
+        if (requset.status != "SUCCESS") return;
+        state.metricsValue = requset.data[0].metrics;
+        Object.keys(state.metricsValue).forEach((key) => {
+          state.realTimeData.forEach((el) => {
+            if (el.attributeCode.toLowerCase() === key) {
+              el.value = state.metricsValue[key];
+            }
           });
-        }
+        });
       });
     }
   });
 }
 
 function deviceControlData() {
+  state.deviceCotrolData = [];
   getList({
     current: 1,
     size: 10,
-    productCode: detailData.value.productCode,
+    productCode: commonStore.deviceManageData.productCode,
   }).then((response) => {
-    deviceCotrolList.value = response.data.records;
-    // console.log(response.data.records)
-    // dataList.value = response.data.records;
-    // state.total = response.data.total;
-    // state.loading = false;
+    response.data.records.forEach((e) => {
+      e.commandDict = e.commandDict ? JSON.parse(e.commandDict) : [];
+      e.commandValue = state.metricsValue[e.commandCode.toLowerCase()];
+      state.deviceCotrolData.push(e);
+    });
+  });
+}
+
+function selectItem(e) {
+  var params = {
+    commandCode: e.commandCode,
+    commandValue: e.commandValue,
+    productCode: e.productCode,
+    deviceUuid: commonStore.deviceManageData.deviceUuid,
+    categoryType: commonStore.deviceManageData.categoryType,
+    gatewayUuid: commonStore.deviceManageData.gatewayUuid,
+  };
+  control(params).then((res) => {
+    init();
+    proxy.$modal.msg(res.data.message);
   });
 }
 
 /**
  * @tabs切换change事件
  */
-const list = ref(["实时数据", "历史数据", "设备调试"]);
-const tabPosition = ref(0);
+
 function tabPositionChange(index) {
-  tabPosition.value = index;
+  state.tabs.value = index;
 }
 
 /**
  * @checkbox选中change事件
  */
 function checkboxChange(value) {
-  checkboxValueList.value = value;
-
+  state.checkbox.value = value;
   historyMetricsApi();
 }
 
@@ -287,32 +263,30 @@ function historyMetricsApi() {
   historyMetrics({
     startTime: calendarStartTime.value ? calendarStartTime.value + " 00:00:00" : calendarStartTime.value,
     endTime: calendarEndTime.value ? calendarEndTime.value + " 23:59:59" : calendarEndTime.value,
-    deviceUUId: detailData.value.deviceUuid,
-    // deviceId: commonStore.deviceDetailsArray.deviceId,
-    // deviceType: commonStore.deviceDetailsArray.deviceType,
-    metrics: checkboxValueList.value,
+    deviceuuid: [commonStore.deviceManageData.deviceUuid],
+    metrics: state.checkbox.value.length > 0 ? state.checkbox.value : state.metrics,
   }).then((requset) => {
     if (requset.status === "SUCCESS") {
-      currentDateList.value = requset.data;
+      var metrics = requset.data[0].metrics;
 
-      checkboxDataList.value.forEach((el) => {
-        currentDateList.value.forEach((e) => {
-          if (el.attributeCode == e.metric) {
+      state.checkbox.list.forEach((el) => {
+        metrics.forEach((e) => {
+          if (el.attributeCode.toLowerCase() == e.metric) {
             e.attributeName = el.attributeName;
           }
         });
       });
 
-      currentDateList.value.forEach((el) => {
+      metrics.forEach((el) => {
+        el.data = [];
         if (el.metricItems.length > 0) {
-          el.data = [];
           el.metricItems.forEach((e) => {
             el.data.push([e.timestamp, e.value]);
           });
-        } else {
-          el.data = [];
         }
       });
+
+      state.ecahrtsDate = metrics;
     }
   });
 }
@@ -321,6 +295,10 @@ function goAction(row) {
   proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/goAction?productCode=${row.productCode}&commandCode=${row.commandCode}&deviceId=${deviceId.value}`);
 }
 
+function open() {
+  calendar.value.open();
+}
+
 onReady(() => {});
 
 onShow(() => {
@@ -344,7 +322,7 @@ onLoad((options) => {
 });
 
 watch(
-  () => tabPosition.value,
+  () => state.tabs.value,
   (val) => {
     if (val == 2) {
       deviceControlData();
@@ -354,28 +332,128 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-uni-page-body {
-  background-color: #fff;
-}
+.header-area {
+  border-radius: 10px;
+  background: linear-gradient(to bottom, #fafbff, #e7f3ff);
+
+  &-top {
+    justify-content: space-between;
+
+    .title {
+      font-size: 18px;
+      color: #000;
+      font-weight: 600;
+    }
+    .status {
+      font-size: 15px;
+      color: #ffffff;
+      padding: 2px 10px;
+      border-radius: 20px;
+      line-height: 22px;
+    }
+  }
 
-.basicBox {
-  font-size: 16px;
-  .basicLeft view {
-    display: inline-block;
+  &-center {
+    width: 100%;
+    text-align: left;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.7);
+
+    &-item {
+      > span {
+        display: inline-block;
+        line-height: 25px;
+      }
+
+      .title,
+      .value {
+        padding: 0px 5px 0px 5px;
+      }
+    }
+  }
+}
+.body-area {
+  .realTimeData-area {
+    flex-wrap: wrap;
     line-height: 30px;
-    .subsection__item__text {
-      font-size: 16px !important;
+    font-size: 16px;
+
+    &-item {
+      width: calc(50% - 7.5px);
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 5px;
+      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+      background-color: #ffffff;
+
+      &:nth-child(2n -1) {
+        margin-right: 15px;
+      }
+      .title {
+        font-size: 14px;
+      }
+      .value {
+        display: inline-block;
+        color: #000;
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .cotrol-area {
+    &-item {
+      border-radius: 5px;
+      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+
+      .title {
+        color: #000;
+        font-weight: 600;
+        font-size: 14px;
+      }
+    }
+  }
+  .subsection {
+    display: flex;
+    justify-content: center;
+    margin: 15px 0;
+
+    &-item {
+      margin-right: 15px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .active {
+      font-weight: 600;
+      animation: colorChange 1s forwards;
+
+      @keyframes colorChange {
+        0% {
+          color: #666666;
+        }
+        100% {
+          color: #000;
+        } /* 深色 */
+      }
     }
   }
 }
-.app-subsection {
-  display: flex;
-  margin-bottom: 10px;
-  // padding: 0px 5rem;
+
+:deep() {
+  .u-slider__show-value {
+    margin: 10px 0px 10px 18px !important;
+  }
+}
+
+uni-page-body {
+  background-color: #fff;
 }
 .demo-layout {
-  border: 1px solid #e0e0e0;
   padding: 15px 10px;
-  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
 }
 </style>

src/pages/business/fireIot/deviceManage/components/deviceDetailsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" :title="`${productName}(${total})`" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
+  <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" :title="`${params.productName}(${total})`" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
     <template #left>
       <view class="u-navbar__content__left__item">
         <u-icon name="arrow-left" size="20" color="#000"></u-icon>
@@ -9,7 +9,7 @@
 
   <oa-scroll
     customClass="scroll-height"
-    :pageSize="pageSize"
+    :pageSize="params.size"
     :total="total"
     :isSticky="false"
     :refresherLoad="true"
@@ -26,7 +26,7 @@
         <view class="flex bg-white p10" style="position: relative">
           <u--input
             style="width: 100%"
-            v-model="deviceName"
+            v-model="params.deviceName"
             placeholder="请输入设备名称"
             prefixIcon="search"
             prefixIconStyle="font-size: 22px;color: #909399"
@@ -39,8 +39,8 @@
 
         <oa-dropdown :dropdownShow="dropdownShow" :closeOnClickOverlay="true" @close="dropdownShow = false">
           <template #content>
-            <u-radio-group v-model="radioValue" placement="column" iconPlacement="right" @change="radioChange">
-              <u-radio v-for="ra in radioList" :key="ra" :activeColor="proxy.$settingStore.themeColor.color" :label="ra.label" :name="ra.value"></u-radio>
+            <u-radio-group v-model="radio.value" placement="column" iconPlacement="right" @change="radioChange">
+              <u-radio v-for="item in radio.list" :key="item" :activeColor="proxy.$settingStore.themeColor.color" :label="item.label" :name="item.value"></u-radio>
             </u-radio-group>
           </template>
         </oa-dropdown>
@@ -69,34 +69,41 @@
 </template>
 
 <script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
-import { useStores, commonStores } from "@/store/modules/index";
-
+/*----------------------------------接口引入-----------------------------------*/
 import { dmpDeviceInfo } from "@/api/business/fireIot/deviceManage.js";
-
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+import { useStores, commonStores } from "@/store/modules/index";
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
 const { proxy } = getCurrentInstance();
 const commonStore = commonStores();
-
-const dataList = ref([]);
-const deviceName = ref("");
-const productId = ref("");
-const productName = ref("");
-const pageSize = ref(20);
-const current = ref(1);
-const total = ref(0);
-
-const data = reactive({
-  radioList: [
-    { label: "全部", value: "" },
-    { label: "在线", value: "1" },
-    { label: "离线", value: "2" },
-  ],
-  radioValue: "1",
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  dataList: [],
+  total: 0,
+  params: {
+    deviceName: "",
+    productId: "",
+    productName: "",
+    size: 20,
+    current: 1,
+  },
+  radio: {
+    list: [
+      { label: "全部", value: "" },
+      { label: "在线", value: "1" },
+      { label: "离线", value: "2" },
+    ],
+    value: "1",
+  },
   dropdownShow: false,
 });
 
-const { radioList, radioValue, dropdownShow } = toRefs(data);
+const { dataList, total, params, radio, dropdownShow } = toRefs(state);
 
 /**
  * @页面初始化
@@ -111,10 +118,10 @@ function init() {
  */
 
 function dmpDeviceInfoApi() {
-  dmpDeviceInfo({ productId: productId.value, deviceName: deviceName.value, current: current.value, size: pageSize.value, deviceStatus: radioValue.value }).then((requset) => {
+  dmpDeviceInfo(state.params).then((requset) => {
     if (requset.status == "SUCCESS") {
-      dataList.value = requset.data.records;
-      total.value = requset.data.total;
+      state.dataList = requset.data.records;
+      state.total = requset.data.total;
     }
   });
 }
@@ -122,28 +129,28 @@ function dmpDeviceInfoApi() {
 /**
  * @设备详情跳转点击事件
  */
-function handleToDevice(array) {
-  proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/deviceDetails?productId=${array.productId}&deviceId=${array.deviceId}`);
+function handleToDevice(event) {
+  proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/deviceDetails?productId=${event.productId}&deviceId=${event.deviceId}`);
 
-  commonStore.deviceDetailsArray = array;
-  commonStore.deviceDetailsArray.productName = productName.value;
+  commonStore.deviceManageData = event;
+  commonStore.deviceManageData.createdTime = event.createdTime ? event.createdTime.replace("T", " ") : "";
+  commonStore.deviceManageData.productName = state.params.productName;
 }
 
 /**
  * @单选change事件
  */
 function radioChange(e) {
-  // console.log(e,'e')
-  radioValue.value = e;
+  state.radio.value = e;
   dmpDeviceInfoApi();
-  dropdownShow.value = false;
+  state.dropdownShow = false;
 }
 
 /**
  * @scrollView加载数据
  */
 function load() {
-  pageSize.value += 10;
+  state.params.size += 10;
   init();
 }
 
@@ -151,8 +158,8 @@ function load() {
  * @scrollView刷新数据
  */
 function refresh() {
-  deviceName.value = "";
-  pageSize.value = 20;
+  state.params.deviceName = "";
+  state.params.size = 20;
   init();
 }
 
@@ -165,10 +172,10 @@ onShow(() => {
 
 onLoad((options) => {
   if ("productName" in options) {
-    productName.value = options.productName;
+    state.params.productName = options.productName;
   }
   if ("id" in options) {
-    productId.value = parseInt(options.id);
+    state.params.productId = parseInt(options.id);
     init();
   }
 });

src/pages/business/fireIot/deviceManage/index.vue

@@ -15,12 +15,12 @@
     :data-theme="'theme-' + proxy.$settingStore.themeColor.type"
   >
     <template #default>
-      <view class="deviceManage" style="border-top:1px solid rgba(0,0,0,.1)">
-        <u-grid :border="true" >
-          <u-grid-item v-for="(base, index) in dataList" :key="index" @click="handleToDevice(base.id, base.productName,base.deviceCount)">
-            <!-- <u-badge type="primary" max="9999" :value="base.deviceCount" :showZero="true" :absolute="true" :offset="[10, 10, 0, 0]"></u-badge> -->
-            <image class="mb15 mt35" style="width: 40px; height: 40px" :src="base.typeImg" mode="aspectFill"></image>
-            <view class="mb15 text-ellipsis" style="width: 100%; text-align: center">{{ base.productName }}</view>
+      <view class="deviceManage" style="border-top: 1px solid rgba(0, 0, 0, 0.1)">
+        <u-grid :border="true">
+          <u-grid-item v-for="(item, index) in dataList" :key="index" @click="handleToDevice(item)">
+            <!-- <u-badge type="primary" max="9999" :value="item.deviceCount" :showZero="true" :absolute="true" :offset="[10, 10, 0, 0]"></u-badge> -->
+            <image class="mb15 mt35" style="width: 40px; height: 40px" :src="item.typeImg" mode="aspectFill"></image>
+            <view class="mb15 text-ellipsis" style="width: 100%; text-align: center">{{ item.productName }}</view>
           </u-grid-item>
         </u-grid>
       </view>
@@ -29,24 +29,32 @@
 </template>
 
 <script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
-import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
-import { useStores, commonStores } from "@/store/modules/index";
-
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
+/*----------------------------------接口引入-----------------------------------*/
 import { dmpProductInfo } from "@/api/business/fireIot/deviceManage.js";
-
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+import { useStores, commonStores } from "@/store/modules/index";
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
 const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  dataList: [],
+  pageSize: 21,
+  current: 1,
+  total: 0,
+});
 
-const dataList = ref([]);
-const pageSize = ref(21);
-const current = ref(1);
-const total = ref(0);
+const { dataList, pageSize, current, total } = toRefs(state);
 
 /**
  * @页面初始化
  */
 function init() {
-  dmpProductInfo({ productName: "", current: current.value, size: pageSize.value }).then((requset) => {
+  dmpProductInfo({ productName: "", current: state.current, size: state.pageSize }).then((requset) => {
     if (requset.status === "SUCCESS") {
       requset.data.records.forEach((el) => {
         if (!el.typeImg) {
@@ -58,21 +66,21 @@ function init() {
         }
       });
 
-      dataList.value = requset.data.records;
-      total.value = requset.data.total;
+      state.dataList = requset.data.records;
+      state.total = requset.data.total;
     }
   });
 }
 
-function handleToDevice(id, productName,total) {
-  proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/deviceDetailsList?id=${id}&productName=${productName}`);
+function handleToDevice(event) {
+  proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/deviceDetailsList?id=${event.id}&productName=${event.productName}`);
 }
 
 /**
  * @scrollView加载数据
  */
 function load() {
-  pageSize.value += 10;
+  state.pageSize += 10;
   init();
 }
 
@@ -80,7 +88,7 @@ function load() {
  * @scrollView刷新数据
  */
 function refresh() {
-  pageSize.value = 20;
+  state.pageSize = 20;
   init();
 }
 

src/store/modules/common.js

@@ -52,7 +52,7 @@ const commonStore = defineStore("common", {
       { streetTown: "莘庄工业区", id: 1216, x: 121.376508452784, y: 31.0678185611843 },
     ],
 
-    deviceDetailsArray: {}, //设备详情页面-数据存储
+    deviceManageData: {}, //设备详情页面-数据存储
 
     facilitiesGatherType: "", //设施采集类型-数据存储
     facilitiesGatherArray: {
@@ -79,6 +79,7 @@ const commonStore = defineStore("common", {
       typeGuise: "", //点线面类型
     }, //设施采集页面-数据存储
   }),
+  unistorage: true,
   actions: {
     /**
      * @计算当前坐标和G点坐标的偏差值