safePower/src/view/equipment/list/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-input v-model="searchInfo.username" placeholder="设备ID" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="searchInfo.nickname" placeholder="设备状态" />
        </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="设备图片" min-width="75">
          <template #default="scope">
            <CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
          </template>
        </el-table-column> -->
        <el-table-column align="left" label="设备ID" prop="cbId" />
        <el-table-column align="left" label="项目ID" prop="projectId" />
        <el-table-column align="left" label="网关ID" prop="gatewayId" />
        <el-table-column align="left" label="设备状态">
          <template #default="scope">
            <el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'">{{
              scope.row.deviceStatus == 1 ? '合闸' : '分闸'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="网络">
          <template #default="scope">
            <el-tag :type="scope.row.netStatus == 1 ? 'primary' : 'info'">{{
              scope.row.netStatus == 1 ? '在线' : '离线'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="设备类型名称" prop="cbTypeName" />
        <el-table-column align="left" label="网关mac" prop="gatewayMac" />
        <el-table-column align="left" label="创建时间" prop="createTime" />

        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-link underline="never" type="primary" @click="changeStatus(scope.row)">合分闸</el-link>
            <!-- <el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)">删除</el-button> -->
            <!-- <el-button type="primary" link icon="edit" @click="openEdit(scope.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/list'

  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({
    username: '',
    nickname: '',
    phone: '',
    email: ''
  })

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

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

  // 合分闸
  const changeStatus = (row) => {
    ElMessageBox.confirm(row.deviceStatus == 1 ? '确认合闸吗？' : '确认分闸吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await serve.deviceOperation({
        id: row.ID,
        gatewayId: row.gatewayId,
        para: row.deviceStatus == 1 ? '0xA2' : '0xA1'
      })
      if (res.code === 0) {
        ElMessage.success('操作成功')
        getTableData()
      }
    })
  }

  // 分页
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }
  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }
  // 查询
  const getTableData = async () => {
    const table = await serve.getDeviceListByPage({
      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 = {
      username: '',
      nickname: '',
      phone: '',
      email: ''
    }
    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>