设备实例页面和告警查询页面增加筛选条件

src/views/device-alarm/alarm-show/index.vue

@@ -7,8 +7,9 @@
         label-width="80px"
         inline
       >
-        <el-form-item label="设备类型:" prop="deviceType">
+        <el-form-item label="设备类型:">
           <el-select v-model="form.deviceType" @change="onDeviceTypeChange">
+            <el-option label="全部" :value="null" />
             <el-option
               v-for="(deviceType, index) in deviceTypeList"
               :key="index"
@@ -19,6 +20,7 @@
         </el-form-item>
         <el-form-item label="设备实例:" prop="deviceInstance">
           <el-select v-model="form.deviceInstance" placeholder="请选择">
+            <el-option label="全部" :value="null" />
             <el-option
               v-for="(deviceInstance, index) in deviceInstanceList"
               :key="index"
@@ -27,12 +29,6 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          label="设备名称:"
-          prop="deviceName"
-        >
-          <el-input v-model="form.deviceName" />
-        </el-form-item>
         <el-form-item
           label="告警等级:"
           prop="alarmLevel"
@@ -43,7 +39,7 @@
           </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>
@@ -216,20 +212,30 @@ export default {
       }
     }
   },
+  watch: {
+    'form.deviceType'(val) {
+      if (!val) {
+        this.form.deviceInstance = null
+        this.deviceInstanceList = []
+      }
+    }
+  },
   created() {
     const { deviceTypeId, deviceInstanceId } = this.$route.query
     getAllDeviceModel()
       .then(res => {
         this.deviceTypeList = res.data
-        this.form.deviceType = deviceTypeId || this.deviceTypeList.length ? this.deviceTypeList[0].id : null
+        this.form.deviceType = deviceTypeId || null
+      })
+      .then(_ => {
+        return this.form.deviceType ? getAllInstanceByDeviceTypeId({ deviceTypeId: this.form.deviceType }) : { data: [] }
       })
-      .then(_ => getAllInstanceByDeviceTypeId({ deviceTypeId: this.form.deviceType }))
       .then(res => {
         this.deviceInstanceList = res.data
-        this.form.deviceInstance = deviceInstanceId || this.deviceInstanceList.length ? this.deviceInstanceList[0].id : null
+        this.form.deviceInstance = deviceInstanceId || null
       })
       .then(_ => this.getTableData(1))
-      .catch(_ => {})
+      .catch(e => console.error(e))
   },
   mounted() {},
   methods: {

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

@@ -7,6 +7,16 @@
         label-width="80px"
         inline
       >
+        <el-form-item label="设备类型:">
+          <el-select v-model="searchForm.deviceTypeId">
+            <el-option
+              v-for="(deviceType, index) in deviceTypeList"
+              :key="index"
+              :label="deviceType.name"
+              :value="deviceType.id"
+            />
+          </el-select>
+        </el-form-item>
         <el-form-item
           label="设备名称:"
           prop="name"
@@ -199,6 +209,7 @@ export default {
   data() {
     return {
       searchForm: {
+        deviceTypeId: null,
         name: null,
         onlineState: null
       },