增加设备接入信息dialog

src/views/equipment-access-management/equipment-access.vue

 <template>
-  <div>1</div>
+  <div>
+    <el-card class="no-bottom">
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="80px"
+        inline
+      >
+        <el-form-item
+          label="设备类型:"
+          prop="deviceTypeId"
+        >
+          <el-select
+            v-model="searchForm.deviceTypeId"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in deviceTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="设备名称:"
+          prop="name"
+        >
+          <el-input v-model="searchForm.name" maxlength="50" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="getTableData(1)">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="margin-top-20">
+      <el-table
+        :data="tableData"
+        border
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          width="50px"
+          align="center"
+        />
+        <el-table-column
+          prop="deviceTypeName"
+          label="设备类型"
+        />
+        <el-table-column
+          prop="name"
+          label="设备名称"
+        />
+        <el-table-column
+          prop="description"
+          label="设备描述"
+        />
+        <el-table-column
+          prop="businessId"
+          label="设备业务ID"
+          min-width="155"
+        />
+        <el-table-column
+          prop="deviceModel"
+          label="设备型号"
+          min-width="155"
+        />
+        <el-table-column
+          label="操作"
+          width="120px"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" @click="showAccessInfoDialog(scope.row)">接入信息</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="margin-top-20 text-align-right"
+        :current-page="pageForm.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageForm.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageForm.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <el-dialog
+      title="设备接入信息"
+      :visible.sync="dialogVisible"
+      width="700px"
+    >
+      <div>
+        <el-card class="no-bottom">
+          <div slot="header" class="clearfix">
+            <span>基本信息</span>
+          </div>
+          <el-row>
+            <descriptions-item label="通信ID" :value="accessData.communicationId" />
+          </el-row>
+        </el-card>
+        <el-card class="margin-top-20">
+          <div slot="header" class="clearfix">
+            <span>MQTT信息</span>
+          </div>
+          <el-table
+            :data="accessData.mqttTopicInfoVOList"
+            style="width: 100%; height: 310px;"
+            border
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50px"
+              align="center"
+            />
+            <el-table-column
+              prop="dataModelName"
+              label="数据模型"
+            />
+            <el-table-column
+              prop="mqttTopic"
+              label="Topic"
+            />
+          </el-table>
+        </el-card>
+      </div>
+      <div class="el-dialog__footer">
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import { getTableData, getAccessInfo } from '@/api/equipment-management/device-instance'
+import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
 export default {
-  name: 'EquipmentAccess'
+  name: 'DeviceAccess',
+  components: {},
+  props: {},
+  data() {
+    return {
+      searchForm: {
+        name: null,
+        deviceTypeId: null
+      },
+      deviceTypeList: [],
+      accessData: {
+        communicationId: null,
+        mqttTopicInfoVOList: []
+      },
+      dialogVisible: false,
+      tableData: [],
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
+      },
+      currentId: null,
+      currentDeviceTypeId: null
+    }
+  },
+  created() {
+    this.getTableData(1)
+    // 初始化设备类型
+    getAllDeviceModel()
+      .then(res => {
+        this.deviceTypeList = res.data.map(v => {
+          return {
+            value: v.id,
+            label: v.name
+          }
+        })
+      })
+      .catch(err => this.$message.error(err.message))
+  },
+  mounted() {},
+  methods: {
+    getTableData(pageNum) {
+      const params = {
+        ...this.searchForm,
+        pageNum,
+        pageSize: this.pageForm.pageSize
+      }
+      getTableData(params)
+        .then(res => {
+          const { records, total } = res.data
+          this.tableData = records
+          this.pageForm.total = total
+        })
+        .catch(err => this.$message.error(err.message))
+    },
+    showAccessInfoDialog(row) {
+      this.accessData = {
+        communicationId: null,
+        mqttTopicInfoVOList: []
+      }
+      this.dialogVisible = true
+      const params = { 'id': row.id }
+      getAccessInfo(params)
+        .then(res => {
+          this.accessData = res.data
+        })
+        .catch(err => this.$message.error(err.message))
+    },
+    resetForm() {
+      this.$refs.searchForm.resetFields()
+    },
+    handleSizeChange(val) {
+      this.pageForm.pageSize = val
+      this.getTableData(1)
+    },
+    handleCurrentChange(val) {
+      this.pageForm.pageNum = val
+      this.getTableData(val)
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 </style>