safePower/src/view/equipment/particulars/index.vue

<template>
  <div>
    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="设备状态">
          <!-- <el-select v-model="searchInfo.deviceStatus" placeholder="请选择">
            <el-option label="合闸" :value="1" />
            <el-option label="分闸" :value="0" />
          </el-select> -->
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit"> 查询 </el-button>
          <el-button icon="refresh" @click="onReset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
      </div>
      <el-table :data="tableData" row-key="ID">
        <el-table-column align="left" label="设备ID" prop="deviceId"> </el-table-column>
        <el-table-column align="left" label="运行时长" prop="runtime">
          <template #default="{ row }">
            <span>{{ row.runtime || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="信号质量" prop="signalQuality">
          <template #default="{ row }">
            {{ row.signalQuality || '' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="电压（V）" prop="leakageCurrent">
          <template #default="{ row }">
            {{ row.leakageCurrent || '' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="漏电流值（mA）" prop="leakageCurrent">
          <template #default="{ row }">
            {{ row.leakageCurrent || '' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="累计用电量" prop="cumulativeElectricity">
          <template #default="{ row }">
            {{ row.cumulativeElectricity || '' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="电流值（A）" prop="current">
          <template #default="{ row }">
            {{ row.current || '' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="内部温度（℃）" prop="internalTemperature">
          <template #default="{ row }">
            {{ row.internalTemperature || '' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="N相下端温度（℃）" prop="nLowerTemperature">
          <template #default="{ row }">
            {{ row.nLowerTemperature || '' }}
          </template>
        </el-table-column>
        <el-table-column align="left" label="功率因数（%）" prop="powerFactor">
          <template #default="{ row }">
            {{ row.powerFactor || '' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <!-- <el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)">删除</el-button> -->
            <!-- <el-button type="primary" link icon="Tickets" @click="openDetails(row)">查看</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
  import * as serve from '@/api/equipment/particulars'

  import { nextTick, ref, watch, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  // import { id } from 'element-plus/es/locale'
  import { useAppStore } from '@/pinia'

  const appStore = useAppStore()

  const searchInfo = ref({
    deviceStatus: ''
  })

  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])

  onMounted(() => {
    getTableData()
  })

  // 分页
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }
  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }
  // 查询
  const getTableData = async () => {
    const table = await serve.getDeviceDetailsListByPage({
      page: page.value,
      pageSize: pageSize.value,
      ...searchInfo.value
    })
    if (table.code === 0) {
      tableData.value = table.data.list
      total.value = table.data.total
      page.value = table.data.page
      pageSize.value = table.data.pageSize
    }
  }

  const onSubmit = () => {
    page.value = 1
    getTableData()
  }

  const onReset = () => {
    searchInfo.value = {
      deviceStatus: ''
    }
    getTableData()
  }
</script>

<style lang="scss">
  .header-img-box {
    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
  }
</style>