消防物联网3.0功能深化

src/pages.json

@@ -664,13 +664,6 @@
                         "enablePullDownRefresh": false
                     }
                 },
-                {
-                    "path": "deviceManage/components/goAction",
-                    "style": {
-                        "navigationBarTitleText": "执行动作",
-                        "enablePullDownRefresh": false
-                    }
-                },
                 {
                     "path": "facilitiesGather/index",
                     "style": {

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

@@ -27,7 +27,7 @@
             </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>
+            <image style="width: 80px; height: 80px; display: flex; margin: auto 0 auto auto" :src="commonStore.deviceManageData.typeImg" mode="aspectFill"></image>
           </u-col>
         </u-row>
       </view>
@@ -64,8 +64,15 @@
 
         <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">
+            <view class="title flex" v-if="item.commandDict.length > 0 && item.commandName.indexOf('开关') != -1">
+              <span style="margin: auto 0">{{ item.commandName }}</span>
+              <span style="margin: auto 0 auto auto">
+                <u-switch v-model="item.commandValue" :activeValue="1" :inactiveValue="0" size="20" @change="selectItem(item)"></u-switch>
+              </span>
+            </view>
+
             <u-select
-              v-if="item.commandDict.length > 0"
+              v-else-if="item.commandDict.length > 0 && item.commandName.indexOf('开关') == -1"
               v-model:current="item.commandValue"
               :label="item.commandName"
               :options="item.commandDict"
@@ -74,7 +81,10 @@
               @select="selectItem(item)"
             >
               <template #text>
-                <view class="title"> {{ item.commandName }}（{{ proxy.$common.mapping("name", "value", item.commandValue, item.commandDict) }}）</view>
+                <view class="title">
+                  <span>{{ item.commandName }}</span>
+                  <span v-if="item.commandValue">（{{ proxy.$common.mapping("name", "value", item.commandValue, item.commandDict) }}）</span>
+                </view>
               </template>
             </u-select>
 
@@ -179,7 +189,10 @@ function init() {
         item.attributeDict = item.attributeDict ? JSON.parse(item.attributeDict) : [];
         state.metrics.push(item.attributeCode.toLowerCase());
         state.realTimeData.push(item);
-        state.checkbox.list.push(item);
+        state.checkbox.list.push({
+          ...item,
+          attributeCode: item.attributeCode.toLowerCase(),
+        });
       });
 
       last({
@@ -216,6 +229,7 @@ function deviceControlData() {
 }
 
 function selectItem(e) {
+  proxy.$modal.loading("加载中");
   var params = {
     commandCode: e.commandCode,
     commandValue: e.commandValue,
@@ -226,6 +240,7 @@ function selectItem(e) {
   };
   control(params).then((res) => {
     init();
+    proxy.$modal.closeLoading();
     proxy.$modal.msg(res.data.message);
   });
 }
@@ -291,10 +306,6 @@ function historyMetricsApi() {
   });
 }
 
-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();
 }

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

@@ -1,5 +1,8 @@
 <template>
   <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" :title="`${params.productName}(${total})`" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
+    <template #center>
+      <view class="u-navbar__content__title" style="text-align: center; font-size: 16px" @click="popup.show = true"> {{ params.productName }}({{ total }}) </view>
+    </template>
     <template #left>
       <view class="u-navbar__content__left__item">
         <u-icon name="arrow-left" size="20" color="#000"></u-icon>
@@ -39,7 +42,7 @@
 
         <oa-dropdown :dropdownShow="dropdownShow" :closeOnClickOverlay="true" @close="dropdownShow = false">
           <template #content>
-            <u-radio-group v-model="radio.value" placement="column" iconPlacement="right" @change="radioChange">
+            <u-radio-group v-model="state.params.deviceStatus" 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>
@@ -48,17 +51,32 @@
         <view class="menu-list m0">
           <view class="list-cell list-cell-arrow" v-for="(base, index) in dataList" :key="index" @click="handleToDevice(base)">
             <view class="menu-item">
-              <image class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 10px auto 0" src="@/static/images/device/1.png"></image>
+              <image class="image-bg" style="width: 80rpx; height: 80rpx; margin: auto 20px auto 0" :src="commonStore.deviceManageData.typeImg"></image>
 
-              <view style="width: calc(100% - 51px); display: flex; flex-flow: row wrap; padding-right: 10px">
-                <view class="deviceHeader">
-                  <view class="deviceName text-ellipsis">设备编号：{{ base.deviceId }}</view>
-                  <view class="deviceStatus" v-if="base.deviceStatus == 1" style="background-color: #16bf00"> 在线 </view>
-                  <view class="deviceStatus" v-if="base.deviceStatus == 2" style="background-color: red"> 离线 </view>
+              <view class="device-area">
+                <view class="device-area-header">
+                  <view class="title text-ellipsis">{{ base.deviceName || "-" }}</view>
+                  <!-- <view class="status" v-if="base.deviceStatus == 1" style="background-color: #16bf00"> 在线 </view>
+                  <view class="status" v-if="base.deviceStatus == 2" style="background-color: red"> 离线 </view> -->
+                </view>
+                <view class="device-area-content">
+                  <span class="title">编号：</span>
+                  <span style="color: #a0cfff">{{ base.deviceId }}</span>
+                </view>
+                <view class="device-area-content">
+                  <span class="title">状态：</span>
+                  <span class="value" :style="{ color: base.deviceStatus == 1 ? '#16bf00' : 'red' }"> {{ base.deviceStatus == 1 ? "在线" : "离线" }}</span>
+                  <span class="title ml10">位置：</span>
+                  <span class="value" style="color: #a0cfff">
+                    {{ base.installAddress || "-" }}
+                  </span>
+                  <!-- <span class="title ml10">激活状态：</span>
+                  <span class="value" :style="{ color: base.serviceStatus == 1 ? '#f29100' : base.serviceStatus == 2 ? '#16bf00' : 'red' }">
+                    {{ base.serviceStatus == 1 ? "未激活" : base.serviceStatus == 2 ? "已激活" : "禁用" }}
+                  </span> -->
                 </view>
-                <view class="deviceContent">设备名称：{{ base.deviceName }}</view>
-                <view class="deviceContent">安装位置：{{ base.installAddress }}</view>
-                <!-- <view class="deviceContent">激活状态：{{ base.serviceStatus == 1 ? "未激活" : base.serviceStatus == 2 ? "已激活" : "禁用" }}</view> -->
+
+                <!-- <view class="deviceContent">安装位置：{{ base.installAddress }}</view> -->
               </view>
             </view>
           </view>
@@ -66,6 +84,45 @@
       </view>
     </template>
   </oa-scroll>
+
+  <u-popup :show="popup.show" mode="top" @close="popup.show = false" @open="popupOpen">
+    <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>
+        </view>
+      </template>
+    </u-navbar>
+    <view>
+      <oa-scroll
+        customClass="bg-white scroll-height"
+        :pageSize="state1.pageSize"
+        :total="state1.total"
+        :isSticky="false"
+        :refresherLoad="true"
+        :refresherLoadTitle="true"
+        :refresherEnabled="true"
+        :refresherDefaultStyle="'none'"
+        :refresherThreshold="44"
+        :refresherBackground="'#f5f6f7'"
+        @load="load('state1')"
+        @refresh="refresh('state1')"
+        :data-theme="'theme-' + proxy.$settingStore.themeColor.type"
+        style="height: calc(-44px + 40vh)"
+      >
+        <template #default>
+          <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 state1.dataList" :key="index" @click="handleToProduct(item)">
+                <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>
+        </template>
+      </oa-scroll>
+    </view>
+  </u-popup>
 </template>
 
 <script setup>
@@ -73,7 +130,7 @@
 import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
 /*----------------------------------接口引入-----------------------------------*/
-import { dmpDeviceInfo } from "@/api/business/fireIot/deviceManage.js";
+import { dmpProductInfo, dmpDeviceInfo } from "@/api/business/fireIot/deviceManage.js";
 /*----------------------------------组件引入-----------------------------------*/
 /*----------------------------------store引入-----------------------------------*/
 import { useStores, commonStores } from "@/store/modules/index";
@@ -89,6 +146,7 @@ const state = reactive({
     deviceName: "",
     productId: "",
     productName: "",
+    deviceStatus: undefined,
     size: 20,
     current: 1,
   },
@@ -98,12 +156,22 @@ const state = reactive({
       { label: "在线", value: "1" },
       { label: "离线", value: "2" },
     ],
-    value: "1",
   },
   dropdownShow: false,
+
+  popup: {
+    show: false,
+  },
 });
 
-const { dataList, total, params, radio, dropdownShow } = toRefs(state);
+const { dataList, total, params, radio, dropdownShow, popup } = toRefs(state);
+
+const state1 = reactive({
+  dataList: [],
+  pageSize: 21,
+  current: 1,
+  total: 0,
+});
 
 /**
  * @页面初始化
@@ -132,16 +200,57 @@ function dmpDeviceInfoApi() {
 function handleToDevice(event) {
   proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/deviceDetails?productId=${event.productId}&deviceId=${event.deviceId}`);
 
-  commonStore.deviceManageData = event;
-  commonStore.deviceManageData.createdTime = event.createdTime ? event.createdTime.replace("T", " ") : "";
-  commonStore.deviceManageData.productName = state.params.productName;
+  commonStore.deviceManageData = {
+    ...event,
+    createdTime: event.createdTime ? event.createdTime.replace("T", " ") : "",
+    productName: state.params.productName,
+    typeImg: commonStore.deviceManageData.typeImg,
+  };
+}
+
+function GetDmpProductInfo() {
+  dmpProductInfo({ productName: "", current: state1.current, size: state1.pageSize }).then((requset) => {
+    if (requset.status === "SUCCESS") {
+      requset.data.records.forEach((el) => {
+        if (!el.typeImg) {
+          el.typeImg = "/static/images/404.png";
+        }
+
+        if (el.deviceCount == null) {
+          el.deviceCount = 0;
+        }
+      });
+
+      state1.dataList = requset.data.records;
+      state1.total = requset.data.total;
+    }
+  });
+}
+
+/**
+ * @打开弹出层
+ */
+function popupOpen() {
+  GetDmpProductInfo();
+  state.popup.show = true;
+}
+
+/**
+ * @切换产品
+ */
+function handleToProduct(event) {
+  state.params.productName = event.productName;
+  state.params.productId = parseInt(event.id);
+  commonStore.deviceManageData.typeImg = event.typeImg;
+  state.popup.show = false;
+  init();
 }
 
 /**
  * @单选change事件
  */
 function radioChange(e) {
-  state.radio.value = e;
+  state.params.deviceStatus = e;
   dmpDeviceInfoApi();
   state.dropdownShow = false;
 }
@@ -149,18 +258,28 @@ function radioChange(e) {
 /**
  * @scrollView加载数据
  */
-function load() {
-  state.params.size += 10;
-  init();
+function load(keys) {
+  if (keys == "state1") {
+    state1.pageSize += 10;
+    GetDmpProductInfo();
+  } else {
+    state.params.size += 10;
+    init();
+  }
 }
 
 /**
  * @scrollView刷新数据
  */
-function refresh() {
-  state.params.deviceName = "";
-  state.params.size = 20;
-  init();
+function refresh(keys) {
+  if (keys == "state1") {
+    state.pageSize = 20;
+    GetDmpProductInfo();
+  } else {
+    state.params.deviceName = "";
+    state.params.size = 20;
+    init();
+  }
 }
 
 onReady(() => {});
@@ -183,33 +302,49 @@ onLoad((options) => {
 
 <style lang="scss" scoped>
 .deviceDetailsList-container {
-  .deviceHeader {
-    min-width: 100%;
-    font-size: 15px;
+  :deep() {
+    .list-cell {
+      padding: 14px 20px;
+    }
+  }
+
+  .device-area {
+    width: calc(100% - 51px);
     display: flex;
-    white-space: nowrap;
+    flex-flow: row wrap;
+    padding-right: 10px;
 
-    .deviceName {
-      width: 75%;
-      color: #000;
-    }
+    &-header {
+      min-width: 100%;
+      font-size: 16px;
+      display: flex;
+      white-space: nowrap;
+
+      .title {
+        width: 75%;
+        color: #000;
+        font-weight: 600;
+      }
 
-    .deviceStatus {
-      max-width: 30%;
-      margin-left: 20px;
-      font-size: 12px;
-      color: #ffffff;
-      padding: 0 5px;
-      border-radius: 20px;
-      line-height: 20px;
+      .status {
+        max-width: 30%;
+        margin-left: 20px;
+        font-size: 12px;
+        color: #ffffff;
+        padding: 0 5px;
+        border-radius: 20px;
+        line-height: 20px;
+      }
     }
-  }
 
-  .deviceContent {
-    min-width: 100%;
-    margin-top: 10px;
-    font-size: 14px;
-    color: rgb(102, 102, 102);
+    &-content {
+      min-width: 100%;
+      margin-top: 5px;
+      font-size: 13px;
+      .title {
+        color: rgba(102, 102, 102, 0.7);
+      }
+    }
   }
 }
 </style>

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

@@ -1,221 +0,0 @@
-<template>
-  <oa-scroll
-    customClass="unitInfoCollection-container scroll-height"
-    :refresherLoad="false"
-    :refresherEnabled="false"
-    :refresherEnabledTitle="false"
-    :refresherDefaultStyle="'none'"
-    :refresherThreshold="44"
-    :refresherBackground="'#f5f6f7'"
-    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
-  >
-    <template #default>
-      <view class="centerOne">
-        <u--form ref="uForm" :model="form" :rules="rules" labelWidth="130">
-          <view style="padding: 10px 0">
-            <view style="padding: 10px 10px 20px 10px; background: #ffffff">
-              <view style="padding-left: 9px">
-                <u-form-item label="命令" prop="commandName" required :borderBottom="true">
-                  <u-input v-model="form.commandName" placeholder="请输入命令名称" border="none"> </u-input>
-                </u-form-item>
-                <u-form-item label="命令属性" v-if="form.dataType == 1" prop="commandValue" required :borderBottom="true" @click="handleAction('命令属性')">
-                  <u-input v-model="form.commandName1" placeholder="请选择命令属性" suffixIcon="arrow-right" suffixIconStyle="color: #909399" border="none" disabledColor="transparent" disabled />
-                </u-form-item>
-                <u-form-item v-else label="参数值" prop="commandValue" required :borderBottom="true">
-                  <u-input v-model="form.commandValue" placeholder="请输入参数值" border="none"> </u-input>
-                </u-form-item>
-              </view>
-            </view>
-          </view>
-        </u--form>
-
-        <view class="app-button">
-          <view class="app-button-padding"></view>
-          <view class="app-button-fixed">
-            <u-button class="app-buttom" type="primary" @click="handleSubmit('命令下发')" shape="circle"> 命 令 下 发 </u-button>
-          </view>
-        </view>
-      </view>
-
-      <u-picker
-        :show="actionShow"
-        :columns="actionsList"
-        :title="'请选择' + actionTitle"
-        keyName="name"
-        visibleItemCount="6"
-        :defaultIndex="[actionDefaultIndex]"
-        :closeOnClickOverlay="true"
-        @close="actionShow = false"
-        @cancel="actionShow = false"
-        @confirm="selectAction"
-      ></u-picker>
-    </template>
-  </oa-scroll>
-</template>
-
-<script setup>
-/*----------------------------------依赖引入-----------------------------------*/
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import { ref, reactive, toRefs, getCurrentInstance } from "vue";
-/*----------------------------------接口引入-----------------------------------*/
-import { getList, deviceStatus } from "@/api/business/fireIot/deviceManage.js";
-/*----------------------------------组件引入-----------------------------------*/
-/*----------------------------------store引入-----------------------------------*/
-/*----------------------------------公共方法引入-----------------------------------*/
-/*----------------------------------公共变量-----------------------------------*/
-const { proxy } = getCurrentInstance();
-/*----------------------------------变量声明-----------------------------------*/
-
-const deviceId = ref("");
-
-const dataList = reactive({
-  form: {
-    commandName: "", //命令名称
-    commandCode: "", //命令编码
-    productCode: "", //产品编码
-  },
-  rules: {
-    commandName: [{ required: true, message: "请输入命令", trigger: "blur" }],
-    commandValue: [{ required: true }, { validator: commandValueScale, trigger: "blur" }],
-  },
-  actionTitle: "",
-  actionShow: false,
-  actionDefaultIndex: 0,
-  actionsList: [[]],
-});
-
-const { form, rules, actionTitle, actionsList, actionShow, actionDefaultIndex } = toRefs(dataList);
-
-const scanBool = ref(false);
-
-//参数值校验范围
-function commandValueScale(rule, value, callback) {
-  console.log(form.value.maximum, 222);
-  if (form.value.maximum && form.value.minimum) {
-    if (value > form.value.minimum && value < form.value.maximum) {
-      callback();
-    } else {
-      callback(new Error(`输入的参数值必须大于${form.value.minimum}且小于${form.value.maximum}`));
-    }
-  } else {
-    callback();
-  }
-}
-
-//详情数据
-function getData() {
-  getList({
-    current: 1,
-    size: 10,
-    productCode: form.value.productCode,
-    commandCode: form.value.commandCode,
-  }).then((response) => {
-    form.value = response.data.records[0];
-    form.value.commandDict = form.value.commandDict ? JSON.parse(form.value.commandDict) : "";
-    rules.value.commandValue[0].message = form.value.dataType == 1 ? "请选择命令属性" : "请输入参数值";
-    rules.value.commandValue[0].tigger = form.value.dataType == 1 ? "change" : "blur";
-  });
-}
-
-/**
- * @上一步
- * @命令下发
- * @提交
- * @按钮点击事件
- */
-function handleSubmit(value) {
-  proxy.$refs["uForm"]
-    .validate()
-    .then((res) => {
-      proxy.$modal.msg("校验通过");
-      var params = {
-        commandCode: form.value.commandCode,
-        commandValue: form.value.commandValue,
-        productCode: form.value.productCode,
-        deviceId: deviceId.value,
-      };
-      deviceStatus(params).then((res) => {
-        if (res.status == "SUCCESS") {
-          if (scanBool.value) {
-            proxy.$tab.reLaunch(`/pages/common/success/index?codeName=提交成功&showNow=${false}`);
-          } else {
-            proxy.$modal.msg("提交成功");
-            setTimeout(() => {
-              proxy.$tab.redirectTo("/pages/business/fireIot/deviceManage/index"); //返回到需要执行方法的页面
-            }, 2000);
-          }
-        }
-      });
-    })
-    .catch((errors) => {
-      // proxy.$modal.msg("校验失败");
-    });
-}
-
-/**
- * @action弹出框点击事件
- */
-function handleAction(value, index, ind) {
-  if (value == "命令属性") {
-    actionTitle.value = "命令属性";
-    actionsList.value = [form.value.commandDict];
-    if (form.value.commandDict) {
-      actionsList.value[0].forEach((el, ind) => {
-        if (el.value === form.value.commandValue) {
-          actionDefaultIndex.value = ind;
-        }
-      });
-    } else {
-      actionDefaultIndex.value = 0;
-    }
-  }
-
-  actionShow.value = true;
-}
-
-/**
- * @action弹出框选择事件
- */
-function selectAction(e) {
-  if (actionTitle.value == "命令属性") {
-    form.value.commandValue = e.value[0].value;
-    form.value.commandName1 = e.value[0].name;
-  }
-  actionShow.value = false;
-}
-
-onLoad((options) => {
-  if ("commandCode" in options) {
-    form.value.commandCode = options.commandCode;
-  }
-  if ("productCode" in options) {
-    form.value.productCode = options.productCode;
-  }
-  if ("deviceId" in options) {
-    deviceId.value = options.deviceId;
-  }
-  getData();
-});
-
-onShow(() => {
-  //调用系统主题颜色
-  proxy.$settingStore.systemThemeColor([1]);
-});
-</script>
-
-<style lang="scss">
-.unitInfoCollection-container {
-  .centerOne,
-  .centerTwo {
-    .title {
-      color: #333333;
-      text-align: center;
-      margin-top: 10px;
-    }
-  }
-
-  :deep(.u-picker__view__column__item) {
-    font-size: 13px;
-  }
-}
-</style>

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

@@ -40,6 +40,7 @@ import { useStores, commonStores } from "@/store/modules/index";
 /*----------------------------------公共方法引入-----------------------------------*/
 /*----------------------------------公共变量-----------------------------------*/
 const { proxy } = getCurrentInstance();
+const commonStore = commonStores();
 /*----------------------------------变量声明-----------------------------------*/
 const state = reactive({
   dataList: [],
@@ -74,6 +75,7 @@ function init() {
 
 function handleToDevice(event) {
   proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/deviceDetailsList?id=${event.id}&productName=${event.productName}`);
+  commonStore.deviceManageData.typeImg = event.typeImg;
 }
 
 /**

src/store/modules/common.js

@@ -52,7 +52,7 @@ const commonStore = defineStore("common", {
       { streetTown: "莘庄工业区", id: 1216, x: 121.376508452784, y: 31.0678185611843 },
     ],
 
-    deviceManageData: {}, //设备详情页面-数据存储
+    deviceManageData: {}, //设备管理页面-数据存储
 
     facilitiesGatherType: "", //设施采集类型-数据存储
     facilitiesGatherArray: {