fast(设备功能、设备组): 项目详情添加功能（锁功能），添加设备组查询和显示

src/api/iot/cardNumber.js

@@ -0,0 +1,38 @@
+import request from "@/utils/request";
+
+// 获取卡号列表
+export function setCardQuery(data) {
+  return request({
+    url: "/iot/dev/opt/setquery",
+    method: "post",
+    data: data
+  });
+}
+
+
+// 获取卡号列表
+export function getCard(data) {
+  return request({
+    url: "/iot/dev/opt/getcard",
+    method: "post",
+    data: data
+  });
+}
+
+// 添加卡号
+export function addCard(data) {
+  return request({
+    url: "/iot/dev/opt/addcard",
+    method: "post",
+    data: data
+  });
+}
+
+// 删除卡号
+export function delCard(data) {
+  return request({
+    url: "/iot/dev/opt/delcard",
+    method: "post",
+    data: data
+  });
+}

src/api/tenant/project.js

@@ -17,6 +17,15 @@ export function getProject(projectId) {
   });
 }
 
+// 查询项目详细
+export function getProjectGroupList(query) {
+  return request({
+    url: "/iot/group/list",
+    method: "get",
+    params: query
+  });
+}
+
 // 导出项目
 export function exportProject(query) {
   return request({

src/views/iot/device/index.vue

@@ -1,3 +1,4 @@
+<!--设备管理页-->
 <template>
   <div class="app-container iot-device">
     <component
@@ -15,7 +16,7 @@
         label-width="68px"
       >
         <el-form-item label="所属项目" prop="inProject">
-          <el-select v-model="queryParams.inProject" clearable placeholder="请选择所属项目" size="small">
+          <el-select v-model="queryParams.inProject" clearable placeholder="请选择所属项目" size="small" @change="changeProject">
             <el-option
               v-for="(item, index) in inProjectList"
               :key="item.projectId"
@@ -24,6 +25,16 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item v-if="queryParams.inProject" label="设备组" prop="groupId">
+          <el-select v-model="queryParams.groupId" clearable placeholder="请选择设备组" size="small">
+            <el-option
+              v-for="(item, index) in projectGroupList"
+              :key="item.id"
+              :label="item.groupName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item label="型号名称" prop="modelName">
           <el-input
             v-model="queryParams.modelName"
@@ -198,6 +209,11 @@
             >
           </template>
         </el-table-column>
+        <el-table-column
+          align="center"
+          label="设备组"
+          prop="groupName"
+        />
         <el-table-column align="center" label="设备标签" prop="deviceLabel">
           <template slot-scope="scope">
             <el-tag v-for="(val,i) in scope.row.deviceLabel" :key="i" size="mini" style="margin-right: 5px;margin-bottom: 5px">{{ val }}</el-tag>
@@ -447,7 +463,7 @@ import GatewayDetail from "@/views/profile/DeviceDetailsView/index";
 import EDialogTableInput from "@/components/EDialogTableInput";
 import DialogTemplate from "@/components/DialogTemplate";
 import JsBarcode from "jsbarcode"
-import { listProject } from "@/api/tenant/project";
+import { getProjectGroupList, listProject } from "@/api/tenant/project";
 
 const deviceStatusOpt = {
   ONLINE: "在线",
@@ -694,6 +710,8 @@ export default {
       open: false,
       // 弹出层标题
       inProjectList:[],
+      // 弹出层标题
+      projectGroupList:[],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -705,6 +723,7 @@ export default {
         deviceType: null,
         modelName: null,
         inProject: null,
+        groupId: null,
         orderByColumn: "createTime",
         isAsc: "desc",
       },
@@ -773,6 +792,22 @@ export default {
         }
       });
     },
+    changeProject(e){
+      console.log("changeProject",e)
+      this.queryParams.groupId = null;
+      this.projectGroupList = [];
+      if(e){
+        this.getInProjectGroupList();
+      }
+    },
+    // 查询所属项目列表
+    getInProjectGroupList() {
+      getProjectGroupList({
+        projectId: this.queryParams.inProject,
+      }).then(response => {
+        this.projectGroupList = response.rows||[];
+      });
+    },
     handleDeviceDialogEvent(e) {
       this.form.parentId = e.deviceId;
       this.form.parentName = e.deviceName;
@@ -889,6 +924,8 @@ export default {
         deviceType: null,
         paramList: [],
         deviceKey: "",
+        inProject: null,
+        groupId: null,
         lineType: undefined,
         deviceTag: "",
       };

src/views/iot/device/profile/details.vue

@@ -30,6 +30,7 @@
             <info-wrap :infoData="infoData" @updateInfo="updateInfo($event)" />
           </div>
         </el-tab-pane>
+
         <el-tab-pane v-if="infoData.deviceType === 'GATEWAY_CONTROLLER'" label="子设备" name="child">
           <div class="tabs-body">
             <child-device
@@ -65,6 +66,11 @@
             />
           </div>
         </el-tab-pane>
+        <el-tab-pane label="功能" name="function">
+          <div class="tabs-body">
+            <function-wrap v-if="activeName === 'function'" :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -78,6 +84,7 @@ import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
 import { iotWebSocketBaseUrl } from "@/config/env";
 import TriggerWrap from "@/views/profile/DeviceTrigger/index";
 import EDeviceScene from '@/views/profile/EDeviceScene/indexView'
+import functionWrap from "@/views/iot/device/profile/functionWrap"
 export default {
   name: "DetailsWrap",
   props: ["sourceId"],
@@ -87,7 +94,8 @@ export default {
     DeviceLog,
     DeviceRunStartsWrap,
     TriggerWrap,
-    EDeviceScene
+    EDeviceScene,
+    functionWrap
   },
   data() {
     return {

src/views/iot/device/profile/functionWrap.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="function-list-box">
+    <div v-if="deviceInfo.deviceType === 'DOOR_SENSOR'" class="function-list">
+      <div class="function-item">
+        <div class="function-item-label">开锁</div>
+        <div class="function-item-main">
+          <el-button type="primary" @click="openLock">开锁</el-button>
+        </div>
+      </div>
+      <div class="function-item">
+        <div class="function-item-label">卡管理</div>
+        <div class="function-item-main">
+          <el-button type="primary" @click="openModel">管理IC卡</el-button>
+        </div>
+      </div>
+    </div>
+    <div v-else style="padding: 100px;text-align: center">
+      <i class="el-icon-s-order" style="font-size: 50px;color: #999"></i>
+      <div style="color: #909399;margin-top: 10px">暂无数据</div>
+    </div>
+
+    <el-dialog :visible.sync="open" title="卡管理" width="700px">
+      <el-button
+        icon="el-icon-refresh"
+        style="margin-bottom: 10px"
+        type="primary"
+        @click="getCardNumberList"
+        >刷新列表</el-button
+      >
+      <div
+        style="display: flex; align-items: center;justify-content: space-between;margin-bottom: 10px"
+      >
+        <el-input
+          v-model="newCardNumber"
+          clearable
+          placeholder="请填写新增卡号"
+        />
+        <el-button
+          style="margin-left: 10px"
+          type="primary"
+          @click="addCardNumber"
+          >添加卡号</el-button
+        >
+      </div>
+      <el-table v-loading="loading" :data="tableData" height="500"  style="width: 100%">
+        <el-table-column
+          type="index"
+          width="70">
+        </el-table-column>
+        <el-table-column align="center" label="卡号" prop="cardNumber">
+        </el-table-column>
+<!--        <el-table-column align="center" label="卡号(16进制)" prop="name">-->
+<!--        </el-table-column>-->
+        <el-table-column align="center" label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button size="small" type="danger" @click="delCardNumber(scope.row.cardNumber)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { updateDevice, resetPssword, setSwitchControl } from "@/api/iot/device";
+import DialogTemplate from "@/components/DialogTemplate";
+import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig";
+import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig";
+import { addCard, delCard, getCard, setCardQuery } from "@/api/iot/cardNumber";
+export default {
+  name: "functionWrap",
+  props: ["deviceInfo"],
+  components: { DialogTemplate, DeviceAlarmConfig, DeviceTimingConfig },
+  data() {
+    const validatorNull = (rule, value, callback) => {
+      callback();
+    };
+    return {
+      updateState: false,
+      prodtreeOptions: [],
+      modelList: [],
+      showProdSecret: false,
+      showDevicePassword: false,
+      loading:false,
+      temp: {
+        deviceName: "",
+        deviceId: undefined
+      },
+      rules: {
+        devicePassword: [
+          {
+            required: false,
+            validator: this.devicePassword,
+            trigger: "blur"
+          }
+        ]
+      },
+      form: {
+        devicePassword: ""
+      },
+      title: "",
+      open: false,
+      newCardNumber: "",
+      tableData: []
+    };
+  },
+  created() {
+    if(this.deviceInfo.deviceId){
+      this.init();
+    }
+  },
+  methods: {
+    init(){
+      console.log("this.d eviceInfo",this.deviceInfo)
+      let params = {
+        data: {params:{}},
+        deviceId: this.deviceInfo.deviceId
+      };
+      setCardQuery(params).then(response => {
+        // if(response?.code == 200){
+        //   let data = response?.data ||[];
+        //   this.tableData = data.map(item=>{
+        //     return {
+        //       cardNumber: item,
+        //       // name: item.cardNumber.toString(16).toUpperCase()
+        //     }
+        //   })
+        // }else{
+        //   this.tableData = []
+        // }
+        // this.loading = false;
+      })
+    },
+    getCardNumberList() {
+      this.loading = true;
+      let params = {
+        data: {params:{}},
+        deviceId: this.deviceInfo.deviceId
+      };
+      getCard(params).then(response => {
+        console.log("获取卡号列表", response);
+        if(response?.code == 200){
+          let data = response?.data ||[];
+          this.tableData = data.map(item=>{
+            return {
+              cardNumber: item,
+              // name: item.cardNumber.toString(16).toUpperCase()
+            }
+          })
+        }else{
+          this.tableData = []
+        }
+        this.loading = false;
+      }).catch(e => {
+        this.tableData = []
+        this.loading = false;
+      });
+    },
+    openLock() {
+      console.log("开锁");
+      this.$prompt("请输入登录密码", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /^[a-z A-z 0-9 $.]+/,
+        inputType: "password",
+        inputErrorMessage: "登录密码不能为空",
+      }).then(({ value }) => {
+        let params = {
+          data: {
+            // cmd: "set_switch",
+            params: {
+              switch: 0,
+            },
+          },
+          deviceId: this.deviceInfo.deviceId,
+          verifyKey: value,
+        };
+        setSwitchControl(params).then((res) => {
+          if(res.code==200){
+            this.msgSuccess("开锁成功");
+          }
+        });
+      });
+    },
+    openModel() {
+      console.log("卡管理");
+      this.getCardNumberList();
+      this.newCardNumber = "";
+      this.open = true;
+    },
+    addCardNumber() {
+      console.log("新增卡", this.newCardNumber);
+      let params = {
+        data: {params:{card:this.newCardNumber}},
+        deviceId: this.deviceInfo.deviceId
+      };
+      addCard(params).then(response => {
+        console.log("添加卡号", response);
+        if(response?.code == 200){
+          this.msgSuccess("添加成功");
+          this.getCardNumberList();
+        }
+      });
+    },
+    delCardNumber(cardNumber) {
+      console.log("删除卡", cardNumber);
+      let params = {
+        data: {params:{card:cardNumber}},
+        deviceId: this.deviceInfo.deviceId
+      };
+      delCard(params).then(response => {
+        if(response?.code == 200){
+          this.msgSuccess("删除成功");
+          this.getCardNumberList();
+        }
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+.function-list-box {
+  .function-list {
+    .function-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #dedddd;
+      padding: 10px 2px;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .eldaialog-wrap {
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-radio {
+      width: 90px;
+    }
+    .el-dialog__body {
+      padding: 0px;
+    }
+    .cus-itme.el-form-item--mini .el-form-item__content {
+      margin-left: 0px !important;
+    }
+    .select {
+      // width: 92%;
+      display: inline-block;
+      width: calc(92% - 50px);
+      display: inline-block;
+      float: left;
+      margin-right: 4px;
+      .el-input {
+        width: 100%;
+      }
+    }
+    .el-textarea {
+      width: 92%;
+      width: calc(92% - 50px);
+      width: 100%;
+    }
+    .el-input {
+      width: 92%;
+      width: calc(92% - 50px);
+      width: 100%;
+    }
+    .info {
+      width: 100%;
+      float: left;
+      margin-bottom: 15px;
+      /* margin-top: 13px; */
+      margin-left: -10px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .span {
+      width: calc(100% - 91px);
+      display: block;
+      content: "";
+      height: 1px;
+      /* width: 100%; */
+      border-top: 1px dashed #ecedee;
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      margin-left: 80px;
+      margin-top: -10px;
+    }
+    .form-buttons-div {
+      height: 45px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 10px;
+      border-top: 1px solid #747373;
+    }
+  }
+
+  .group-dialog {
+    .el-dialog__header {
+      border-bottom: 1px solid #ccc;
+    }
+    .el-dialog__body {
+      padding: 28px;
+      .el-form-item {
+        margin-bottom: 0;
+        .el-form-item__label {
+          line-height: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/iot/device/profile/info.vue

@@ -136,12 +136,15 @@
       </div>
 
       <div class="table-row">
+        <div class="table-row-col">
+          <div class="title">设备组</div>
+          <div class="content">{{infoData.groupName || '--'}}</div>
+        </div>
         <div class="table-row-col">
           <div class="title">创建时间</div>
           <div class="content">{{infoData.createTime || '--'}}</div>
         </div>
-
+        <div class="table-row-col">
-        <div class="table-row-col" style="flex: 2 1 0%;">
           <div class="title">设备图片</div>
           <div class="content">--</div>
         </div>

src/views/profile/DeviceDetailsView/index.vue

@@ -114,6 +114,11 @@
             <batch-upgrade-rate v-if="activeName === 'batchUpgradeRate'" ref="batchUpgradeRate" :sourceKey="pInfo.deviceKey"></batch-upgrade-rate>
           </div>
         </el-tab-pane>
+        <el-tab-pane label="功能" name="function">
+          <div class="tabs-body">
+            <function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
 
@@ -157,6 +162,7 @@ import DialogTemplate from "@/components/DialogTemplate";
 import EBatchFirmwareUpgrade from '@/views/profile/BatchFirmwareUpgrade/example'
 import { upgradeBatch } from '@/api/iot/deviceOta'
 import BatchUpgradeRate from "./BatchUpgradeRate";
+import functionWrap from "@/views/iot/device/profile/functionWrap"
 export default {
   name: "DetailsWrap",
   props: ["sourceId", "isTenant", 'isPersonal'],
@@ -171,7 +177,8 @@ export default {
     EDeviceScene,
     DialogTemplate,
     EBatchFirmwareUpgrade,
-    BatchUpgradeRate
+    BatchUpgradeRate,
+    functionWrap
   },
   data() {
     return {

src/views/profile/DeviceDetailsView/info.vue

@@ -1,3 +1,4 @@
+<!--我的设备页-设备信息（网关）-->
 <template>
   <div class="product-details-info">
     <div class="group-list-info">
@@ -196,11 +197,15 @@
       </div>
 
       <div class="table-row">
+        <div class="table-row-col">
+          <div class="title">设备组</div>
+          <div class="content">{{infoData.groupName || '--'}}</div>
+        </div>
         <div class="table-row-col" style="flex: 1">
           <div class="title">固件版本</div>
           <div class="content">{{ infoData.otaVersion || "--" }}</div>
         </div>
-        <div class="table-row-col" style="flex: 2">
+        <div class="table-row-col">
           <div class="title">设备图片</div>
           <div class="content">--</div>
         </div>

src/views/tenant/device/index.vue

@@ -1,3 +1,4 @@
+<!--我的设备页-->
 <template>
   <div class="app-container iot-device">
     <component :is="componectVal" :isTenant="true" :sourceId="sourceId" @toTableClick="toTableClick"></component>
@@ -10,7 +11,7 @@
         label-width="68px"
       >
         <el-form-item label="所属项目" prop="inProject">
-          <el-select v-model="queryParams.inProject" clearable placeholder="请选择所属项目" size="small">
+          <el-select v-model="queryParams.inProject" clearable placeholder="请选择所属项目" size="small" @change="changeProject">
             <el-option
               v-for="(item, index) in inProjectList"
               :key="item.projectId"
@@ -19,6 +20,16 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item v-if="queryParams.inProject" label="设备组" prop="groupId">
+          <el-select v-model="queryParams.groupId" clearable placeholder="请选择设备组" size="small">
+            <el-option
+              v-for="(item, index) in projectGroupList"
+              :key="item.id"
+              :label="item.groupName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item label="设备名称" prop="deviceName">
           <el-input
             v-model="queryParams.deviceName"
@@ -108,6 +119,11 @@
             <el-tag v-else-if="scope.row.deviceState === 'UNACTIVE'" type="info">未激活</el-tag>
           </template>
         </el-table-column>
+        <el-table-column
+          align="center"
+          label="设备组"
+          prop="groupName"
+        />
         <el-table-column align="center" label="设备标签" prop="deviceLabel">
           <template slot-scope="scope">
             <el-tag v-for="(val,i) in scope.row.deviceLabel" :key="i" size="mini" style="margin-right: 5px;margin-bottom: 5px">{{ val }}</el-tag>
@@ -159,7 +175,7 @@ import {
 import DetailsWrap from './profile/details'
 import GatewayDetail from '@/views/profile/DeviceDetailsView/index'
 import JsBarcode from "jsbarcode";
-import { listProject } from "@/api/tenant/project";
+import { getProjectGroupList, listProject } from "@/api/tenant/project";
 const deviceStatusOpt = {
   ONLINE: "在线",
   OFFLINE: "离线",
@@ -205,6 +221,8 @@ export default {
       deviceList: [],
       // 弹出层标题
       inProjectList:[],
+      // 设备组列表
+      projectGroupList:[],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -214,6 +232,7 @@ export default {
         deviceName: null,
         deviceState: null,
         inProject: null,
+        groupId: null,
         deviceType: null,
         orderByColumn: "createTime",
         isAsc: "desc"
@@ -231,6 +250,22 @@ export default {
     this.getList();
   },
   methods: {
+    changeProject(e){
+      console.log("changeProject",e)
+      this.queryParams.groupId = null;
+      this.projectGroupList = [];
+      if(e){
+        this.getInProjectGroupList();
+      }
+    },
+    // 查询所属项目列表
+    getInProjectGroupList() {
+      getProjectGroupList({
+        projectId: this.queryParams.inProject,
+      }).then(response => {
+        this.projectGroupList = response.rows||[];
+      });
+    },
     lookQrCode(url){
       this.qrCodeUrl = url;
       this.imgModelShow = true;

src/views/tenant/device/profile/details.vue

@@ -55,6 +55,11 @@
             ></device-log>
           </div>
         </el-tab-pane>
+        <el-tab-pane label="功能" name="function">
+          <div class="tabs-body">
+            <function-wrap :deviceInfo="infoData" :sourceId="deviceId"></function-wrap>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -67,6 +72,7 @@ import ChildDevice from "./childDevice";
 import DeviceRunStartsWrap from "@/views/profile/DeviceRunStarts/index";
 import { iotWebSocketBaseUrl } from "@/config/env";
 import TriggerWrap from "@/views/profile/DeviceTrigger/index";
+import functionWrap from "@/views/iot/device/profile/functionWrap"
 export default {
   name: "DetailsWrap",
   props: ["sourceId"],
@@ -75,7 +81,8 @@ export default {
     DeviceLog,
     ChildDevice,
     DeviceRunStartsWrap,
-    TriggerWrap
+    TriggerWrap,
+    functionWrap
   },
   data() {
     return {

src/views/tenant/device/profile/info.vue

@@ -1,3 +1,4 @@
+<!--我的设备页-设备信息（设备）-->
 <template>
   <div class="product-details-info">
     <div class="group-list-info">
@@ -120,11 +121,15 @@
       </div>
 
       <div class="table-row">
+        <div class="table-row-col">
+          <div class="title">设备组</div>
+          <div class="content">{{infoData.groupName || '--'}}</div>
+        </div>
         <div class="table-row-col" style="flex: 1">
           <div class="title">固件版本</div>
           <div class="content">{{ infoData.otaVersion || "--" }}</div>
         </div>
-        <div class="table-row-col" style="flex: 2">
+        <div class="table-row-col">
           <div class="title">设备图片</div>
           <div class="content">--</div>
         </div>