2024-09-09 修改了大部分下拉组件为模糊筛选，减轻前端渲染压力

src/views/DeviceManagement/EquipmentState/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div style="margin-top: 7px; margin-bottom: 7px">
+        <span style="font-size: 13px;color: black">日期</span>
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          type="daterange"
+          align="center"
+          style="width: 240px;"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          range-separator="～"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          @change="searchTable()"/>
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        highlight-current-row
+        border
+        stripe
+        size="small"
+        style="width: 771px"
+        height="748"
+        @sort-change="sortChange">
+        <el-table-column
+          :width="setColumnWidth('物料编号')"
+          label="工位号"
+          align="center"
+          prop="状态"
+          sortable="custom"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.工位号 }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :width="setColumnWidth('加工设备')"
+          label="设备名称"
+          align="center"
+          sortable="custom"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.设备名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :width="setColumnWidth('加工设备')"
+          label="工作时长"
+          align="center"
+          sortable="custom"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.工作时长 }}
+          </template>
+        </el-table-column>
+        <el-table-column :width="setColumnWidth('加工设备')" label="关机时长" align="center" sortable="custom">
+          <template slot-scope="scope">
+            {{ scope.row.关机时长 }}
+          </template>
+        </el-table-column>
+        <el-table-column :width="setColumnWidth('加工设备')" label="报警时长" align="center" sortable="custom">
+          <template slot-scope="scope">
+            {{ scope.row.报警时长 }}
+          </template>
+        </el-table-column>
+        <el-table-column :width="setColumnWidth('加工设备')" label="空闲时长H" sortable="custom" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.空闲时长 }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data() {
+    return {
+      customerNameValue: '', // 买方名称
+      customerName: [], // 买方名称数组
+      dateRange: '', // 提交日期
+      contractStateValue: '', // 合同状态
+      contractState: [
+        {
+          value: 2,
+          label: '未提交'
+        }, {
+          value: 1,
+          label: '提交'
+        }
+      ], // 合同状态数组
+      loading: false, // 数据加载
+      total: 0, // 分页总数
+      tableData: [], // 合同信息表
+      pageCurrent: 1, // 分页当前页
+      pageSize: 100, // 分页每页显示条数
+      orderName: '', // 排序列名
+      order: '' // 排序方式
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'token'
+    ])
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      this.getCustomer('')
+    },
+    getCustomer(query) {
+      this.customerName = []
+      var param = []
+      param[0] = ['客户名称', query]
+      var Data = this.CreateData('11', '合同管理_客户信息_查询数据_bak', param)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.customerName.push({
+            label: response.data[i].客户名称,
+            value: response.data[i].客户流水号
+          })
+        }
+      })
+    },
+    searchTable() {
+      var param = []
+      param[0] = ['排序名称', this.orderName]
+      param[1] = ['排序方式', this.order]
+      param[2] = ['开始时间', this.dateRange[0]]
+      param[3] = ['结束时间', this.dateRange[1]]
+      var Data = this.CreateData('11', '设备管理_设备状态统计_查询数据', param, this.pageSize, this.pageCurrent)
+      this.ExecDatabase(Data).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.tableData.push({
+            工位号: response.data[i].工位号,
+            设备名称: response.data[i].设备名称,
+            工作时长: response.data[i].工作时长,
+            关机时长: response.data[i].关机时长,
+            报警时长: response.data[i].报警时长,
+            空闲时长: response.data[i].空闲时长,
+            edit: false
+          })
+        }
+        this.tableData = response.data.rows
+        this.total = response.data.total
+      })
+    },
+    sortChange(column) {
+      if (column.prop === '工位号') {
+        this.orderName = 1
+      }
+      if (column.order === 'ascending') {
+        this.order = 1
+      } else if (column.order === 'descending') {
+        this.order = 2
+      } else {
+        this.order = ''
+      }
+      this.searchTable()
+    },
+    handleSizeChanges(val) {
+      this.pageCurrent = 1
+      this.pageSize = val
+      this.searchTable()
+    },
+    handleCurrentChanges(val) {
+      this.pageCurrent = val
+      this.searchTable()
+    }
+  }
+}
+</script>
+