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

<template>
  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
    <el-form :inline="true" class="select-container">
        <el-form-item label="站点选择">
          <el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
            <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
        <el-button @click="onReset" native-type="button">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      class="common-table"
      :data="tableData"
      stripe
      max-height="600px"
      style="width: 100%;margin-top: 25px">
      <el-table-column
        prop="siteId"
        label="站点ID">
      </el-table-column>
      <el-table-column
        prop="siteName"
        label="站点名称">
      </el-table-column>
      <el-table-column
        prop="deviceId"
        label="设备ID"
      >
      </el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备名称">
      </el-table-column>
      <el-table-column
        prop="deviceType"
        label="设备类型">
      </el-table-column>
      <el-table-column
        prop="communicationStatus"
        label="通信状态">
        <template slot-scope="scope">
          <span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button
            @click="toDetail(scope.row.deviceId)"
            type="primary"
            size="small">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="tableData.length>0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      style="margin-top:15px;text-align: center"
    >
    </el-pagination>
    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
      <div class="descriptions-main" style="padding: 0" >
        <el-descriptions direction="vertical" :column="2" :colon="false" border>
          <el-descriptions-item v-for="item in detailData" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getDeviceInfoList,getDeviceDetailInfo} from'@/api/ems/site'
import {getAllSites} from '@/api/ems/zddt'
import {formatNumber} from "@/filters/ems";
export default {
  name: "Sblb",
  data() {
    return {
      loading:false,
      searchLoading:false,
      siteId:'',
      siteList:[],
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
      dialogTableVisible:false,
      detailData:[
        {label:'设备ID',value:'',attr:'deviceId'},
        {label:'设备名称',value:'',attr:'deviceName'},
        {label:'设备类型',value:'',attr:'deviceType'},
        {label:'通信状态',value:'',attr:'communicationStatus'},
        {label:'TCP设备的IP地址',value:'',attr:'ipAddress'},
        {label:'TCP端口号',value:'',attr:'ipPort'},
        {label:'串口路径',value:'',attr:'serialPort'},
        {label:'波特率',value:'',attr:'baudRate'},
        {label:'数据位',value:'',attr:'dataBits'},
        {label:'停止位',value:'',attr:'stopBits'},
        {label:'校验位',value:'',attr:'parity'},
        {label:'设备描述',value:'',attr:'description'},
        {label:'设备类别',value:'',attr:'deviceCategory'},
        {label:'上级设备ID',value:'',attr:'parentId'},
        {label:'设备唯一标识符',value:'',attr:'deviceId'},
      ],
      detailformatAttr:{
        'deviceType':'deviceTypeOptions',
        'communicationStatus':'communicationStatusOptions',
      }
    }
  },
  methods:{
    handleClosed(done){
      this.detailData.forEach((item)=>{item.value = ''})
      done()
    },
    toDetail(deviceId){
      this.loading = true
      getDeviceDetailInfo(deviceId).then(response => {
        const data = response?.data || {};
        this.detailData.forEach(item=>{
          if(this.detailformatAttr[item.attr]){
            item.value=formatNumber(this.$store.state.ems[this.detailformatAttr[item.attr]][data[item.attr]]);
          }else{
            item.value=formatNumber(data[item.attr]);
          }

        })
        this.dialogTableVisible = true
      }).finally(() => {this.loading = false})

    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(()=>{
        this.getData()
      })
    },
    // 搜索
    onSearch(){
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 重置
    onReset(){
      this.siteId=''
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    // 获取数据
    getData(){
      this.loading=true
      const {siteId,pageNum,pageSize} =this
      getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
        this.tableData=response?.rows || [];
        this.totalSize = response?.total || 0
      }).finally(() => {this.loading=false})
    },
    //获取站点列表
    getZdList(){
      this.searchLoading=true
      getAllSites().then(response => {
        this.siteList = response?.data || []
      }).finally(() => {this.searchLoading=false})
    }
  },
  mounted() {
    this.onReset()
    this.getZdList()
  }
}
</script>

<style scoped lang="scss">

</style>