✨ feat: 历史数据-厂界在线 功能1；修改设备选择组件功能

ruoyi-ui/src/components/DeviceSelect/index.vue

@@ -8,13 +8,20 @@
       :filterable="filterable"
       :multiple="multiple"
       @change="handleChange"
+      :filter-method="dataFilter"
     >
       <el-option
         v-for="item in deviceList"
         :key="item.sn"
         :label="item.name"
         :value="item.sn"
-      ></el-option>
+      >
+        <span>
+          {{ item.name }}
+          (<span style="color: #8492a6; font-size: 13px">{{ item.sn }}</span>)
+        </span>
+
+      </el-option>
     </el-select>
   </div>
 </template>
@@ -69,6 +76,10 @@
       }
     },
     methods: {
+      dataFilter(query) {
+        if (!query) return this.deviceList = this.deviceListCopy;
+        this.deviceList = this.deviceListCopy.filter(item => item.name.includes(query) || item.sn.includes(query));
+      },
       handleChange(val) {
         this.$emit("input", val);
         this.$emit("change", val);

ruoyi-ui/src/views/history/bound/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="app-container">
     <el-form :inline="true" :model="queryParams" ref="form">
-      <el-form-item label="选择部门" prop="factoryId">
+      <el-form-item label="选择部门1" prop="factoryId">
         <dept-tree @deptChange="handleDeptChange" style="width: 150px;" />
       </el-form-item>
 
-      <el-form-item label="设备编号">
-        <el-input v-model="queryParams.sn"></el-input>
+      <el-form-item label="选择设备">
+        <device-select v-model="queryParams.sn" :deptId="queryParams.deptId || ''" />
       </el-form-item>
       <el-form-item label="日期" prop="equipmentName">
         <el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -66,9 +66,10 @@
 import store from "@/store";
 import DeptTree from "@/components/DeptTree/index.vue";
 import { listAlarmHistory } from "@/api/demostrate/monitor";
+import DeviceSelect from '@/components/DeviceSelect/index.vue';
 export default {
   name: "alarm",
-  components: { DeptTree },
+  components: { DeptTree, DeviceSelect },
   dicts: [],
   data() {
     return {
@@ -153,9 +154,6 @@ export default {
         this.total = response.total;
         this.loading = false;
       });
-
- 
-
     },
     handleQuery() {
       this.queryParams.pageNum = 1