优化0918

src/views/ems/site/sblb/PointTable.vue

@@ -9,27 +9,37 @@
       destroy-on-close
       lock-scroll
       show-close
-      title="点位列表"
+      title="点位清单"
       width="800px"
   >
-    <div style="margin-bottom: 20px">
-      <el-input v-model="pointName" placeholder="请输入点位" clearable style="width: 200px"></el-input>
-<!--      <el-autocomplete-->
-<!--          v-model="pointName"-->
-<!--          placeholder="请输入点位"-->
-<!--          clearable-->
-<!--          :fetch-suggestions="querySearchAsync"-->
-<!--          @select="handleSelect"-->
-<!--      ></el-autocomplete>-->
 
-      <el-button type="primary" style="margin-left: 20px" @click="pointNameSearch">搜索</el-button>
-    </div>
+    <el-form :inline="true">
+      <el-form-item label="点位名称">
+        <el-input v-model="form.dataPointName" clearable placeholder="请输入点位名称" style="width: 150px"></el-input>
+      </el-form-item>
+      <el-form-item label="点位">
+        <el-input v-model="form.dataPoint" clearable placeholder="请输入点位" style="width: 150px"></el-input>
+      </el-form-item>
+      <br>
+      <el-form-item label="最小值">
+        <el-input v-model="form.lower" clearable placeholder="请输入最小值" style="width: 150px"></el-input>
+      </el-form-item>
+      <el-form-item label="最大值">
+        <el-input v-model="form.upper" clearable placeholder="请输入最大值" style="width: 150px"></el-input>
+      </el-form-item>
+      <el-form-item style="margin-left: 20px">
+        <el-button type="primary" @click="search">搜索</el-button>
+      </el-form-item>
+    </el-form>
+
     <el-table
         :data="tableData"
         class="common-table"
         max-height="400px"
         stripe
-        style="width: 100%;">
+        style="width: 100%;"
+        :default-sort = "{prop: 'updateTime', order: 'descending'}"
+        @sort-change="changeSort">
       <el-table-column
           label="数据点位"
           prop="dataPoint">
@@ -44,7 +54,9 @@
       </el-table-column>
       <el-table-column
           label="更新时间"
-          prop="updateTime">
+          prop="updateTime"
+          sortable="custom"
+      >
       </el-table-column>
     </el-table>
     <el-pagination
@@ -66,96 +78,113 @@
 </template>
 <script>
 import {getDevicePointList} from "@/api/ems/site";
-import {pointFuzzyQuery} from "@/api/ems/search";
 
 export default {
-  watch:{
+  watch: {
     show(val) {
-      if(!val){
-        this.tableData=[]
-        this.deviceId=''
-        this.deviceName=''
-        this.siteId=''
-        this.pageSize=10
-        this.pageNum=1
-        this.totalSize=0
-        this.pointName=''
-        this.loading =false
+      if (!val) {
+        this.tableData = []
+        this.deviceId = ''
+        this.deviceName = ''
+        this.siteId = ''
+        this.pageSize = 10
+        this.pageNum = 1
+        this.totalSize = 0
+        this.form = {
+          sortMethod: 'desc',//升序不传或者asc、降序desc）
+          dataPointName: '',//点位名称
+          dataPoint: '',//点位名称
+          lower: '',//
+          upper: '',//
+        }
+        this.loading = false
       }
     },
   },
-  data(){
-    return{
-      show:false,
-      loading:false,
-      pointName:'',//点位名称
-      deviceCategory:'',
-      deviceName:'',
-      deviceId:'',
-      siteId:'',
-      tableData:[],
-      pageSize:10,//分页栏当前每个数据总数
-      pageNum:1,//分页栏当前页数
-      totalSize:0,//table表格数据总数
+  data() {
+    return {
+      show: false,
+      loading: false,
+      form: {
+        sortMethod: 'desc',//升序不传或者asc、降序desc）
+        dataPointName: '',//点位名称
+        dataPoint: '',//点位名称
+        lower: '',//
+        upper: '',//
+      },
+      deviceCategory: '',
+      deviceName: '',
+      deviceId: '',
+      siteId: '',
+      tableData: [],
+      pageSize: 10,//分页栏当前每个数据总数
+      pageNum: 1,//分页栏当前页数
+      totalSize: 0,//table表格数据总数
     }
   },
-  methods:{
-    pointNameSearch(){
-      this.pageNum=1
+  methods: {
+    changeSort(c) {
+      console.log('切换排序方式', c)
+      if(c.prop === "updateTime" && c.order){
+        this.form.sortMethod = c.order === 'descending' ? 'desc' : 'asc'
+        this.getData()
+      }
+    },
+    search() {
+      this.pageNum = 1
       this.getData()
     },
-    showTable({deviceCategory,siteId,deviceId,deviceName}){
-      this.deviceCategory =deviceCategory
-      this.siteId=siteId
-      this.deviceId=deviceId
-      this.deviceName=deviceName
-      this.show=true
+    showTable({deviceCategory, siteId, deviceId, deviceName}) {
+      this.deviceCategory = deviceCategory
+      this.siteId = siteId
+      this.deviceId = deviceId
+      this.deviceName = deviceName
+      this.show = true
       this.getData()
     },
-    getData(){
-      this.loading=true
-      const {siteId,deviceId,deviceCategory,pageNum,pageSize,pointName} =this
-      getDevicePointList({siteId,deviceId,deviceCategory,pageNum,pageSize,dataPointName:pointName}).then(response => {
-        this.tableData=response?.rows || [];
+    getData() {
+      this.loading = true
+      const {
+        siteId,
+        deviceId,
+        deviceCategory,
+        pageNum,
+        pageSize,
+        form: {sortMethod, dataPointName, dataPoint, lower, upper}
+      } = this
+      getDevicePointList({
+        siteId,
+        deviceId,
+        deviceCategory,
+        pageNum,
+        pageSize,
+        sortMethod, dataPointName, dataPoint, lower, upper
+      }).then(response => {
+        this.tableData = response?.rows || [];
         this.totalSize = response?.total || 0
-      }).finally(() => {this.loading=false})
+      }).finally(() => {
+        this.loading = false
+      })
     },
     // 分页
     handleSizeChange(val) {
       this.pageSize = val;
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
         this.getData()
       })
     },
     handleCurrentChange(val) {
       this.pageNum = val
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
         this.getData()
       })
     },
-    //点位
-    handleSelect(data){
-      this.pointName = data.value
-    },
-    querySearchAsync(query,cb){
-      console.log('查询数据',query)
-      pointFuzzyQuery({
-        siteIds:[this.siteId],
-        categoryName:this.deviceName,
-        pointName:query,
-      }).then(response => {
-        const data  = response?.data || []
-        cb(data.map(item => {
-          return {name: item, value: item}
-        }))
-      })
-    },
   }
 }
 </script>
 <style lang="scss" scoped>
 ::v-deep {
-  .card-title .el-radio{
+  .card-title .el-radio {
     line-height: 40px;
   }
 }