admin-fiveFollowing/src/views/stationManage/siteList.vue

<template>
  <div class="app-container">
    <!-- 返回start -->
    <div class="siteTitle">
      <el-button class="goBack" @click="goBack">返回</el-button>
      台区1-站点列表
    </div>
    <!-- 返回end -->

    <!-- 表格start -->
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="headClass"
      :cell-style="cellStyle"
    >
      <el-table-column
        fixed
        prop="siteName"
        label="站点名称"
        width=""
      ></el-table-column>
      <el-table-column prop="stationStatus" label="状态" width="">
        <template #default="scope">
          <el-avatar class="status"  :class="[scope.row.deviceStatusr=='离线'? 'offline':'online']"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备名称"
        width=""
      ></el-table-column>
      <el-table-column prop="monitoringEquipmentNo" label="监控设备编号" width="">
        <template #default="scope">
          <span>{{scope.row.monitoringEquipmentNo?scope.row.monitoringEquipmentNo:'--'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ratedVoltage" label="额定电压" width=""></el-table-column>
      <el-table-column prop="ratedCurrent" label="额定电流" width=""></el-table-column>
      <el-table-column
        prop="currentLoadRate"
        label="电流负载率门限"
        width=""
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格end -->
  </div>
</template>

<script>
import { defineComponent, ref,onMounted } from 'vue'
import * as api from '@/api/stationManage/index.js'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'SiteList',
  props: ['pageShow', 'goSiteListParam'],

  setup(props, context) {
    const showDialog = ref(false)
    const input = ref('请输入台区名称')
    const tableData = ref([])
    const goBack = () => {
      context.emit('func')
    }
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA;'
    }

    //自定义列样式
    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      row, column, rowIndex
      if (columnIndex === 1) {
        return `color:#04F21C`
      } else {
        return ''
      }
    }

    //查看
    const handleClick = (row) => {
      alert('查看对应站点（页面跳转）')
      console.log(row)
    }

    //站点设备列表
    function siteDeviceList() {
      api
        .siteDeviceList({"stationAreaId":props.goSiteListParam})
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            // console.log(requset.data)
            tableData.value = requset.data
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

   

    onMounted(() => {
      siteDeviceList()
    })

    return {
      tableData,
      input,
      showDialog,

      headClass,
      cellStyle,
      goBack,
      handleClick,
    }
  },
})
</script>


<style lang='scss' scoped>
</style>