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

<!--电位展示图表-->
<template>
  <el-dialog
      v-loading="loading"
      :close-on-click-modal="false"
      :visible.sync="show"
      append-to-body
      class="ems-dialog"
      destroy-on-close
      lock-scroll
      show-close
      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-table
        :data="tableData"
        class="common-table"
        max-height="400px"
        stripe
        style="width: 100%;">
      <el-table-column
          label="数据点位"
          prop="dataPoint">
      </el-table-column>
      <el-table-column
          label="数据点位名称"
          prop="dataPointName">
      </el-table-column>
      <el-table-column
          label="最新值"
          prop="pointValue">
      </el-table-column>
      <el-table-column
          label="更新时间"
          prop="updateTime">
      </el-table-column>
    </el-table>
    <el-pagination
        v-show="tableData.length>0"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :pager-count="5"
        :total="totalSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        small
        style="margin-top:15px;text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-dialog>
</template>
<script>
import {getDevicePointList} from "@/api/ems/site";
import {pointFuzzyQuery} from "@/api/ems/search";

export default {
  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
      }
    },
  },
  data(){
    return{
      show:false,
      loading:false,
      pointName:'',//点位名称
      deviceCategory:'',
      deviceName:'',
      deviceId:'',
      siteId:'',
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
    }
  },
  methods:{
    pointNameSearch(){
      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
      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 || [];
        this.totalSize = response?.total || 0
      }).finally(() => {this.loading=false})
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      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{
    line-height: 40px;
  }
}

</style>