admin-fiveFollowing/src/views/deviceManage/powerEquip/communicateEquip/index.vue

<template>
  <div class="communicate">
    <div class="comTop">
      <div class="comTopLeft">
        <el-input
          placeholder="搜索设备或编号"
          v-model="filterText"
          class="comTopLeftInput"
        >
          <template #suffix>
            <i class="el-icon-search el-input__icon"></i>
          </template>
        </el-input>
        <el-button
          class="search-button"
          icon="el-icon-plus"
          type="success"
          @click="Insert()"
        >
          新增
        </el-button>
      </div>

      <div class="comRight">
        <el-button type="primary">导入</el-button>
        <el-button type="primary">导出</el-button>
      </div>
    </div>

    <div class="comContent">
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !filterText ||
              data.deviceName
                .toLowerCase()
                .includes(filterText.toLowerCase()) ||
              data.deviceCode.toLowerCase().includes(filterText.toLowerCase())
          )
        "
        border
        stripe
        :header-cell-style="headClass"
        :height="Height"
      >
        <el-table-column prop="stationStatus" label="状态" width="50">
          <template #default="scope">
            <el-avatar
              class="status"
              :style="
                scope.row.stationStatus == 0
                  ? 'background-color:red'
                  : 'background-color:#04F21C'
              "
            ></el-avatar>
          </template>
        </el-table-column>

        <el-table-column
          prop="deviceName"
          label="通信设备名称"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="deviceCode"
          label="设备编号"
          width=""
        ></el-table-column>
        <el-table-column
          prop="deviceSite"
          label="所属站点"
          width=""
        ></el-table-column>
        <el-table-column
          prop="offlineTime"
          label="上次离线时间"
          width=""
        ></el-table-column>
        <el-table-column
          prop="onlineTime"
          label="上次在线时间"
          width=""
        ></el-table-column>
        <el-table-column
          prop="offlineDuration"
          label="离线时长"
          width=""
        ></el-table-column>
        <el-table-column
          prop="onlineDuration"
          label="在线时长"
          width=""
        ></el-table-column>
        <el-table-column
          prop="deviceAdd"
          label="设备地址"
          width=""
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="Update(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              @click="Delete(scope.$index, scope.row)"
              type="text"
              size="small"
              style="color: red"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="listPagination">
        <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[15, 20, 25, 30]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        ></el-pagination>
      </div>
    </div>
    <div></div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'powerEquip',
  components: {},
  props: {
    Height: String,
  },
  data() {
    return {
      deviceNumData: [],
      tableData: [
        {
          stationStatus: 0,
          deviceName: '测试设备',
          deviceCode: 'cssb1',
          deviceSite: '站点1',
          offlineTime: '2021-1-1 00:00:00',
          onlineTime: '2021-2-1 00:00:00',
          offlineDuration: '180天',
          onlineDuration: '180天',
          deviceAdd: '徐乐路208号',
        },
        {
          stationStatus: 1,
          deviceName: '测试设备',
          deviceCode: 'cssb1',
          deviceSite: '站点1',
          offlineTime: '2021-1-1 00:00:00',
          onlineTime: '2021-2-1 00:00:00',
          offlineDuration: '180天',
          onlineDuration: '180天',
          deviceAdd: '徐乐路208号',
        },
      ],
      activeName: 'powerEquip',
      filterText: '',
      currentPage: ref(15),
    }
  },
  methods: {
    //新增
    Insert() {
      console.log('')
    },
    // 表头样式设置
    headClass() {
      return 'background:#FAFAFA !important;color: black;'
    },
    //修改
    Update(row) {
      console.log(row)
    },
    //删除
    Delete(ind, row) {
      console.log(ind, row)
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`)
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`)
    },
  },
})
</script>

<style lang="scss" scoped>
//first样式
.communicate {
  margin: 15px;
  //顶部左侧样式
  .comTop {
    display: flex;
    height: 32px;
    line-height: 32px;
    .comTopLeft {
      width: 70%;
      .goBack {
        margin-right: 15px;
      }
      .comTopLeftTitle {
        font-size: 14px;
        margin-right: 10px;
      }
      .comTopLeftInput {
        width: 15rem;
      }
      .el-input__icon {
        color: #409eff;
      }
      .el-input__inner:hover {
        border-color: #409eff;
      }
      .el-input__inner:focus {
        border-color: #409eff;
      }
      .search-button {
        margin-left: 1rem;
      }
    }

    //顶部右侧样式
    .comRight {
      width: 30%;
      button {
        margin-left: 1rem;
        float: right;
      }
    }
  }
  .comContent {
    margin-top: 15px;
  }
}

.listPagination {
  margin-top: 15px;
  float: right;
}
</style>