iot设备页面优化

sgzb-ui/src/views/iotDevice/index.vue

@@ -15,9 +15,9 @@
                 <el-button size="mini" type="primary" @click="addDevice(null)"
                     >添加设备</el-button
                 >
-                <el-button size="mini" type="primary" @click="uploadCode()"
+                <!-- <el-button size="mini" type="primary" @click="uploadCode()"
                     >下载二维码</el-button
-                >
+                > -->
             </el-form-item>
         </el-form>
 
@@ -154,6 +154,20 @@
                                 v-model="addDeviceParams.iotCode"
                             />
                         </el-form-item>
+
+                        <el-form-item
+                            label="设备状态: "
+                            prop="iotStatus"
+                            this.dialogConfig.outerTitle="修改设备"
+                        >
+                            <el-switch
+                                v-model="addDeviceParams.iotStatus"
+                                active-text="在线"
+                                inactive-text="离线"
+                                :active-value="0"
+                                :inactive-value="1"
+                            />
+                        </el-form-item>
                     </el-form>
 
                     <el-row style="margin-top: 20px; text-align: right">
@@ -237,6 +251,7 @@ export default {
             addDeviceParams: {
                 iotType: '',
                 iotCode: '',
+                iotStatus: 0,
             },
             // 新增设备表单校验
             addDeviceRules: {
@@ -296,6 +311,7 @@ export default {
                 this.dialogConfig.outerTitle = '修改设备'
                 this.addDeviceParams.iotId = row.iotId
                 this.addDeviceParams.iotCode = row.iotCode
+                this.addDeviceParams.iotStatus = row.iotStatus
                 this.addDeviceParams.iotType = parseInt(row.iotType)
             }
             this.dialogConfig.outerWidth = '40%'

sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue

@@ -13,9 +13,7 @@
                     <span>({{ deviceType }})</span>
                 </div>
 
-                <div class="equipment">
+                <div class="equipment"> 定位设备编号: {{ iotCode }} </div>
-                    定位设备编号: {{ equipmentNumber }}
-                </div>
                 <div class="equipment" v-if="false">{{ engineering }}工程</div>
                 <el-row :gutter="24">
                     <el-col :span="16">
@@ -195,7 +193,6 @@ export default {
             trackAni: null, // 轨迹实例
             calLon: '',
             calLat: '',
-
             // 查询设备行程信息的参数
             tripParams: {
                 beginTime: moment()

sgzb-ui/src/views/warehouseManage/machinery/coding/debug.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 编码设备管理 -->
-    <div class="app-container" id="devices">
+    <div class="app-container" id="devices" v-if="!props.isShow">
         <el-form
             :model="queryParams"
             ref="queryForm"
@@ -119,7 +119,7 @@
                     icon="el-icon-download"
                     size="mini"
                     @click="handleExport"
-                    v-hasPermi="['machinery:debug:export']"
+                    v-hasPermi="['machinery:coding:export']"
                     >导出</el-button
                 >
             </el-form-item>
@@ -135,6 +135,7 @@
         <el-table
             v-loading="loading"
             :data="devicesList"
+            border
             @selection-change="handleSelectionChange"
         >
             <el-table-column type="selection" width="55" align="center" />
@@ -151,13 +152,13 @@
                 label="设备类型"
                 align="center"
                 prop="deviceType"
-                :show-overflow-tooltip="true"
+                show-overflow-tooltip
             />
             <el-table-column
                 label="规格型号"
                 align="center"
                 prop="specificationType"
-                :show-overflow-tooltip="true"
+                show-overflow-tooltip
             >
             </el-table-column>
             <el-table-column
@@ -206,37 +207,53 @@
                     >
                 </template>
             </el-table-column>
+            <el-table-column label="IOT设备" align="center" prop="ownHouseName">
+                <template slot-scope="{ row }">
+                    <el-button type="text" @click="handleBindIOT(row)"
+                        >未绑定</el-button
+                    >
+                </template>
+            </el-table-column>
             <el-table-column
+                label="位置信息"
+                align="center"
+                prop="ownHouseName"
+            >
+                <template slot-scope="{ row }">
+                    <i
+                        class="el-icon-location location-icon"
+                        @click="handleMap(row)"
+                    />
+                </template>
+            </el-table-column>
+            <!-- <el-table-column
                 label="所在仓库"
                 align="center"
                 prop="ownHouseName"
-            />
+            /> -->
             <!--      <el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
             <!--        <template slot-scope="scope">-->
             <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
             <!--        </template>-->
             <!--      </el-table-column>-->
-            <el-table-column
+            <el-table-column label="操作" align="center" width="150">
-                label="操作"
-                align="center"
-                width="150"
-                class-name="small-padding fixed-width"
-            >
                 <template slot-scope="scope">
                     <el-button
+                        style="padding: 6px 10px"
                         size="mini"
                         type="primary"
                         icon="el-icon-edit"
                         @click="handleUpdate(scope.row)"
-                        v-hasPermi="['machinery:debug:edit']"
+                        v-hasPermi="['machinery:coding:edit']"
                         >编辑</el-button
                     >
                     <el-button
+                        style="padding: 6px 10px"
                         size="mini"
                         type="danger"
                         icon="el-icon-delete"
                         @click="handleDelete(scope.row)"
-                        v-hasPermi="['machinery:debug:del']"
+                        v-hasPermi="['machinery:coding:del']"
                         >删除</el-button
                     >
                 </template>
@@ -513,6 +530,16 @@
                 <!-- <el-button type="primary" @click="downloadCode">下 载</el-button> -->
             </div>
         </el-dialog>
+        <MapDialog
+            v-if="mapDialogVisible"
+            :deviceName="deviceName"
+            :deviceType="deviceType"
+            :iotCode="iotCode"
+            @handelCloseDialog="handelCloseDialog"
+        />
+    </div>
+    <div v-else>
+        <BindIOT :props="props" />
     </div>
 </template>
 
@@ -534,12 +561,22 @@ import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import QRCode from 'qrcodejs2'
 
+import BindIOT from './component/BindIOT'
+import MapDialog from './component/MapDIalog'
+
 export default {
     name: 'Devices',
     dicts: ['sys_normal_disable'],
-    components: { Treeselect },
+    components: { Treeselect, BindIOT, MapDialog },
     data() {
         return {
+            openMap: false,
+            isShow: false,
+            props: {
+                isShow: false,
+                typeId: '',
+                maCode: '',
+            },
             // 遮罩层
             loading: true,
             // 选中数组
@@ -604,6 +641,10 @@ export default {
                     },
                 ],
             },
+            mapDialogVisible: false,
+            deviceName: '',
+            deviceType: '',
+            iotCode: '',
         }
     },
     created() {
@@ -788,6 +829,29 @@ export default {
             //   ...this.queryParams
             // }, `type_${new Date().getTime()}.xlsx`)
         },
+
+        // iot设备绑定
+        handleBindIOT(row) {
+            console.log('🚀 ~ handleBindIOT ~ row:', row)
+            this.props = {
+                isShow: true,
+                typeId: row.typeId,
+                maCode: row.maCode,
+            }
+        },
+        // 查看设备地图
+        async handleMap(row) {
+            this.deviceName = row.specificationType
+            this.deviceType = row.maStatusName
+            this.iotCode = row.iotCode
+
+            this.mapDialogVisible = true
+        },
+
+        /** 关闭地图弹框 */
+        handelCloseDialog() {
+            this.mapDialogVisible = false
+        },
     },
 }
 </script>
@@ -801,8 +865,10 @@ export default {
     margin-top: 15px;
     font-size: 18px;
 }
-::v-deep.el-table .fixed-width .el-button--mini {
+
-    width: 60px !important;
+.location-icon {
-    margin-bottom: 10px;
+    font-size: 20px;
+    cursor: pointer;
+    color: #409eff;
 }
 </style>