admin-fiveFollowing/src/views/deviceManage/powerEquip/deviceDetails.vue

<template>
  <el-table
    :data="
      deviceNumData.filter(
        (data) =>
          !filter_Text ||
          data.monitorDeviceName
            .toLowerCase()
            .includes(filter_Text.toLowerCase()) ||
          data.monitorDeviceCode
            .toLowerCase()
            .includes(filter_Text.toLowerCase())
      )
    "
    border
    stripe
    :header-cell-style="headClass"
    :height="Height"
  >
    <el-table-column prop="status" align="center" label="状态" width="50">
      <template #default="scope">
        <el-avatar
          class="status"
          :style="
            scope.row.status == 1
              ? 'background-color:red'
              : 'background-color:#04F21C'
          "
        ></el-avatar>
      </template>
    </el-table-column>
    <el-table-column
      prop="monitorDeviceName"
      label="监控设备名称"
      align="center"
      width=""
    ></el-table-column>
    <el-table-column
      prop="monitorDeviceCode"
      label="监控设备编号"
      align="center"
      width=""
    ></el-table-column>
    <el-table-column
      prop="loopMeterAddress"
      label="回路表计地址"
      align="center"
      width=""
    ></el-table-column>
    <el-table-column
      prop="ratedVoltage"
      label="额定电压"
      align="center"
      width=""
    ></el-table-column>
    <el-table-column
      prop="ratedCurrent"
      label="额定电流"
      align="center"
      width=""
    ></el-table-column>
    <el-table-column
      prop="currentLoadRate"
      label="电流负载率门限"
      align="center"
      width=""
    ></el-table-column>
    <el-table-column
      prop="qualityAnalysis"
      label="电能质量分析"
      align="center"
      width=""
    ></el-table-column>
    <el-table-column label="操作" align="center" width="150">
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          style="color: #409eff"
          @click.prevent="editRow(scope.row)"
        >
          编辑
        </el-button>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          icon="el-icon-info"
          icon-color="red"
          title="确定删除?"
          @confirm="handleDelete(scope.row)"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button type="text" size="small" style="color: red">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column label="变量" align="center" width="100">
      <template #default="scope">
        <el-button
          type="text"
          size="small"
          style="color: #409eff"
          @click.prevent="variableList(scope.row)"
        >
          变量列表
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="listPagination1">
    <el-pagination
      v-model:currentPage="currentPage"
      :page-sizes="[15, 20, 25, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
    ></el-pagination>
  </div>

  <list-Dialog
    :list_Dialog="listDialogBool"
    @closeNo="closeNo"
    :DialogArray="DialogArray"
  ></list-Dialog>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref, watchEffect } from 'vue'
import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
import { ElMessage } from 'element-plus'
import listDialog from './powerDialog/listDialog.vue'

export default defineComponent({
  name: 'powerEquip',
  components: {
    listDialog,
  },
  emits: ['updateRow', 'closeNo'],
  props: {
    filter_Text: String,
    Height: String,
    refresh: Boolean,
  },
  setup(props, { emit }) {
    const store = useStore()
    const deviceNumData = ref([]) //列表查询值存储
    const pageSize = ref(15) //分页
    const currentPage = ref(1) //分页
    const total = ref(0) //分页

    const listDialogBool = ref(false)
    const DialogArray = ref([])

    //变量列表
    const variableList = (row) => {
      DialogArray.value = row
      listDialogBool.value = true
    }

    //克隆弹窗关闭
    const closeNo = (value) => {
      listDialogBool.value = value
    }

    //查询
    function listSelect() {
      api
        .deviceNewsList({
          siteId: store.state.siteId,
          size: pageSize.value,
          current: currentPage.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            total.value = requset.data.total
            deviceNumData.value = requset.data.records
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }
    
    //删除 是否删除  ---- 是
    const handleDelete = (row) => {
      api.deviceNewsDel({ id: row.id }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          listSelect()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    //是否删除  ---- 否
    const cancelEvent = () => {
      console.log('cancel!')
    }
    //编辑
    const editRow = (row) => {
      emit('updateRow', row)
      listSelect()
    }

    watchEffect((fn, options) => {
      fn, options
      if (props.refresh == true) {
        listSelect()
      }
    })
    onMounted(() => {
      listSelect()
    })

    const handleSizeChange = (val) => {
      pageSize.value = val
      listSelect()
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
      listSelect()
    }
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }
    return {
      headClass,
      closeNo,
      variableList, //变量列表按钮事件
      editRow, //编辑按钮事件
      handleDelete, //删除按钮事件
      deviceNumData, //列表查询值存储
      cancelEvent,

      DialogArray,
      listDialogBool,

      currentPage,
      pageSize,
      total,
      handleSizeChange,
      handleCurrentChange,
    }
  },
})
</script>

<style lang="scss" scoped>
//弹出框内容样式
.dialogOne {
  div:nth-child(1) {
    margin-bottom: 30px;
  }
  .content {
    margin-bottom: 20px;
    span:nth-child(1) {
      color: red;
    }
    .inputer {
      width: 150px;
    }
  }
}
.listPagination {
  margin-top: 15px;
  margin-bottom: -30px;
  float: right;
}
.listPagination1 {
  margin-top: 15px;
  float: right;
}
</style>