小修改

src/views/module_tpm/equipmentRunStatis/history.vue

@@ -3,12 +3,23 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" :model="queryParams" ref="queryForm">
         <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <a-col :xl="8" :lg="7" :md="8" :sm="24">
             <a-form-item label="设备名称">
-              <j-search-select-tag v-model="queryParams.equipmentid" dict="tpm_equipment,equipmentname,id"  style="width: 100%"/>
+              <a-select
+              v-model="queryParam.equipmentid"
+              placeholder="请输入设备名称或设备编号"
+              show-search
+              :filterOption="filterOptions"
+              @search="searchDevice"
+              allowClear>
+                <a-select-option v-for="(item, index) in deviceOptions" :key="index" :value="item.id" :label="item.equipmentname">
+                  <span>{{item.equipmentname}}</span>
+                  <span style="position: absolute;right: 2%;">{{ item.equipmentcode }}</span>
+                </a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
-          <a-col :xl="6" :lg="11" :md="12" :sm="24">
+          <a-col :xl="4" :lg="11" :md="12" :sm="24">
             <a-form-item label="查询日期">
               <a-date-picker v-model="queryParams.date" placeholder="选择日期" style="width:100%;" @change="handleQuery" />
             </a-form-item>
@@ -86,6 +97,8 @@ export default {
         equipmentid: '1780110297413861377',
         // tagtype: null,
       },
+      deviceOptions: [],
+      deviceOptionsAll: [],
       dataSource: [],
       url: {
         list: '/tpmParams/tpmParams/list',
@@ -123,7 +136,9 @@ export default {
       ],
     }
   },
-  created() {},
+  created() {    
+    this.getDeviceOption();
+  },
   mounted() {
     this.$nextTick(() => {
       var now = this.dateformat(new Date()).substring(0, 10)
@@ -133,6 +148,40 @@ export default {
     })
   },
   methods: {
+    // 获取设备下拉列表
+    getDeviceOption(){
+      getAction(`/tpmEquipment/tpmEquipment/selectEquipmentList`).then(res=>{
+        this.deviceOptions = res.result.map((res) => {
+          return {
+            id: res.id,
+            equipmentname: res.equipmentname,
+            equipmentcode: res.equipmentcode,
+          }
+        })
+        // 存一个完整的设备表
+        this.deviceOptionsAll = this.deviceOptions
+      })
+    },
+    // 筛选设备
+    searchDevice(value) {
+      // 若输入的值删除，则重新赋完整的设备列表
+      if (value.trim().length === 0) {
+        this.deviceOptions = this.deviceOptionsAll
+      }
+      // 通过判断字符串中是数字还是文字进而判断是通过设备名筛选还是设备编号筛选
+      let panDuan = isNaN(parseFloat(value))
+      if (!panDuan) {
+        let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentcode.includes(value));
+        this.deviceOptions = filteredArray
+      } else {
+        let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentname.includes(value));
+        this.deviceOptions = filteredArray
+      }
+    },
+    // 解决筛选后option不回显问题
+    filterOptions(input, option) {
+      return this.deviceOptions
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.handleQuery()

src/views/module_tpm/equipmentRunStatis/realtime.vue

@@ -3,12 +3,23 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" :model="queryParams" ref="queryForm">
         <a-row :gutter="24">
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <a-col :xl="8" :lg="7" :md="8" :sm="24">
             <a-form-item label="设备名称">
-              <j-search-select-tag v-model="queryParams.equipmentid" dict="tpm_equipment,equipmentname,id"  style="width: 100%"/>
+              <a-select
+              v-model="queryParam.equipmentid"
+              placeholder="请输入设备名称或设备编号"
+              show-search
+              :filterOption="filterOptions"
+              @search="searchDevice"
+              allowClear>
+                <a-select-option v-for="(item, index) in deviceOptions" :key="index" :value="item.id" :label="item.equipmentname">
+                  <span>{{item.equipmentname}}</span>
+                  <span style="position: absolute;right: 2%;">{{ item.equipmentcode }}</span>
+                </a-select-option>
+              </a-select>
             </a-form-item>
           </a-col>
-          <a-col :xl="6" :lg="11" :md="12" :sm="24">
+          <a-col :xl="4" :lg="11" :md="12" :sm="24">
             <a-form-item label="查询日期">
               <a-date-picker v-model="queryParams.date" placeholder="选择日期" style="width:100%;" @change="handleSearch" />
             </a-form-item>
@@ -50,8 +61,10 @@ export default {
       },
       url: {
         list: '/equipmentOnoff/equipmentOnoff/getEquipmentHistoryData',
-        listparams: '/tpmParams/tpmParams/queryByEquipld',
+        listparams: '/tpmParams/tpmParams/queryByEquipId',
       },
+      deviceOptions: [],
+      deviceOptionsAll: [],
       // 时间
       timeList: [],
       // 表头
@@ -118,7 +131,9 @@ export default {
         {"logtime":"2024-02-05 08:00:00","CURR":0.5,"VOLT":340}],
     }
   },
-  created() {},
+  created() {
+    this.getDeviceOption();
+  },
   mounted() {
     var now = this.dateformat(new Date()).substring(0, 10)
     this.queryParams.date = now
@@ -126,6 +141,40 @@ export default {
     })
   },
   methods: {
+    // 获取设备下拉列表
+    getDeviceOption(){
+      getAction(`/tpmEquipment/tpmEquipment/selectEquipmentList`).then(res=>{
+        this.deviceOptions = res.result.map((res) => {
+          return {
+            id: res.id,
+            equipmentname: res.equipmentname,
+            equipmentcode: res.equipmentcode,
+          }
+        })
+        // 存一个完整的设备表
+        this.deviceOptionsAll = this.deviceOptions
+      })
+    },
+    // 筛选设备
+    searchDevice(value) {
+      // 若输入的值删除，则重新赋完整的设备列表
+      if (value.trim().length === 0) {
+        this.deviceOptions = this.deviceOptionsAll
+      }
+      // 通过判断字符串中是数字还是文字进而判断是通过设备名筛选还是设备编号筛选
+      let panDuan = isNaN(parseFloat(value))
+      if (!panDuan) {
+        let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentcode.includes(value));
+        this.deviceOptions = filteredArray
+      } else {
+        let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentname.includes(value));
+        this.deviceOptions = filteredArray
+      }
+    },
+    // 解决筛选后option不回显问题
+    filterOptions(input, option) {
+      return this.deviceOptions
+    },
     dateformat(date) {
       var year = date.getFullYear()
       var month = date.getMonth() + 1
@@ -165,8 +214,10 @@ export default {
       // 获取图表信息
       getAction(_this.url.listparams, _this.queryParams).then((res) => {
         if (res.success) {
+          console.log("listparams")
           _this.equipmentparams = res.result.records || res.result;
           getAction(_this.url.list, _this.queryParams).then((res) => {
+          console.log("list")
             if (res.success) {
             _this.mongodbdata = [];
               _this.mongodbdata = res.result.records || res.result;