提交设备实例页面

src/api/equipment-management/device-instance.js

@@ -5,7 +5,34 @@ const baseURL = ''
 // 获取数据集列表-分页
 export function getTableData(data) {
   return request({
-    url: `${baseURL}/cc/linque/getDatasetList`,
+    url: `${baseURL}/iot/deviceModel/instance/list`,
+    method: 'post',
+    data
+  })
+}
+
+// 新建设备实例
+export function addDeviceInstance(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/instance/add`,
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备实例
+export function updateDeviceInstance(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/instance/edit`,
+    method: 'post',
+    data
+  })
+}
+
+// 编辑设备实例
+export function deleteDeviceInstance(data) {
+  return request({
+    url: `${baseURL}/iot/deviceModel/instance/delete`,
     method: 'post',
     data
   })

src/views/equipment-management/device-instance/index.vue

@@ -9,22 +9,22 @@
       >
         <el-form-item
           label="设备名称:"
-          prop="input"
+          prop="name"
         >
-          <el-input v-model="searchForm.input" />
+          <el-input v-model="searchForm.name" />
         </el-form-item>
         <el-form-item
-          label="设备分类:"
-          prop="status"
+          label="在线状态:"
+          prop="onlineState"
         >
-          <el-select v-model="searchForm.status" placeholder="请选择">
+          <el-select v-model="searchForm.onlineState" placeholder="请选择">
             <el-option label="全部" :value="null" />
-            <el-option label="正常" :value="0" />
-            <el-option label="锁定" :value="1" />
+            <el-option label="离线" :value="0" />
+            <el-option label="在线" :value="1" />
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
+          <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>
@@ -32,7 +32,7 @@
 
     <el-card class="margin-top-20">
       <div class="buttons-group" style="margin-bottom: 20px">
-        <el-button type="primary">增加实例</el-button>
+        <el-button type="primary" @click="showAddItem">增加实例</el-button>
       </div>
       <el-table
         :data="tableData"
@@ -45,43 +45,46 @@
           align="center"
         />
         <el-table-column
-          prop="a"
-          label="设备名称"
+          prop="deviceTypeName"
+          label="设备类型"
         />
         <el-table-column
-          prop="b"
-          label="设备描述"
-        />
-        <el-table-column
-          prop="c"
-          label="设备分类"
+          prop="name"
+          label="设备名称"
         />
         <el-table-column
-          prop="d"
-          label="设备状态"
+          prop="description"
+          label="设备描述"
         />
         <el-table-column
-          prop="e"
-          label="运行状态"
+          prop="businessId"
+          label="设备业务ID"
+          min-width="155"
         />
         <el-table-column
-          prop="f"
-          label="运行时长"
+          prop="deviceModel"
+          label="设备型号"
+          min-width="155"
         />
+
         <el-table-column
-          prop="g"
-          label="上次启动时间"
+          prop="onlineState"
+          label="在线状态"
+          :formatter="$_dictionaryFormat"
         />
         <el-table-column
-          prop="h"
-          label="上次停机时间"
+          prop="onlineUpdateTime"
+          label="在线状态更新时间"
+          min-width="150px"
+          :formatter="$moment"
         />
+
         <el-table-column
           label="操作"
           width="320px"
           align="center"
         >
-          <template>
+          <template slot-scope="scope">
             <el-button
               type="text"
               @click="goto('/device-management/device-detail')"
@@ -95,8 +98,14 @@
               @click="goto('/device-management/history-data')"
             >历史数据</el-button>
             <el-button type="text" @click="goto('/device-alarm/alarm-show')">告警历史</el-button>
-            <el-button type="text">编辑</el-button>
-            <el-button type="text">删除</el-button>
+            <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
+            <el-popconfirm
+              title="确定要删除此条记录吗？"
+              style="margin-left: 10px"
+              @onConfirm="deleteItem(scope.row.id)"
+            >
+              <el-button slot="reference" type="text">删除</el-button>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
@@ -114,45 +123,74 @@
     </el-card>
 
     <el-dialog
-      :title="add ? '增加系统' : '编辑系统'"
+      :title="add ? '新增实例' : '编辑实例'"
       :visible.sync="dialogVisible"
       width="700px"
     >
       <el-form
         v-if="dialogVisible"
-        :model="addForm"
+        ref="instanceForm"
+        :model="instanceForm"
         label-width="90px"
+        :rules="rules"
+      >
+        <el-form-item
+          label="设备名称:"
+          prop="name"
+        >
+          <el-input v-model="instanceForm.name" />
+        </el-form-item>
+        <el-form-item
+          label="设备描述:"
+          prop="description"
         >
+          <el-input
+            v-model="instanceForm.description"
+            type="textarea"
+            :row="2"
+          />
+        </el-form-item>
         <el-form-item
-          label="input:"
+          label="设备业务ID:"
         >
-          <el-input v-model="addForm.input" />
+          <el-input v-model="instanceForm.businessId" />
         </el-form-item>
         <el-form-item
-          label="status:"
+          label="设备型号:"
         >
-          <el-input v-model="addForm.status" />
+          <el-input v-model="instanceForm.deviceModel" />
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="saveSystem">确 定</el-button>
+        <el-button type="primary" @click="addItem">确 定</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getTableData } from '@/api/equipment-management/device-instance'
+import { getTableData, addDeviceInstance, updateDeviceInstance, deleteDeviceInstance } from '@/api/equipment-management/device-instance'
+import dictionary from '@/utils/dictionary'
 export default {
   name: 'DeviceInstance',
   components: {},
+  mixins: [
+    dictionary
+  ],
   props: {},
   data() {
     return {
       searchForm: {
-        input: null,
-        status: null
+        name: null,
+        onlineState: null
+      },
+      instanceForm: {
+        deviceTypeId: null,
+        name: null,
+        description: null,
+        businessId: null,
+        deviceModel: null
       },
       add: true,
       dialogVisible: false,
@@ -167,25 +205,35 @@ export default {
         total: 0
       },
       deviceStatusDialog: false,
-      deviceHistoryDialog: false
+      deviceHistoryDialog: false,
+      rules: {
+        name: [
+          { required: true, message: '请输入设备名称', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入设备描述', trigger: 'blur' }
+        ]
+      },
+      currentId: null,
+      currentDeviceTypeId: null
     }
   },
   created() {
-    this.tableData = [
-      {
-        a: 1,
-        d: '健康',
-        e: '运行中'
-      },
-      {
-        a: 2,
-        d: '故障',
-        e: '已停机'
-      }
-    ]
+    this.getTableData(1)
   },
   mounted() {},
   methods: {
+    showAddItem() {
+      this.instanceForm = {
+        deviceTypeId: this.currentDeviceTypeId,
+        name: null,
+        description: null,
+        businessId: null,
+        deviceModel: null
+      }
+      this.dialogVisible = true
+      this.add = true
+    },
     goto(url) {
       this.$router.push(url)
     },
@@ -197,9 +245,9 @@ export default {
       }
       getTableData(params)
         .then(res => {
-          const { records, totalSize } = res.data
+          const { records, total } = res.data
           this.tableData = records
-          this.pageForm.total = totalSize
+          this.pageForm.total = total
         })
         .catch(err => console.error(err))
     },
@@ -210,12 +258,44 @@ export default {
       this.add = true
       this.dialogVisible = true
     },
-    editItem() {
-      this.add = false
+    editItem(row) {
+      const { id, deviceTypeId, name, description, businessId, deviceModel } = row
+      this.instanceForm = {
+        deviceTypeId,
+        name,
+        description,
+        businessId,
+        deviceModel
+      }
+      this.currentId = id
       this.dialogVisible = true
+      this.add = false
+    },
+    addItem() {
+      this.$refs.instanceForm.validate()
+        .then(_ => {
+          return { ...this.instanceForm }
+        })
+        .then(params => {
+          if (!this.add) { params.id = this.currentId }
+          return this.add ? addDeviceInstance(params) : updateDeviceInstance(params)
+        })
+        .then(_ => this.$message.success('操作成功'))
+        .then(_ => this.getTableData(this.pageForm.pageNum))
+        .then(_ => {
+          this.dialogVisible = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    deleteItem(id) {
+      deleteDeviceInstance({ id })
+        .then(_ => this.getTableData(this.pageForm.pageNum))
+        .catch(err => {
+          this.$message.error(err.message)
+        })
     },
-    deleteItem(id) {},
-    saveSystem() {},
     handleSizeChange(val) {
       this.pageForm.pageSize = val
       this.getTableData(1)